SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Duplicate an image carousel

    Hi all,

    On a website we've created, we have an image carousel looping partner logo's (below the image categories), which works perfect.

    The client would like to duplicate this loop, on the same page exactly underneath the existing one. However, duplicating the code (html/js) won't work and will in fact stop the carousel from working. How can we resolve this?

    This is the JS-code used:

    Code JavaScript:
    <script language="javascript" type="text/javascript" src="/js/infinitecarousel.js"></script>
     
    <script type="text/javascript">    
    jQuery(document).ready(function(){
        jQuery('#slider-stage').carousel('#previous', '#next');
        jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');  
        });
     
    function slide(){
      $('#simpleNext').click();
    }
     
    var intervalId = window.setInterval(slide, 2000);
     
    $('#previous, #simpleNext').click(
     function(event){
      if(event.originalEvent){
       window.clearInterval(intervalId);
      }
     }
    );
    </script>

    And the HTML (the PHP echoes an <ul> with hyperlinked images):

    Code HTML4Strict:
    <!-- partners slideshow -->
    <div id="viewport">
        <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
    <a id="simplePrevious" style="visibility:hidden">Previous</a>
    <a id="simpleNext" style="visibility:hidden">Next</a>
    </div>

    Thanks in advance for any help/suggestions

    Stef
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not really experienced with this plugin, so I have a question before I give my possibly-useless advice. Where are the #slider-stage, #previous, and #next elements coming from? The #viewport, #simplePrevious, and #simpleNext elements are self-explanatory, but I couldn't figure out the other three, even after going over the "docs".

    However, I believe the advice I'm going to give applies regardless of where they come from or what they do. A carousel is basically built by telling the function where the list is located, and which elements to use for previous/next. So (because you're also doing some auto-scrolling) you could generalize it all into a single function:

    Code JavaScript:
    function autoCarousel(slides, prev, next) {
        var $slides = $(slides),
            $prev = $(prev),
            $next = $(next);
     
        jQuery(document).ready(function () {
            $slides.carousel(prev, next);
        });
     
        function slide() {
            $next.click();
        }
        var intervalId = window.setInterval(slide, 2000);
     
        $prev.add($next).click(function (event) {
            if (event.originalEvent) {
                window.clearInterval(intervalId);
            }
        });
    }

    Then you could just call it with the appropriate elements (obviously, you'd have to update your HTML as well):

    Code JavaScript:
    autoCarousel('#slides1', '#somePrevBtn', '#correspondingNext');
    autoCarousel('#differentSlideShow', '#etc', '#etcetc');
    I'm the web overlord for Graphic Business Systems

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the input and sorry for my tardy reply.

    I've tried updating the code, and the page doesn't crash anymore. However, the carousel does not slide the images, there are just two ranges of static logo's now. No animation.

    This is the code I've used now:

    Code JavaScript:
    function autoCarousel(slides, prev, next) {
        var $slides = $(slides),
            $prev = $(prev),
            $next = $(next);
     
        jQuery(document).ready(function () {
            $slides.carousel(prev, next);
        });
     
        function slide() {
            $next.click();
        }
        var intervalId = window.setInterval(slide, 2000);
     
        $prev.add($next).click(function (event) {
            if (event.originalEvent) {
                window.clearInterval(intervalId);
            }
        });
     
    autoCarousel('#viewport1', '#prev1', '#next1');
    autoCarousel('#viewport2', '#prev2', '#next2');
    }

    This is the HTML:

    Code HTML4Strict:
    <div id="viewport1">
        <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
    <a id="prev1" style="visibility:hidden">Previous</a>
    <a id="next1" style="visibility:hidden">Next</a>
    </div>
     
    <div id="viewport2">
        <?php wp_list_bookmarks('title_li=&before=<li>&after=</li>&orderby=id'); ?>
    <a id="prev2" style="visibility:hidden">Previous</a>
    <a id="next2" style="visibility:hidden">Next</a>
    </div>

    As said, the images are visible (at least the first 4 of them) in both carousels, but there is no sliding going on. What did I do wrong?

    Thanks in advance for any help.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The problem now is that you put those last two lines in the wrong place:

    Code JavaScript:
    function autoCarousel(slides, prev, next) {
        // ...
     
    // These are INSIDE the function they're trying to call!
    autoCarousel('#viewport1', '#prev1', '#next1');
    autoCarousel('#viewport2', '#prev2', '#next2');
    }

    Just move them out and it should work:

    Code JavaScript:
    function autoCarousel(slides, prev, next) {
        // ...
    }
     
    autoCarousel('#viewport1', '#prev1', '#next1');
    autoCarousel('#viewport2', '#prev2', '#next2');
    I'm the web overlord for Graphic Business Systems

  5. #5
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that doesn't do anything. Still two un-animated rows of images...

    I even had it like you say the first time, but because there's no sliding going on, I placed it within the function hoping that this would change anything.

    Could this have anything to do with the separate JS-file located here?
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Now I'm thinking that it might be because I forgot about the document not being ready. I bet this is actually how it needs to be done:

    Code JavaScript:
    function autoCarousel(slides, prev, next) {
        // ...
    }
     
    $(function () {
        autoCarousel('#viewport1', '#prev1', '#next1');
        autoCarousel('#viewport2', '#prev2', '#next2');
    });
    I'm the web overlord for Graphic Business Systems

  7. #7
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! That did the trick!

    Not only does it work like a charm, it doesn't even conflict with the other JS on the page (which used to happen a lot before).

    Thanks a million!
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


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
  •