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

[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 [email protected] 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.

[Elizabeth Harms]

I am very new to jquery and can't figure out where to put this or how to customize it for my purposes. Below is the code that I have so far. Help! :)   function GetAllImages() { $("#slideshowPicturePlaceholder").css("display", "block"); var soapEnv = ""; soapEnv += "SlideShow"; soapEnv += ""; soapEnv += ""; soapEnv += ""; var port = window.location.port; if (port.length <= 0) port = ""; else port = ":"+port; var webservice = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/_vti_bin/lists.asmx"; $.ajax({ url: webservice, type: "POST", dataType: "xml", data: soapEnv, complete: processQueryResults, contentType: "text/xml; charset=utf-8", error: function(xhr) { alert('Error! Status = ' + xhr.status);} }); } function processQueryResults(xData, status) { var port = window.location.port; if (port.length <= 0) port = ""; else port = ":"+port; var imageURL = window.location.protocol+"SlideShow/"; var itemURL = window.location.protocol+"SlideShow/"; $("#slideshowContentArea").html("") $(xData.responseXML).find("z\\:row").each(function() { var title = $(this).attr("ows_Title"); var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1); var itemLink = itemURL+$(this).attr("ows_Name"); var liHtml = "

"+ "" + "

" ; $("#slideshowContentArea").append(liHtml); }); $("#slideshowPicturePlaceholder").css("display", "none"); $("#slideshowContentArea").css("display", "block"); $('#slideshowContentArea').cycle({ fx: 'fade', random: 1, pause: 1, timeout: 4000, delay: -2000 }); } GetAllImages();

[Elizabeth Harms]

Oops. I guess I can't just copy and post the item here, so I'm not sure how to go about this.