Calling multiple slideshows inside a single slideshow using html link

[frontiercarlos]

Is it possible to allow a user to click a link on a single slide/pane that will call another slideshow (UL) into the same slider?

[frontiercarlos]

The idea is to be able to provide a gallery of slideshows to the user within a single slider

[Mottie]

I'm not quite sure I can picture what you're asking for... do you want to nest sliders? Or do you mean load in new content with each click into a slide? I don't think it would be a good idea to do the latter because then your users won't be able to link to a particular slide.

Also, check out the other navigation demos available and see if one works like you want.

[frontiercarlos]

Let me try to explain it better. I have a slide show now called "Top 10 blah blah blah". I plan to have several more Top 10 type slide shows. When a person is done sliding through one. I'd like them to have the equivalent of a table of contents slide where additional slideshows are present that they can click on and that slide show will load, into the same visual space/slider where the initial slideshow was.

You saw the GOLD Miners site homepage. I would like the visitor to be able to select and view multiple slideshows within the same visual space/slider.

Let me know if that makes sense. Actually, I can provide a link to a premium slider that does this so you can see what i mean. They call them albums. A grouping of slideshows that show in the same slider.

Note the translucent tool bar that appears in the middle of the slider. Click the 'Menu' button on the left side of the tool bar and it will then bring up a "Browse Albums" pane within the slider.

http://www.tn3gallery.com/

Let me know your thoughts.

Thanks again.

[Mottie]

It's very basic, but check out this demo:

HTML

<div id="slider"></div>

CSS

