jQuery Cycle Slideshow Startingslide

Question

I' have a masonry thumbnail gallery, and the thumbnails link to a jQuery Cycle slideshow. I'd like to make it so when you click on a thumbnail, it goes to the slideshow starting with that thumbnail image. I'm trying "startinslide" option of Cycle. Also, the site is built with Wordpress.

This is in my thumbnail gallery template:

        <div class="m_item">
        <a href="http://paraboladesignstudio.ipage.com/yahaira/fashion/fashion-slideshow/?thumb=2">
            <img src="<?php echo $image['url'];?>" title="<?php echo $image['title'];?>" alt="<?php echo $image['alt']; ?>">
        </a>
        </div>  

And this in my slideshow template:

<script>
$(.slideshow).cycle({startingSlide: <?php echo $_GET["thumb"] ?>})
</script>

Currently, the code doesn't seem to do anything, and whatever thumbnail you click on the slideshow starts with the first slide.

I'd appreciate your help.

Answer 1

The easiest solution would be to use Cycle2. It allows you to declare the slideshow options in data attributes on the slide element in your html. Your slideshow markup would look something like the following:

<div class="cycle-slideshow"
    data-cycle-starting-slide="<?php echo $_GET["thumb"] ?>"
    data-cycle-timeout="5000">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" />
</div>

Keep in mind that the slide index begins at zero so may need to adjust your count accordingly. Here's a fiddle: http://jsfiddle.net/6LAAJ/

Also make sure that you escape the output of your GET variable to guard against XSS attacks. I'd probably drop the the use of the GET variable and use the window location hash instead. See the bookmarkable slides demo and here's some example code:

<a href="/slideshow/#slide-3">Link to slide 3</a>

<div class="cycle-slideshow">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" data-cycle-hash="slide-1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" data-cycle-hash="slide-2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" data-cycle-hash="slide-3" />
</div>

If you have to use the original Cycle plugin instead of Cycle 2 here's the JavaScript for setting up permalinks using the window location hash:

$(function() {
var index = 0, hash = window.location.hash;
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1; // slides are zero-based
}

$('#slideshow').cycle({
    startingSlide: index,
    timeout: 3000,
    after: function(curr,next,opts) {
        window.location.hash = opts.currSlide + 1;
    }
});

});

And a demo on the Cycle website.