Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to implement GalleryView multiple times

    I am trying to implement Jack Anderson's GalleryView multiple times in a website I am developing.

    I am new to javascript and am not sure where I should even start. Any help would be much appreciated!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not sure how basic you're after here.

    The gallery plugin requires jQuery and is dependent on another timing plugin, so you need to load copies of each of these on your local server. For jQuery itself you can use a content delivery network like Google's instead of a local copy. You can access this via:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    and then the other scripts via:

    Code:
    <script type="text/javascript" src="/path/to/my/code/requiredfile.js"></script>
    <script type="text/javascript" src="/path/to/my/code/galleryplugin.js"></script>
    Include all of these on each page you want to use the plugin, and additionally include the gallery setup code as per your link, and you're sorted.

    Is that the sort of thing you meant?

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I'm sorry I should have worded it differently.

    I am attempting to set up multiple galleries on one page. This gallery fits really well with the layout that I have, but trying to implement it multiple times in the page doesn't work...I assume this is because the code is called by the first gallery and cannot be used by the others(?).

    As far as the setup for all the code I have that down, but I am not sure where to start inside the .js file to be able to use multiple galleries on the page.
    Last edited by JasonSims; 11-06-2010 at 05:54 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Ah right, I see what you mean. It depends on how the plugin is written. It is certainly possible to use a plugin more than once on a page, with different options if it's written to cope with that.

    Just tried it, works fine with more than one gallery. Are you using the latest version?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I am using version 2.1.1. I could not get the second gallery to scroll through the images. The next and previous buttons are completely inactive when I try to use them.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Hmm, that's the version I used. Can you post your code/link to your page?

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ahhh I see my problem now. Using just that code it DOES work multiple times on one page. My problem is in conjunction with another code apparently. The link is here.

    Thank you for all your help and time so far!

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Could you please post out the solution how you solved the multi galleries issue?

    Hey , I have met same problem, so could you please tell me how do you solve it?

    I have two galleries on same page, then it becomes this situation:
    I click on gallery 1 's "next button", the gallery 2 will play the animation.

    Thanks. you can also send me an email chris.jichen@gmail.com

    Thanks a lot for help

    <!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" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>jQuery GalleryView - by Jack Anderson</title>
    <!-- InstanceEndEditable -->
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="jquery.galleryview-1.1.js"></script>
    <script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>

    <!-- InstanceBeginEditable name="head" -->
    <style type="text/css">
    body {
    background: #444;
    color: white;
    }
    #gallery_wrap {
    width: 820px;
    height: 368px;
    padding: 25px;
    background: url(http://spaceforaname.com/img/border.png) top left no-repeat;
    }
    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: 500,
    panel_height: 300,
    frame_width: 100,
    frame_height: 38,
    transition_speed: 1200,
    transition_interval:600000,
    background_color: '#222',
    border: 'none',
    easing: 'easeInOutBack',
    pause_on_hover: true,
    nav_theme: 'custom',
    overlay_height: 52,
    filmstrip_position: 'top',
    overlay_position: 'top'
    });



    });

    $(document).ready(function(){
    $('#photos1').galleryView({
    filmstrip_size: 4,
    frame_width: 100,
    frame_height: 100,
    background_color: 'transparent',
    nav_theme: 'custom',
    border: 'none',
    show_captions:true,
    caption_text_color: 'black'
    });
    });
    </script>
    <!-- InstanceEndEditable -->
    </head>

    <body>
    <!-- InstanceBeginEditable name="ContentRegion" -->

    <div id="gallery_wrap">
    <div id="photos" class="galleryview">
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/01.jpg" />
    <div class="panel-overlay">
    <h2>Effet du soleil sur le paysage</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/02.jpg" />
    <div class="panel-overlay">
    <h2>Eden</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/03.jpg" />
    <div class="panel-overlay">
    <h2>Snail on the Corn</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>. View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/04.jpg" />
    <div class="panel-overlay">
    <h2>Flowers</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>. View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/06.jpg" />
    <div class="panel-overlay">
    <h2>Alone Beach 2B</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>. View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/05.jpg" />
    <div class="panel-overlay">
    <h2>Sunrise Trees</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>. View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/07.jpg" />
    <div class="panel-overlay">
    <h2>Waterfall</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>. View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>

    </div>
    </div>
    <div class="panel">
    <img src="http://spaceforaname.com/img/gallery/08.jpg" />
    <div class="panel-overlay">
    <h2>Death Valley</h2>
    <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>. View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>

    </div>
    </div>
    <ul class="filmstrip">
    <li><img src="http://spaceforaname.com/img/gallery/frame2-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-02.jpg" alt="Eden" title="Eden" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-04.jpg" alt="Flowers" title="Flowers" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>

    <li><img src="http://spaceforaname.com/img/gallery/frame2-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    <li><img src="http://spaceforaname.com/img/gallery/frame2-08.jpg" alt="Death Valley" title="Death Valley" /></li>
    </ul>
    </div>
    </div>


    <div id="photos1" class="galleryviewq">

    <ul class="filmstrip">
    <li><a target="_blank" href="http://www.sxc.hu/photo/158829"><img src="http://spaceforaname.com/img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></a></li>

    <li><a target="_blank" href="http://www.sxc.hu/photo/152865"><img src="http://spaceforaname.com/img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/34453"><img src="http://spaceforaname.com/img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/990169"><img src="http://spaceforaname.com/img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/738279"><img src="http://spaceforaname.com/img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/289581"><img src="http://spaceforaname.com/img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/174331"><img src="http://spaceforaname.com/img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></a></li>
    <li><a target="_blank" href="http://www.sxc.hu/photo/270109"><img src="http://spaceforaname.com/img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></a></li>
    </ul>
    </div>

    <h3>Function Call and Options</h3>
    <pre>$('#photos').galleryView({
    panel_width: 800,
    panel_height: 300,
    frame_width: 100,
    frame_height: 38,
    transition_speed: 1200,
    background_color: '#222',
    border: 'none',
    easing: 'easeInOutBack',
    pause_on_hover: true,
    nav_theme: 'custom',
    overlay_height: 52,
    filmstrip_position: 'top',
    overlay_position: 'top'
    });</pre>
    <!-- InstanceEndEditable -->
    </body>
    <!-- InstanceEnd --></html>

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'd recommend upgrading to the latest version of galleryView first. Looks like you are on 1.1, whereas the OP was using 2.1.1. It is possible that the plugin does not support multiple galleries with different options, though.


  •  

    Posting Permissions

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