« 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.
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.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been saved. Comments are moderated and will not appear until approved by the author. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Comments are moderated, and will not appear until the author has approved them.