Cycle: Start the slideshow from the thumbnail image clicked on

Cycle: Start the slideshow from the thumbnail image clicked on

I' have a masonry thumbnail gallery, and the thumbnails link to a jQuery Cycle slideshow. Originally, whatever thumbnail you click on the slideshow starts with the first slide. 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 "startingSlide" option of Cycle. Also, the site is built with Wordpress. 

This is in my thumbnail gallery template: 

  2. <div class="m_item">
  3. <a href="http://paraboladesignstudio.ipage.com/yahaira/fashion/fashion-slideshow/?thumb=1">
  4. <img src="<?php echo $image['url'];?>" title="<?php echo $image['title'];?>" alt="<?php echo $image['alt']; ?>">
  5. </a>
  6. </div>
And this in my slideshow template:

  1. <ul class="slideshow">
  3.     <?php 
  4.         $thumb = $_GET["thumb"];

  6.         $firstImage = $images[$thumb-1];
  7.         //echo first image here

  9.         for($i = 0; $i < count($images); $i++): 

  11.         if($i == ($thumb-1)) continue;
  12.         $image = $images[$i];
  13.     ?>
  14. <li>
  15. <table>
  16. <tr>
  17. <td>
  18. <div class="slideshow_image" data-startingslide="<?php echo $thumb; ?>"><img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']; ?>"></div>
  19. </td>
  20. </tr>
  21. </table>
  22. </li>
  23. <?php endfor; ?>
  24. </ul>
And this in my javascript file:

  1. var startingSlide = $('.slideshow_image').data('startingslide');
  3. $(slideshowContainer).cycle ({
  4. fx: slideshowFx,
  5. delay: slideshowDelay,
  6. speed: slideshowSpeed,
  7. timeout: slideshowTimeout,
  8. containerResize: 0,
  9.         startingSlide: startingSlide,
  10. fit: 0,
  11. slideResize: 0,
  12. height: _h,
  13. width: _w,
  14. cleartype: true,
  15. cleartypeNoBg: true,
  16. next: slideshowNextBtn,
  17. prev: slideshowPrevBtn,
  18. before: function(curr, next, opts) {
  19. $(slideshowShareLink).removeClass('sel');
  20. $(slideshowShareContainer).css({'visibility':'hidden'});
  21. preLoadImage(opts.currSlide, opts.slideCount);
  22. $('.slideshow_title').html($(next).data('title'));
  23. },
  24. after: function(curr,next,opts) {
  25. onAfter(curr,next,opts);
  26. }
  27. });