SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    Angry Filmstrip trouble GalleryView

    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:
    PHP 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
    Code:
    /*
    
        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
    ictus==""

  2. #2
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    I got this working by using version 2.1.1. when I was having problems with version 2.1.1. before I was trying to use jQuery 1.4. The author of this plugin stated that he had worked hard to get it working on 1.4; although only 1.3.2 worked form me.

    Sorry for making you read so much, only for me to solve it.

    Regards,
    Steve
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •