Question

I am rendering with php some amount of images, but also i render the a href="" – the images area changing when they are fading, but the url are the same.

How can I change the url and the image together?

JQuery Cycle

Answer 1

The jquery Cycle plugin can cycle any any elment. So the easy way to do this is to just wrap each image with a hyperlink:

http://jsfiddle.net/lucuma/MV9S5/

<div id="slideshow">
  <a href="/page/a"><img src="img1.jpg" /></a>
  <a href="/page/b"><img src="img2.jpg" /></a>
  <a href="/page/c"><img src="img3.jpg" /></a>
</div>

$('#slideshow').cycle();

Additionally you can use your slide attributes if perhaps you have a title you want updated that is outside of the sliders. You’d use the after event. The following code updates the h1‘s hyperlink after each slide changes. It sets the text to be the title of the img on the slide. Because my images are wrapped in a hyperlink, I need this line var $cur = $('img', currSlideElement) to get to the img element of the slide.

Demo: http://jsfiddle.net/lucuma/dsK9S/2/

<h1 id="title"><a href="#"></a></h1>
<div id="slideshow">
  <a href="/page/a"><img src="img1.jpg" /></a>
  <a href="/page/b"><img src="img2.jpg" /></a>
  <a href="/page/c"><img src="img3.jpg" /></a>
</div>
$('#slideshow').cycle({
    after:function(currSlideElement, nextSlideElement, options, forwardFlag) {
        var $cur = $('img',currSlideElement);
        $('#title a').text($cur.attr('title'));
       $('#title a').attr('href',$cur.attr('src')).text();
    }
});
​