jQuery Cycle Plugin - Adding Image Links

The jQuery cycle plugin is pretty freakin' awesome, but I couldn't figure out how to put a link behind each image. Sure there is a tutorial, but the images refused to show up no matter how much CSS tweaking I applied.

So I came up with a quick and dirty solution that uses jQuery to handle the click event for each image in the slideshow.

First the markup for the slideshow images:

<div id="slideshow">
  <img src="'banner1.jpg" alt="" rel="/" />
  <img src="'banner2.jpg" alt="" rel="/collections/skincare" />
  <img src="'banner3.jpg" alt="" rel="/collections/men" />
  <img src="'banner4.jpg" alt="" rel="/collections/men" />
  <img src="'banner5.jpg" alt="" rel="/products/the-ultimate-guide-to-beauty-by-anjana-gosai" />
</div>

It is basically the same as what you normally use, but each image has an additional "rel" attribute with the location to link to.

Now the javascript:

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery('#slideshow').cycle({fx: 'fade', timeout:5000, speed:1000});
    jQuery('#slideshow img').click(function (){
      document.location.href = jQuery(this).attr('rel');
    }).css('cursor', 'pointer');
  });
</script>


I am adding a click handler to each <img> element in the slideshow div, and using whatever is specified in the rel attribute as the location to go to. Finally, I make the cursor a pointer for each image so the user knows it is click-able.

You can see it in action here.

Comments

[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 :-)