CODEWITHSUNDEEP
jqueryhtmlcsscycle2
ghp1968
ghp1968

Reputation: 61

Cycle2 external Links

* UPDATE *

I have the same issue... I have a banner with images going from left to right - (Cycle2) I was hoping to add a href infront of each of the 3 seperate images, which when clicked go to seperate URL's... So... 3 different href's to 3 different banner images. *** I tried an answer I was given on here, under a sperate post, but I cannot add a 3 different links...

Kind regards Gary

If I change the http://google.com to the link I want, it does not work.

Ideally the link is...

https://yplanapp.com/bristol/funk-up-your-good-friday-46369/checkout?utm_content=ticket_iframe&utm_source=a-partner-id&utm_medium=backlink&number=2&selected=/api/app/event/432246/

Thanks

Good afternoon,

I am using cycle2 for a banner for a friends site that I am building.

They have asked if it is possible to add a link to an external site on one of the banner images as it passes by and pauses, so the user can click on it.

I have looked on the cycle2 website and cannot locate any advice on this subject.

I hope this is okay.

Kind regards

Upvotes: 1

Views: 76

Answers (1)

Larry Lane
Larry Lane

Reputation: 2191

You can use the following code(Live Preview http://codepen.io/larryjoelane/pen/KVGJMp):

Place the code in a javascript file and load it after you have loaded jquery and cycle2 JavaScript Files.

Example(Place this right before your closing </body> tag in your html file:

<!--Script Tags-->
<script src="pathtoyourjqueryfile"></script>
<script src="pathtoyourcycle2file"></script>

<!--place the code I provided in here-->
<script src="pathtoyouraddedjavascript"></script>

The order is important because you will need to load jQuery first. Then load the cycle2 plugin and then finally load the code I provided.

JQuery:

//array of links for each slide
 var links = [

  "http://google.com",
  "http://google.com",
  "http://google.com",
  "http://google.com",

];

$(document).on("click",".cycle-slideshow img",function(){

  //store the index(1 is subtracted because arrays begin with 0)
  //and index will return 1,2,3,4 etc.
  var index = $(this).index() - 1; 

  //navigate to the link
  window.location = links[index];

  });

Upvotes: 0

Related Questions