#slider {
    width: 400px;
    height: 300px;
}
/* album stuff */
.overlay {
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    position: absolute;
    z-index: 9;
    display: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.album-list {
    height: 100%;
    position: absolute;
    z-index: 10;
    display: none;
}
.album-thumbs {
    position: relative;
    float: left;
    text-align: center;
}
.album-thumbs img {
    width: 50px;
    height: 50px;
    margin: 10px ;
    border: 1px black solid;
    cursor: pointer;
}
.album-thumbs span {
    color: white;
    display: block;
    position: relative;
    top: -46px;
    text-shadow: 1px 1px 5px #333;
    cursor: pointer;
}
.icon {
    border: 1px black solid;
    padding: 2px 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    display: none;
}
.icon:hover {
    border-color: white;
    color: white;
}

and Script

$(function(){

    var currentAlbum = "Animals",
    albums = {
        "Animals": {
            "Kitty" : "http://placekitten.com/400/300",
            "Bear"  : "http://placebear.com/400/300",
            "Dog"   : "http://placedog.com/400/300"
        },
        "Plain": {
            "Grey"  : "http://placehold.it/400x300",
            "Red"   : "http://dummyimage.com/400x300/f00/fff",
            "Bacon" : "http://baconmockup.com/400/300"
        },
        "Celebs": {
            "Murray"  : "http://www.fillmurray.com/400/300",
            "Murray2" : "http://fillmurray.com/g/400/300",
            "Ice"     : "http://nicenicejpg.com/400/300",
            "Cage"    : "http://www.placecage.com/g/400/300",
            "Sheen"   : "http://placesheen.com/400/300"
        }
    },
    $slider = $('#slider'),
    sliderOptions = {
        /* add your AnythingSlider options here */
    },
    icon = '≡', // album icon
    $album, $overlay,
    showAlbum = function(slider){
        var $icon = $('<span class="icon">' + icon + '</span>');
        slider.$window
            .prepend($icon)
            .on('mouseenter mouseleave', function(e){
                $icon.toggle(e.type === 'mouseenter');
            })
            .on('click', function(){
                $album.show();
                $overlay.show();
            });
    },
    setupAlbum = function(slider){
        var t = '<div class="album-list">',
        j = 0, albms = [], thumbs = [];
        $overlay = $('<div class="overlay"></div>')
            .prependTo(slider.$window)
            .on('click', function(){ $album.hide(); });
        $.each(albums, function(i, v){
            j = 0;
            albms.push(i); // save album name
            $.each(v, function(i, a){
                // only get the first image of the album for the thumb 
                if (j++ === 0) { thumbs.push(a); }
            });
        });
        j = 0;
        $.each(albums, function(i, v){
            t += '<div class="album-thumbs" data-index="' + j + '"><img src="' + thumbs[j] + '"><span>' + albms[j++] + '</span></div>';
        });
        $album = $(t + '</div>').prependTo(slider.$window);
        $album.find('.album-thumbs').on('click', function(){
            currentAlbum = albms[ $(this).attr('data-index') ];
            setupSlider(currentAlbum);
            return false;
        });
    },
    setupSlider = function (album) {
        var img, t = '';
        $.each(albums[album], function (i, v) {
            t += '<img data-title="' + i + '" src="' + v + '">';
        });
        $overlay.hide();
        $album.hide();
        $slider
            .html(t)
            // update AnythingSlider
            .anythingSlider();
        // go back to the first slide
        $slider.data('AnythingSlider').gotoPage(1, false, null, -1);
    };
    // set up AnythingSlider
    sliderOptions.onInitialized = function(e, slider){
        showAlbum(slider);
        setupAlbum(slider);
    };
    sliderOptions.onSlideInit = function(e, slider){
        $overlay.hide();
        $album.hide();
    };
    sliderOptions.navigationFormatter = function(i, panel){
        return panel.attr('data-title');
    }
    $slider.anythingSlider(sliderOptions);
    setupSlider(currentAlbum);

});

[frontiercarlos]

Hi Mottie,

I realize it has been awhile but thanks for the above. I'm actually at a bit of a loss about how to install the above code in connection with the existing anythingslider. It appears that the content for each slide in your example code above is encoded in the js file (e.g. the slide images for the 3 different slide shows.). Whereas I'm used to adding slides in the form of unordered lists in the html coding. Am I missing something? I guess the fundamental question is how do I integrate the above code with an existing slider? Thanks.

[Mottie]

Hi @frontiercarlos!

Well, lets say your slider looks like this now:

<ul id="slider1">
    <li><img src="some-image-1.jpg"></li>
    <li><img src="some-image-2.jpg"></li>
    <li><img src="some-image-3.jpg"></li>
</ul>

<ul id="slider2">
    <li><img src="some-image-4.jpg"></li>
    <li><img src="some-image-5.jpg"></li>
    <li><img src="some-image-6.jpg"></li>
</ul>

Instead of have two unordered lists, the album code above is set up to only require one div

<div id="slider"></div>

within which the slider is built. And when switching albums, it replaces the HTML to build the selected slider.

In order to do that, add the image src (url) to the album array, something like this:

albums = {
    "Album1": {
        "img1" : "some-image-1.jpg",
        "img2" : "some-image-2.jpg",
        "img3" : "some-image-3.jpg"
    },
    "Ablum2": {
        "img1" : "some-image-4.jpg",
        "img2" : "some-image-5.jpg",
        "img3" : "some-image-6.jpg"
    }
}

By the way, I just updated the code above, and the demo to use the left side of that key: value pair (e.g. "img1") as the navigation tab name.

If you get stuck, please email me (gmail account; user wowmotty) the code you are having issues with and I will try to help you further.

[frontiercarlos]

Hi Mottie, what if the content of my slides isn't simply an image, but rather a combination of image and html content? Here is an example of a current slide:

<li class="panel1">
<div class="textSlide">
<img style="float:left; margin:0px 10px 0px 0px;" src="underground-gold-mine.jpg" alt="Underground Gold Mine Tunnels" title="Underground Gold Mine Tunnels" width="445px" height="315px">
<div class="slide_text">
<h3 style="padding:2px">Slideshow | World's Top 10 Gold Deposits</h3>
<h4 style="padding:2px">June 2013 | Gold Miners Newsletter Service</h4>
<p style="font:18px/22px georgia, serif;">This month's slideshow presents the world's Top 10 <span style="text-decoration:underline"><i>producing</i></span> Gold Mines. Compiling them was not easy because there are a few ways we can rank them. They can be ranked by annual <b>production</b>, or by the size of proven and probable <b>reserves</b>, or more generally by their measured, indicated & inferred <b>resources</b> (which include reserves). We ultimately decided to rank them based on the overall size of gold <b>resources</b> to give the viewer a truer sense of the deposits size and potential. Please enjoy our Top 10 List as we begin with the smallest and work our way to Number #1.</p>
</div>
</div>
</li>

[frontiercarlos]

You can visit my homepage where two anythingsliders are deployed using slides with a mix of images and html.

http://goldminersreport.com/#&panel1-7&panel2-1&panel3-2

[Mottie]

Ok, try this revision that allows you to put HTML into the album object (demo):

$(function(){

    var currentAlbum = "Animals",
    albums = {
        "Animals": {
            "Kitty" : "<li><img src='http://placekitten.com/400/300'></li>",
            "Bear"  : "<li><img src='http://placebear.com/400/300'></li>",
            "Dog"   : "<li><img src='http://placedog.com/400/300'></li>"
        },
        "Plain": {
            "Grey"  : "<li><img src='http://placehold.it/400x300'></li>",
            "Red"   : "<li><img src='http://dummyimage.com/400x300/f00/fff'></li>",
            "Bacon" : "<li><img src='http://baconmockup.com/400/300'></li>"
        },
        "Celebs": {
            "Murray"  : "<li><img src='http://www.fillmurray.com/400/300'></li>",
            "Murray2" : "<li><img src='http://fillmurray.com/g/400/300'></li>",
            "Ice"     : "<li><img src='http://nicenicejpg.com/400/300'></li>",
            "Cage"    : "<li><img src='http://www.placecage.com/g/400/300'></li>",
            "Sheen"   : "<li><img src='http://placesheen.com/400/300'></li>"
        }
    },
    $slider = $('#slider'),
    sliderOptions = {
        /* add your AnythingSlider options here */
    },
    icon = '&#8801;', // album icon
    $album, $overlay,
    showAlbum = function(slider){
        var $icon = $('<span class="icon">' + icon + '</span>');
        slider.$window
        .prepend($icon)
        .on('mouseenter mouseleave', function(e){
            $icon.toggle(e.type === 'mouseenter');
        })
        .on('click', function(){
            $album.show();
            $overlay.show();
        });
    },
    setupAlbum = function(slider){
        var t = '<div class="album-list">',
        j = 0, albms = [], thumbs = [];
        $overlay = $('<div class="overlay"></div>')
        .prependTo(slider.$window)
        .on('click', function(){ $album.hide(); });
        $.each(albums, function(i, v){
            j = 0;
            albms.push(i); // save album name
            $.each(v, function(i, a){
                // only get the first image of the album for the thumb
                if (j++ === 0) { thumbs.push(a); }
            });
        });
        j = 0;
        $.each(albums, function(i, v){
            t += '<div class="album-thumbs" data-index="' + j + '"><img src="' + thumbs[j] + '"><span>' + albms[j++] + '</span></div>';
        });
        $album = $(t + '</div>').prependTo(slider.$window);
        $album.find('.album-thumbs').on('click', function(){
            currentAlbum = albms[ $(this).attr('data-index') ];
            setupSlider(currentAlbum);
            return false;
        });
    },
    setupSlider = function (album) {
        $slider.empty();
        $.each(albums[album], function (i, v) {
            $(v).attr('data-title', i).appendTo($slider);
        });
        $overlay.hide();
        $album.hide();
        // update AnythingSlider
        $slider.anythingSlider();
        // go back to the first slide
        $slider.data('AnythingSlider').gotoPage(1, false, null, -1);
    };
    // set up AnythingSlider
    sliderOptions.onInitialized = function(e, slider){
        showAlbum(slider);
        setupAlbum(slider);
    };
    sliderOptions.onSlideInit = function(e, slider){
        $overlay.hide();
        $album.hide();
    };
    sliderOptions.navigationFormatter = function(i, panel){
        return panel.attr('data-title');
    }
    $slider.anythingSlider(sliderOptions);
    setupSlider(currentAlbum);

});

[Velynna]

I'm using this on my portfolio site, and I love it (albums are definitely handy). I was wondering, though, if there was a way for the .icon to also close the albums? Clicking a nav button closes it, but it's not as intuitive. Is there also a way to change the look and size? I tried playing with it in css, but wasn't coming up with what I wanted (getting rid of the three little lines, changing the dimensions, etc.). Sorry, I don't know anything about Java ;;>.> .

For reference: www.twosirensdesigns.com/#portfolio

[Mottie]

Hi @Velynna!

I had to make a few changes to the demo

Only the change the showAlbum & setupAlbum functions were updated:

showAlbum = function(slider){
    var $icon = $('<span class="icon">' + icon + '</span>');
    slider.$window
        .prepend($icon)
        .on('mouseenter mouseleave', function(e){
            $icon.toggle(e.type === 'mouseenter');
        });
    // Changed HERE
    $icon.on('click', function(){
        $album.show();
        $overlay.show();
    });
},
setupAlbum = function(slider){
    var t = '<div class="album-list">',
        j = 0, albms = [], thumbs = [],
    $overlay = $('<div class="overlay"></div>')
        .prependTo(slider.$window);
    // REMOVE .on('click', function(){ $album.hide(); });
    $.each(albums, function(i, v){
        j = 0;
        albms.push(i); // save album name
        $.each(v, function(i, a){
            // only get the first image of the album for the thumb
            if (j++ === 0) { thumbs.push(a); }
        });
    });
    j = 0;
    $.each(albums, function(i, v){
        t += '<div class="album-thumbs" data-index="' + j + '"><img src="' + thumbs[j] + '"><span>' + albms[j++] + '</span></div>';
    });
    $album = $(t + '</div>').prependTo(slider.$window);
    $album.find('.album-thumbs').on('click', function(){
        currentAlbum = albms[ $(this).attr('data-index') ];
        setupSlider(currentAlbum);
        return false;
    });
    // NEW CODE
    $('.album-list, .overlay').on('click', function(){
        $overlay.hide();
        $album.hide();
    });
},

With the above changes, you can click on the overlay to close it.

[Velynna]

Rob,

Thank you so much! Works beautifully!