Hi,
I am desperately trying to get a slider/gallery working for http://www.jbmhcrystalball.com/ozcauze_photos3.php. Originally I had implemented Galleria and Jcarousel however IE8 had troubles with the thumbnails so I went to the next JQuery plugin that seemed like it was simple enough to implement and customizable (theme).
I orginally tried to use GalleryView 2.0 but it had too many bugs, so I went with GalleryView 1.1. The site http://spaceforaname.com has seeming very thorough documentation on the full usage and customization of GalleryView 1.1. As a basis I chose http://spaceforaname.com/polaroid.html as an example and pulled the source and modified the links to match my file locations.
I set-up my thumbnails and panels the exact same way as the example only I have a lot more images. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./gallery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./gallery/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./gallery/js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="./gallery/js/jquery.timers-1.1.2.js"></script>
<link rel="stylesheet" type="text/css" href="./gallery/galleryview/galleryview.css" />
<LINK rel="stylesheet" type="text/css" href="./css/ozcause.css" title="" />
<!--[if gte IE 8]>
<LINK rel="stylesheet" type="text/css" href="./css/ozcause_ie8.css" title="" />
<![endif]-->
<!--[if gte IE 7]>
<LINK rel="stylesheet" type="text/css" href="./css/ozcause_ie7.css" title="" />
<![endif]-->
<!--[if gte IE 6]>
<LINK rel="stylesheet" type="text/css" href="./css/ozcause_ie6.css" title="" />
<![endif]-->
<title>The Oz Cauze At The Crystal Ball 2010</title>
<style type="text/css">
#gallery_wrap {
position: relative;
width: 448px;
height: 448px;
padding: 84px 70px 177px 61px;
margin-bottom: 50px;
background: url(img/polaroid_back.png) top left no-repeat;
}
.panel {
margin-bottom: 10px;
}
a:link,a:visited {
color: #ddd !important;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
h3 {
border-bottom-color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 448,
panel_height: 448,
frame_width: 100,
frame_height: 80,
transition_speed: 1200,
background_color: 'transparent',
border: 'none',
easing: 'easeOutBounce',
nav_theme: 'dark'
});
});
</script>
<!-- InstanceEndEditable -->
</head>
<body bgcolor="#ffffff">
<div id='wrapper' >
<div id='header'><img src='./images/general/banner.jpg' /></div>
<img id='bc_sold_out' src='./images/general/bottom_corner_sold_out.png' />
<div id='inner_wrapper' class='centered_image'>
<div id='menu'>
<?php include('./includes/menu.php') ?>
</div>
<div id='content'>
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel">
<img src="./gallery/i/photos/PBJ_1685.JPG" title="PBJ_1685.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1681.JPG" title="PBJ_1681.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1701.JPG" title="PBJ_1701.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1704.JPG" title="PBJ_1704.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1716.JPG" title="PBJ_1716.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1730.JPG" title="PBJ_1730.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1744.JPG" title="PBJ_1744.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1745.JPG" title="PBJ_1745.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1747.JPG" title="PBJ_1747.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1749.JPG" title="PBJ_1749.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1753.JPG" title="PBJ_1753.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1754.JPG" title="PBJ_1754.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1756.JPG" title="PBJ_1756.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1759.JPG" title="PBJ_1759.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1765.JPG" title="PBJ_1765.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1769.JPG" title="PBJ_1769.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1775.JPG" title="PBJ_1775.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1777.JPG" title="PBJ_1777.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1779.JPG" title="PBJ_1779.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1781.JPG" title="PBJ_1781.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1783.JPG" title="PBJ_1783.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1784.JPG" title="PBJ_1784.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1785.JPG" title="PBJ_1785.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1789.JPG" title="PBJ_1789.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1791.JPG" title="PBJ_1791.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1793.JPG" title="PBJ_1793.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1798.JPG" title="PBJ_1798.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1808.JPG" title="PBJ_1808.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1810.JPG" title="PBJ_1810.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1813.JPG" title="PBJ_1813.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1824.JPG" title="PBJ_1824.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1828.JPG" title="PBJ_1828.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1833.JPG" title="PBJ_1833.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1837.JPG" title="PBJ_1837.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1842.JPG" title="PBJ_1842.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1846.JPG" title="PBJ_1846.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1853.JPG" title="PBJ_1853.JPGG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1854.JPG" title="PBJ_1854.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1857.JPG" title="PBJ_1857.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1861.JPG" title="PBJ_1861.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1866.JPG" title="PBJ_1866.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1871.JPG" title="PBJ_1871.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1875.JPG" title="PBJ_1875.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1876.JPG" title="PBJ_1876.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1878.JPG" title="PBJ_1878.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1884.JPG" title="PBJ_1884.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1888.JPG" title="PBJ_1888.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1892.JPG" title="PBJ_1892.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1894.JPG" title="PBJ_1894.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1898.JPG" title="PBJ_1898.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1915.JPG" title="PBJ_1915.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1934.JPG" title="PBJ_1934.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1943.JPG" title="PBJ_1943.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1958.JPG" title="PBJ_1958.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1965.JPG" title="PBJ_1965.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1970.JPG" title="PBJ_1970.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1975.JPG" title="PBJ_1975.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1981.JPG" title="PBJ_1981.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1985.JPG" title="PBJ_1985.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1988.JPG" title="PBJ_1988.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1989.JPG" title="PBJ_1989.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1994.JPG" title="PBJ_1994.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1996.JPG" title="PBJ_1996.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_1997.JPG" title="PBJ_1997.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2000.JPG" title="PBJ_2000.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2001.JPG" title="PBJ_2001.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2007.JPG" title="PBJ_2007.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2010.JPG" title="PBJ_2010.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2015.JPG" title="PBJ_2015.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2032.JPG" title="PBJ_2032.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2034.JPG" title="PBJ_2034.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2039.JPG" title="PBJ_2039.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2048.JPG" title="PBJ_2048.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2051.JPG" title="PBJ_2051.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2055.JPG" title="PBJ_2055.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2062.JPG" title="PBJ_2062.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2075.JPG" title="PBJ_2075.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2082.JPG" title="PBJ_2082.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2086.JPG" title="PBJ_2086.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2089.JPG" title="PBJ_2089.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2108.JPG" title="PBJ_2108.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2122.JPG" title="PBJ_2122.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2136.JPG" title="PBJ_2136.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2144.JPG" title="PBJ_2144.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2153.JPG" title="PBJ_2153.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2158.JPG" title="PBJ_2158.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2165.JPG" title="PBJ_2165.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2173.JPG" title="PBJ_2173.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2175.JPG" title="PBJ_2175.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2176.JPG" title="PBJ_2176.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2177.JPG" title="PBJ_2177.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2179.JPG" title="PBJ_2179.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2181.JPG" title="PBJ_2181.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2183.JPG" title="PBJ_2183.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2184.JPG" title="PBJ_2184.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2202.JPG" title="PBJ_2202.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2208.JPG" title="PBJ_2208.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2210.JPG" title="PBJ_2210.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2214.JPG" title="PBJ_2214.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2231.JPG" title="PBJ_2231.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2242.JPG" title="PBJ_2242.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2243.JPG" title="PBJ_2243.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2244.JPG" title="PBJ_2244.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2247.JPG" title="PBJ_2247.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2249.JPG" title="PBJ_2249.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2251.JPG" title="PBJ_2251.JPG" alt="" />
</div>
<div class="panel">
<img src="./gallery/i/photos/PBJ_2256.JPG" title="PBJ_2256.JPG" alt="" />
</div>
<ul class="filmstrip">
<li> <img src="./gallery/i/thumbnails/PBJ_1685.JPG" title="PBJ_1685.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1681.JPG" title="PBJ_1681.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1701.JPG" title="PBJ_1701.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1704.JPG" title="PBJ_1704.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1716.JPG" title="PBJ_1716.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1730.JPG" title="PBJ_1730.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1744.JPG" title="PBJ_1744.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1745.JPG" title="PBJ_1745.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1747.JPG" title="PBJ_1747.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1749.JPG" title="PBJ_1749.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1753.JPG" title="PBJ_1753.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1754.JPG" title="PBJ_1754.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1756.JPG" title="PBJ_1756.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1759.JPG" title="PBJ_1759.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1765.JPG" title="PBJ_1765.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1769.JPG" title="PBJ_1769.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1775.JPG" title="PBJ_1775.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1777.JPG" title="PBJ_1777.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1779.JPG" title="PBJ_1779.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1781.JPG" title="PBJ_1781.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1783.JPG" title="PBJ_1783.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1784.JPG" title="PBJ_1784.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1785.JPG" title="PBJ_1785.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1789.JPG" title="PBJ_1789.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1791.JPG" title="PBJ_1791.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1793.JPG" title="PBJ_1793.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1798.JPG" title="PBJ_1798.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1808.JPG" title="PBJ_1808.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1810.JPG" title="PBJ_1810.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1813.JPG" title="PBJ_1813.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1824.JPG" title="PBJ_1824.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1828.JPG" title="PBJ_1828.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1833.JPG" title="PBJ_1833.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1837.JPG" title="PBJ_1837.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1842.JPG" title="PBJ_1842.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1846.JPG" title="PBJ_1846.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1853.JPG" title="PBJ_1853.JPGG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1854.JPG" title="PBJ_1854.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1857.JPG" title="PBJ_1857.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1861.JPG" title="PBJ_1861.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1866.JPG" title="PBJ_1866.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1871.JPG" title="PBJ_1871.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1875.JPG" title="PBJ_1875.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1876.JPG" title="PBJ_1876.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1878.JPG" title="PBJ_1878.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1884.JPG" title="PBJ_1884.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1888.JPG" title="PBJ_1888.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1892.JPG" title="PBJ_1892.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1894.JPG" title="PBJ_1894.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1898.JPG" title="PBJ_1898.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1915.JPG" title="PBJ_1915.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1934.JPG" title="PBJ_1934.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1943.JPG" title="PBJ_1943.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1958.JPG" title="PBJ_1958.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1965.JPG" title="PBJ_1965.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1970.JPG" title="PBJ_1970.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1975.JPG" title="PBJ_1975.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1981.JPG" title="PBJ_1981.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1985.JPG" title="PBJ_1985.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1988.JPG" title="PBJ_1988.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1989.JPG" title="PBJ_1989.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1994.JPG" title="PBJ_1994.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1996.JPG" title="PBJ_1996.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_1997.JPG" title="PBJ_1997.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2000.JPG" title="PBJ_2000.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2001.JPG" title="PBJ_2001.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2007.JPG" title="PBJ_2007.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2010.JPG" title="PBJ_2010.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2015.JPG" title="PBJ_2015.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2032.JPG" title="PBJ_2032.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2034.JPG" title="PBJ_2034.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2039.JPG" title="PBJ_2039.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2048.JPG" title="PBJ_2048.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2051.JPG" title="PBJ_2051.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2055.JPG" title="PBJ_2055.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2062.JPG" title="PBJ_2062.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2075.JPG" title="PBJ_2075.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2082.JPG" title="PBJ_2082.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2086.JPG" title="PBJ_2086.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2089.JPG" title="PBJ_2089.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2108.JPG" title="PBJ_2108.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2122.JPG" title="PBJ_2122.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2136.JPG" title="PBJ_2136.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2144.JPG" title="PBJ_2144.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2153.JPG" title="PBJ_2153.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2158.JPG" title="PBJ_2158.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2165.JPG" title="PBJ_2165.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2173.JPG" title="PBJ_2173.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2175.JPG" title="PBJ_2175.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2176.JPG" title="PBJ_2176.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2177.JPG" title="PBJ_2177.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2179.JPG" title="PBJ_2179.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2181.JPG" title="PBJ_2181.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2183.JPG" title="PBJ_2183.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2184.JPG" title="PBJ_2184.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2202.JPG" title="PBJ_2202.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2208.JPG" title="PBJ_2208.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2210.JPG" title="PBJ_2210.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2214.JPG" title="PBJ_2214.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2231.JPG" title="PBJ_2231.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2242.JPG" title="PBJ_2242.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2243.JPG" title="PBJ_2243.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2244.JPG" title="PBJ_2244.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2247.JPG" title="PBJ_2247.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2249.JPG" title="PBJ_2249.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2251.JPG" title="PBJ_2251.JPG" alt="" /> </li>
<li> <img src="./gallery/i/thumbnails/PBJ_2256.JPG" title="PBJ_2256.JPG" alt="" /> </li>
</ul>
<p>Photography by Jack Becker </p>
</div>
</div>
</div>
<div id='city'>
<img src='./images/landing/images/landing_21.jpg'/>
</div>
</div> <!-- END inner_wrapper -->
</div> <!-- END wrapper -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("---------------");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
The problem is that the slider does not display the proper corresponding thumbnail which is relative to its’ large image.
The slide show animates in the proper sequence and if you click a thumbnail it loads the correct large image.
I have been looking in the source javascript and see the iterator is going from 1 then to 107, 3 then to 108. but I don’t exactly understand why this is doing this or if it is even related to why the wrong thumbnails are loading?
Here is the javascript for GalleryView 1.1
/*
GalleryView - jQuery Content Gallery Plugin
Author: Jack Anderson
Version: 1.1 (April 5, 2009)
Documentation: http://www.spaceforaname.com/jquery/galleryview/
Please use this development script if you intend to make changes to the
plugin code. For production sites, please use jquery.galleryview-1.0.1-pack.js.
*/
(function($){
$.fn.galleryView = function(options) {
var opts = $.extend($.fn.galleryView.defaults,options);
var id;
var iterator = 0;
var gallery_width;
var gallery_height;
var frame_margin = 0;
var strip_width;
var wrapper_width;
var item_count = 0;
var slide_method;
var img_path;
var paused = false;
var frame_caption_size = 20;
var frame_margin_top = 5;
var pointer_width = 2;
//Define jQuery objects for reuse
var j_gallery;
var j_filmstrip;
var j_frames;
var j_panels;
var j_pointer;
/************************************************/
/* Plugin Methods */
/************************************************/
function showItem(i) {
//Disable next/prev buttons until transition is complete
$('img.nav-next').unbind('click');
$('img.nav-prev').unbind('click');
j_frames.unbind('click');
if(has_panels) {
if(opts.fade_panels) {
//Fade out all panels and fade in target panel
j_panels.fadeOut(opts.transition_speed).eq(i%item_count).fadeIn(opts.transition_speed,function(){
if(!has_filmstrip) {
$('img.nav-prev').click(showPrevItem);
$('img.nav-next').click(showNextItem);
}
});
}
}
if(has_filmstrip) {
//Slide either pointer or filmstrip, depending on transition method
if(slide_method=='strip') {
//Stop filmstrip if it's currently in motion
j_filmstrip.stop();
//Determine distance between pointer (eventual destination) and target frame
var distance = getPos(j_frames[i]).left - (getPos(j_pointer[0]).left+2);
var leftstr = (distance>=0?'-=':'+=')+Math.abs(distance)+'px';
//Animate filmstrip and slide target frame under pointer
//If target frame is a duplicate, jump back to 'original' frame
j_filmstrip.animate({
'left':leftstr
},opts.transition_speed,opts.easing,function(){
//Always ensure that there are a sufficient number of hidden frames on either
//side of the filmstrip to avoid empty frames
if(i>item_count) {
i = i%item_count;
iterator = i;
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*i)+'px');
} else if (i<=(item_count-strip_size)) {
i = (i%item_count)+item_count;
iterator = i;
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*i)+'px');
}
if(!opts.fade_panels) {
j_panels.hide().eq(i%item_count).show();
}
$('img.nav-prev').click(showPrevItem);
$('img.nav-next').click(showNextItem);
enableFrameClicking();
});
} else if(slide_method=='pointer') {
//Stop pointer if it's currently in motion
j_pointer.stop();
//Get position of target frame
var pos = getPos(j_frames[i]);
//Slide the pointer over the target frame
j_pointer.animate({
'left':(pos.left-2+'px')
},opts.transition_speed,opts.easing,function(){
if(!opts.fade_panels) {
j_panels.hide().eq(i%item_count).show();
}
$('img.nav-prev').click(showPrevItem);
$('img.nav-next').click(showNextItem);
enableFrameClicking();
});
}
if($('a',j_frames[i])[0]) {
j_pointer.unbind('click').click(function(){
var a = $('a',j_frames[i]).eq(0);
if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
else {location.href = a.attr('href');}
});
}
}
};
function showNextItem() {
$(document).stopTime("transition");
if(++iterator==j_frames.length) {iterator=0;}
showItem(iterator);
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
};
function showPrevItem() {
$(document).stopTime("transition");
if(--iterator<0) {iterator = item_count-1;}
//alert(iterator);
showItem(iterator);
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
};
function getPos(el) {
var left = 0, top = 0;
var el_id = el.id;
if(el.offsetParent) {
do {
left += el.offsetLeft;
top += el.offsetTop;
} while(el = el.offsetParent);
}
//If we want the position of the gallery itself, return it
if(el_id == id) {return {'left':left,'top':top};}
//Otherwise, get position of element relative to gallery
else {
var gPos = getPos(j_gallery[0]);
var gLeft = gPos.left;
var gTop = gPos.top;
return {'left':left-gLeft,'top':top-gTop};
}
};
function enableFrameClicking() {
j_frames.each(function(i){
//If there isn't a link in this frame, set up frame to slide on click
//Frames with links will handle themselves
if($('a',this).length==0) {
$(this).click(function(){
$(document).stopTime("transition");
showItem(i);
iterator = i;
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
});
}
});
};
function buildPanels() {
//If there are panel captions, add overlay divs
if($('.panel-overlay').length>0) {j_panels.append('<div class="overlay"></div>');}
if(!has_filmstrip) {
//Add navigation buttons
$('<img />').addClass('nav-next').attr('src',img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1100',
'cursor':'pointer',
'top':((opts.panel_height-22)/2)+'px',
'right':'10px',
'display':'none'
}).click(showNextItem);
$('<img />').addClass('nav-prev').attr('src',img_path+opts.nav_theme+'/prev.png').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1100',
'cursor':'pointer',
'top':((opts.panel_height-22)/2)+'px',
'left':'10px',
'display':'none'
}).click(showPrevItem);
$('<img />').addClass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-next.png').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1099',
'top':((opts.panel_height-22)/2)-10+'px',
'right':'0',
'display':'none'
});
$('<img />').addClass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-prev.png').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1099',
'top':((opts.panel_height-22)/2)-10+'px',
'left':'0',
'display':'none'
});
}
j_panels.css({
'width':(opts.panel_width-parseInt(j_panels.css('paddingLeft').split('px')[0],10)-parseInt(j_panels.css('paddingRight').split('px')[0],10))+'px',
'height':(opts.panel_height-parseInt(j_panels.css('paddingTop').split('px')[0],10)-parseInt(j_panels.css('paddingBottom').split('px')[0],10))+'px',
'position':'absolute',
'top':(opts.filmstrip_position=='top'?(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top))+'px':'0px'),
'left':'0px',
'overflow':'hidden',
'background':'white',
'display':'none'
});
$('.panel-overlay',j_panels).css({
'position':'absolute',
'zIndex':'999',
'width':(opts.panel_width-20)+'px',
'height':opts.overlay_height+'px',
'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
'left':'0',
'padding':'0 10px',
'color':opts.overlay_text_color,
'fontSize':opts.overlay_font_size
});
$('.panel-overlay a',j_panels).css({
'color':opts.overlay_text_color,
'textDecoration':'underline',
'fontWeight':'bold'
});
$('.overlay',j_panels).css({
'position':'absolute',
'zIndex':'998',
'width':opts.panel_width+'px',
'height':opts.overlay_height+'px',
'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
'left':'0',
'background':opts.overlay_color,
'opacity':opts.overlay_opacity
});
$('.panel iframe',j_panels).css({
'width':opts.panel_width+'px',
'height':(opts.panel_height-opts.overlay_height)+'px',
'border':'0'
});
};
function buildFilmstrip() {
//Add wrapper to filmstrip to hide extra frames
j_filmstrip.wrap('<div class="strip_wrapper"></div>');
if(slide_method=='strip') {
j_frames.clone().appendTo(j_filmstrip);
j_frames.clone().appendTo(j_filmstrip);
j_frames = $('li',j_filmstrip);
}
//If captions are enabled, add caption divs and fill with the image titles
if(opts.show_captions) {
j_frames.append('<div class="caption"></div>').each(function(i){
$(this).find('.caption').html($(this).find('img').attr('title'));
});
}
j_filmstrip.css({
'listStyle':'none',
'margin':'0',
'padding':'0',
'width':strip_width+'px',
'position':'absolute',
'zIndex':'900',
'top':'0',
'left':'0',
'height':(opts.frame_height+10)+'px',
'background':opts.background_color
});
j_frames.css({
'float':'left',
'position':'relative',
'height':opts.frame_height+'px',
'zIndex':'901',
'marginTop':frame_margin_top+'px',
'marginBottom':'0px',
'marginRight':frame_margin+'px',
'padding':'0',
'cursor':'pointer'
});
$('img',j_frames).css({
'border':'none'
});
$('.strip_wrapper',j_gallery).css({
'position':'absolute',
'top':(opts.filmstrip_position=='top'?'0px':opts.panel_height+'px'),
'left':((gallery_width-wrapper_width)/2)+'px',
'width':wrapper_width+'px',
'height':(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top))+'px',
'overflow':'hidden'
});
$('.caption',j_gallery).css({
'position':'absolute',
'top':opts.frame_height+'px',
'left':'0',
'margin':'0',
'width':opts.frame_width+'px',
'padding':'0',
'color':opts.caption_text_color,
'textAlign':'center',
'fontSize':'10px',
'height':frame_caption_size+'px',
'lineHeight':frame_caption_size+'px'
});
var pointer = $('<div></div>');
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'width':opts.frame_width-pointer_width+'px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
j_pointer = $('#pointer',j_gallery);
if(has_panels) {
var pointerArrow = $('<img />');
pointerArrow.attr('src',img_path+opts.nav_theme+'/pointer'+(opts.filmstrip_position=='top'?'-down':'')+'.png').appendTo($('#pointer')).css({
'position':'absolute',
'zIndex':'1001',
'top':(opts.filmstrip_position=='bottom'?'-'+(10+pointer_width)+'px':opts.frame_height+'px'),
'left':((opts.frame_width/2)-10)+'px'
});
}
//If the filmstrip is animating, move the strip to the middle third
if(slide_method=='strip') {
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*item_count)+'px');
iterator = item_count;
}
//If there's a link under the pointer, enable clicking on the pointer
if($('a',j_frames[iterator])[0]) {
j_pointer.click(function(){
var a = $('a',j_frames[iterator]).eq(0);
if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
else {location.href = a.attr('href');}
});
}
//Add navigation buttons
$('<img />').addClass('nav-next').attr('src',img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({
'position':'absolute',
'cursor':'pointer',
'top':(opts.filmstrip_position=='top'?0:opts.panel_height)+frame_margin_top+((opts.frame_height-22)/2)+'px',
'right':(gallery_width/2)-(wrapper_width/2)-10-22+'px'
}).click(showNextItem);
$('<img />').addClass('nav-prev').attr('src',img_path+opts.nav_theme+'/prev.png').appendTo(j_gallery).css({
'position':'absolute',
'cursor':'pointer',
'top':(opts.filmstrip_position=='top'?0:opts.panel_height)+frame_margin_top+((opts.frame_height-22)/2)+'px',
'left':(gallery_width/2)-(wrapper_width/2)-10-22+'px'
}).click(showPrevItem);
};
//Check mouse to see if it is within the borders of the panel
//More reliable than 'mouseover' event when elements overlay the panel
function mouseIsOverPanels(x,y) {
var pos = getPos(j_gallery[0]);
var top = pos.top;
var left = pos.left;
return x > left && x < left+opts.panel_width && y > top && y < top+opts.panel_height;
};
/************************************************/
/* Main Plugin Code */
/************************************************/
return this.each(function() {
j_gallery = $(this);
//Determine path between current page and filmstrip images
//Scan script tags and look for path to GalleryView plugin
$('script').each(function(i){
var s = $(this);
if(s.attr('src') && s.attr('src').match(/jquery\\.galleryview/)){
img_path = s.attr('src').split('jquery.galleryview')[0]+'themes/';
}
});
//Hide gallery to prevent Flash of Unstyled Content (FoUC) in IE
j_gallery.css('visibility','hidden');
//Assign elements to variables for reuse
j_filmstrip = $('.filmstrip',j_gallery);
j_frames = $('li',j_filmstrip);
j_panels = $('.panel',j_gallery);
id = j_gallery.attr('id');
has_panels = j_panels.length > 0;
has_filmstrip = j_frames.length > 0;
if(!has_panels) opts.panel_height = 0;
//Number of frames in filmstrip
item_count = has_panels?j_panels.length:j_frames.length;
//Number of frames that can display within the screen's width
//64 = width of block for navigation button * 2
//5 = minimum frame margin
strip_size = has_panels?Math.floor((opts.panel_width-64)/(opts.frame_width+frame_margin)):Math.min(item_count,opts.filmstrip_size);
/************************************************/
/* Determine transition method for filmstrip */
/************************************************/
//If more items than strip size, slide filmstrip
//Otherwise, slide pointer
if(strip_size >= item_count) {
slide_method = 'pointer';
strip_size = item_count;
}
else {slide_method = 'strip';}
/************************************************/
/* Determine dimensions of various elements */
/************************************************/
//Width of gallery block
gallery_width = has_panels?opts.panel_width:(strip_size*(opts.frame_width+frame_margin))-frame_margin+64;
//Height of gallery block = screen + filmstrip + captions (optional)
gallery_height = (has_panels?opts.panel_height:0)+(has_filmstrip?opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top):0);
//Width of filmstrip
if(slide_method == 'pointer') {strip_width = (opts.frame_width*item_count)+(frame_margin*(item_count));}
else {strip_width = (opts.frame_width*item_count*3)+(frame_margin*(item_count*3));}
//Width of filmstrip wrapper (to hide overflow)
wrapper_width = ((strip_size*opts.frame_width)+((strip_size-1)*frame_margin));
/************************************************/
/* Apply CSS Styles */
/************************************************/
j_gallery.css({
'position':'relative',
'margin':'0',
'background':opts.background_color,
'border':opts.border,
'width':gallery_width+'px',
'height':gallery_height+'px'
});
/************************************************/
/* Build filmstrip and/or panels */
/************************************************/
if(has_filmstrip) {
buildFilmstrip();
}
if(has_panels) {
buildPanels();
}
/************************************************/
/* Add events to various elements */
/************************************************/
if(has_filmstrip) enableFrameClicking();
$().mousemove(function(e){
if(mouseIsOverPanels(e.pageX,e.pageY)) {
if(opts.pause_on_hover) {
$(document).oneTime(500,"animation_pause",function(){
$(document).stopTime("transition");
paused=true;
});
}
if(has_panels && !has_filmstrip) {
$('.nav-overlay').fadeIn('fast');
$('.nav-next').fadeIn('fast');
$('.nav-prev').fadeIn('fast');
}
} else {
if(opts.pause_on_hover) {
$(document).stopTime("animation_pause");
if(paused) {
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
paused = false;
}
}
if(has_panels && !has_filmstrip) {
$('.nav-overlay').fadeOut('fast');
$('.nav-next').fadeOut('fast');
$('.nav-prev').fadeOut('fast');
}
}
});
/************************************************/
/* Initiate Automated Animation */
/************************************************/
//Show the first panel
j_panels.eq(0).show();
//If we have more than one item, begin automated transitions
if(item_count > 1) {
$(document).everyTime(opts.transition_interval,"transition",function(){
showNextItem();
});
}
//Make gallery visible now that work is complete
j_gallery.css('visibility','visible');
});
};
$.fn.galleryView.defaults = {
panel_width: 448, //sb was 400
panel_height: 448, //sb was 300
frame_width: 100, //sb was 80
frame_height: 80,
filmstrip_size: 6, //sb was 3
overlay_height: 70,
overlay_font_size: '1em',
transition_speed: 400,
transition_interval: 6000,
overlay_opacity: 0.6,
overlay_color: 'black',
background_color: 'black',
overlay_text_color: 'white',
caption_text_color: 'green', //sb was white
border: '1px solid black',
nav_theme: 'ozcause',
easing: 'swing',
filmstrip_position: 'bottom',
overlay_position: 'bottom',
show_captions: true, //sb was false
fade_panels: true,
pause_on_hover: false
};
})(jQuery);
Regards,
Steve