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



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

The comments to this entry are closed.