CODEWITHSUNDEEP
javascriptjquerytabsslideshow
pixelsound
pixelsound

Reputation: 46

Carousel of slideshows?

I'm trying to develop a page template with a slideshow, static text content, and more text content in (up to 4) tabs. Slideshow is not in the tab panel area.

When page loads, I'd like it to play a "main section" slideshow When tab 1 is clicked, I'd like the slideshow to switch to a "tab-1" set of images When tab 2 is clicked, "tab-2" set of images... etc...

I have a working script that a friend wrote for me that lets me specify which images to play in the slideshow upon page load, and it determines a random play order upon page load, crossfades images, and loops.

Now I'd like the same thing to be triggered upon tab selection, with different specified images.

So I'd like:

Sorta like this (JSFiddle):

$(document).ready(function(){
    $('#thumbOne').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto";
    });
  });

  $(document).ready(function(){
    $('#thumbTwo').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoTwo";
    });
 });

  $(document).ready(function(){
    $('#thumbThree').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoThree";
    });
  });

but thumbnails = tabs for content panels, and large images = slideshows.

So are the tabs basically pagers? I don't want/need prev/next navigation for the slideshow - just constant flow...

I'm really new to js, and while I can see what a good amount of code is doing, I'm not able to wrap my head around what I'd need to make this work.

Asked this before, maybe not too clearly, but with more specifics: jQuery Responsive Tabs to start new slideshow/replace existing slideshow upon tab selection?

Got this JSFiddle up, but being new to this stuff, I didn't get the Responsive Tabs working right in the result pane - didn't get separation of html/js right, so I left it up, mostly functional like this...

Slideshow script is in the HTML on my JSFiddle. For Responsive Tabs (tabs switch to accordion based on media query) info, see here.

Upvotes: 0

Views: 141

Answers (2)

Charles Bandes
Charles Bandes

Reputation: 795

Matthew is on the right track. You only need a single slideshow, and you want to repopulate it with different data for each tab. There's no need to actually have multiple sets of markup or multiple containers.

There are also a bunch of issues with your javascript - you only want a single $(document).ready function, in which you can stick all the other stuff. There's also really no good reason to do a getElementById if you're already using jQuery - $("#mainPhoto") is much nicer.

Make a bunch of slideshow objects or arrays which point to your images (could be Matthew's json files, could just be variables)

So here's pseudocode for what I would do:

var slideShowOne = {
  images: ["img1.jpg", "img2.jpg", "img3.jpg"],
  name: "Cats"
};

var slideShowTwo = {
  images: ["img4.jpg", "img5.jpg", "img6.jpg"],
  name: "Dogs"
};

Then in your click actions you could do something like

$("#tabOne").click(function(){
    stop the slideshow;
    clear out the #slideshowContainer;
    slideShowOne.images.foreach(function(img)
        {$("#slideshowContainer").append("<img src='"+img+"'/>")})
    start the slideshow back up;
})

Upvotes: 1

Matthew Bernhardt
Matthew Bernhardt

Reputation: 11

My first instinct would be to repopulate the slideshow from a JSON document. The slideshow would read the state of the tabs, and load the relevant content into the array driving the slideshow.

I'll try to work up a fiddle to demonstrate this a bit later - at which point I'll edit this answer.

Upvotes: 1

Related Questions