CODEWITHSUNDEEP
jquery
dg.
dg.

Reputation: 127

jquery cycle: Goto Slide# using text link

http://procollage.com/site10

Please see this page I've been working on ALL DAY to just make the text:
• Blended Collage #1
• Bordered Collage
• Blended Collage #2
• Magic Mosaic
• Blended Collage #3

I would simply like when each is click for the slideshow to show the corresponding slide. I thought it would be simple, but 6 hours later, i'm still struggling. If the slideshow could continue after it's clicked that would be great... if not, i can live. PLEASE HELP!

Upvotes: 5

Views: 7351

Answers (3)

JAKEtheJAB
JAKEtheJAB

Reputation: 289

To answer your questions, here is the full context:

<html>
<head>
<script type="text/javascript">
  $(document).ready(function() {
    $('.samples').cycle({
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
  });

  function setSlide(index) {
    $('.samples').cycle(index);
  }
</script>
</head>
...
...
<a href="javascript:setSlide(0)">Blended Collage #1</a><br />
<a href="javascript:setSlide(1)">Bordered Collage</a>
...
...

Upvotes: 5

jay
jay

Reputation: 10325

Well since you're using the jQuery cycle plugin, you can use those links as pagers per the Intermediate demo here.

Something like this using your menu:

$('.samples').cycle({ 
    pager:  '.menu_table' 
});

Made a slight edit in regards to the element reference on the cycle plugin (I had copied from the cycle plugin website but now it's specific to your cycle element which is called .samples)

Upvotes: 2

JAKEtheJAB
JAKEtheJAB

Reputation: 289

Here is an example:

$('#goto2').click(function() {  
  $('#s1').cycle(1);  
  return false;
});

So for the first link on your page, it would be:

$('#s1 a:first').click(function() {  
  $('.samples').cycle(0);  
  return false;
});

Upvotes: 0

Related Questions