« I'll see your Groovy and raise you a Python (and Ruby, PHP for good measure) | Main | Giving the Benefit of the Doubt »



TrackBack URL for this entry:

Listed below are links to weblogs that reference jQuery Cycle Plugin - Adding Image Links:


Feed You can follow this conversation by subscribing to the comment feed for this post.

Erick Dovale
Gavin, Every first level element inside the div will become a item in the slide show. So if you do something like: <div id="slideshow"> <a href="/"> <img src="'banner1.jpg" alt=""/> </a> </div> It should work. What a coincidence; just this week I had to use this plugin and I agree 100% with you it is freaking awesome!!! cheers.
Well, yes. That was the first thing I tried. The problem was the a tag needs to be styled so that it occupies the same size as the images. At least, that is what the tutorial suggests. Unfortunately, I couldn't figure it out before I lost patience with it and went for the hack instead :-)
Hi there! my jquery slideshow stopped working suddenly and I have no idea why because I didn't touch it lately. I don't now anything about javascript o html so please, can you check it up? I don't know where else to look for help. my blog is: http://pepua.blogspot.com/
Gercek Karakus
dude how do you write code in typepad? whenever I try writing code with < code> and < pre> tags, typepad converts them to inline codes :/ you can get in touch with me from gercekk@gmail.com thanks
THANK YOU. I've been racking my brain on how to do this for hours as simply adding an anchor around the images breaks the caption functionality. THANK YOU.
Sweet hack man.. thanks!
hi. how can i make this links works with jquery cycle plugin wordpress? what files i must edit? thanks!
Saudi Jobs
Thanks for sharing Cycle Plug in. keep it up.
#slideshow a { display: block; } CSS solution.
Gavin, just add "display block" , "height" and "with" to your a tag in the css and your a tag will be the size you want it to be
Thanks. This was my last resort since allowPagerClickBubble was not working for me.
Is There a way to put tag "target" into my href?
It was a z-index issue! Fixed
quite useful thanks!
Is it possible to have these images pulled up form the flickr account and give link for each image?
Can you post exactly what your z-index problem was?
Sam Lowry
The first instance of your code works great, but when I add a 2nd instance of the Cycle script (default code), it doesn't. Is there a trick?
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.slideshow2').cycle({fx: 'fade', random:  1, timeout:5000, speed:1000});
    jQuery('.slideshow2 img').click(function (){
      document.location.href = jQuery(this).attr('rel');
    }).css('cursor', 'pointer');

<script type="text/javascript">
$(document).ready(function() {
		fx: 'fade', random:  1  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
@Sam, Make the class generic e.g. ('.slideshow img') in your click handling function. @guillaume has the right approach though - add a display:block; height:200px; width:200px to your CSS and the slider will work as designed without having to use this hack.

The comments to this entry are closed.