SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with multiple slideshows on the page

    Hello, I need to have three images displaying on a page, each of them looping through a set, but in sequence. This means that when the page loads three images display, after 2 seconds the first one changes, after a further 2 secs the second one, then the third, an then it would repeat endlessly.

    I've used innerfade.js and ave some code that delays initially delays each slideshow by 2 secs so that they change in sequence. However, at the beginning not all three images display, but one appears after the other.

    Please see http://jsfiddle.net/xXSb5/1/

    I need some help now in making this works. Much appreciated!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You're wanting the innerfade2 plugin to show a random sequence, but you don't want to wait for the staggered starting time to occur before the first image is shown.

    I see that you have already made some changes to the plugin, so if you want to maintain the random sequence under the control of the plugin a possible solution is to add to the innerfade2 plugin a new setting to freeze the start for a certain period of time. An option called freezeStart could be a useful name for that new option.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, John. None of the customisation to innerfade was mine. Someone else made an improvement here: http://computeraxe.com/jquery-stop-a...nerfade-plugin

    In fact, I'm just not very Javascript literate and think I need some kind soul to help me out with the correct code. Maybe this is a better starting point: http://jsfiddle.net/spirelli/gFveN/

    What needs to change though is that the transition of the first slide show should happen after 2 seconds, the 2nd after 4 seconds and the 3rd after 6 seconds (with all of them changing every 6 seconds, but offset by 2 secs).

    Thank you.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spirelli View Post
    What needs to change though is that the transition of the first slide show should happen after 2 seconds, the 2nd after 4 seconds and the 3rd after 6 seconds (with all of them changing every 6 seconds, but offset by 2 secs).
    With a sequential series of images that's fairly straight forward. We can just use setTimeout to delay the other slideshows by 2 and 4 seconds:

    Code javascript:
    ...
    setTimeout(function () {
        $('#header-img-2').innerfade2({
            ...
        });
    }, 2000);
    setTimeout(function () {
        $('#header-img-3').innerfade2({
            ...
        });
    }, 4000);

    We can also use a bit of CSS to help remove the extra images and tidy up the container height before the slideshow begins.

    Code css:
    #header-img-1 img+img, #header-img-2 img+img, #header-img-3 img+img {
        display: none;
    }
    #header-img-1, #header-img-2, #header-img-3 {
        height: 1em;
    }

    You can see this in action at http://jsfiddle.net/pmw57/gFveN/3/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your time Paul. That's been very helpful. All the best!

  6. #6
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got a follow-up question on this one. As it stands you have to wait for 6 seconds for the first animation to show.

    Is there a way to modify this so that the whole thing starts after 2 seconds?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spirelli View Post
    I've got a follow-up question on this one. As it stands you have to wait for 6 seconds for the first animation to show.

    Is there a way to modify this so that the whole thing starts after 2 seconds?
    We come back now to a similar situation that we started with, where customizing the plugin is wanted to provide a custom delay after the first image.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •