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

2009.10.03

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c9edc53ef0120a5b99312970b

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

Comments

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.
BBG
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 :-)
PepuaPC
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
Justin
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.
Mark
Sweet hack man.. thanks!
marcelo
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.
markov
#slideshow a { display: block; } CSS solution.
Dan
Genius!
guillaume
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
jack
Thanks. This was my last resort since allowPagerClickBubble was not working for me.
Fer
Thanks!!
Jorge
Is There a way to put tag "target" into my href?
michael
It was a z-index issue! Fixed
tommy
quite useful thanks!
Merry
Is it possible to have these images pulled up form the flickr account and give link for each image?
jonathan
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.noConflict();
  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>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow1').cycle({
		fx: 'fade', random:  1  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
			});
	});
</script>
Gavin
@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.