JQuery... Help Needed! for the Simple Slide-show

[pimpthatfood]

Hi there,

I just found about jQuery clickable slideshow. I would like to implemented into my food website but the thing really is that as I have no scripting knowledge I wanted to know if there is any step by step guide on using this jQuery Simple Slideshow

I am finding it hard without any help from you guys

BTW... I am using squarespace and javascript & flash is allowed to be used in here.

Thanks

[Fumigator]

You may need to hire someone to get 'er done...

[pimpthatfood]

I have managed to put the slide show up.... but the thing is that I need to link up the urls of the photos so when they clicked the user will be transferred to the section chosen.

How can I do that?

[Fumigator]

An anchor tag usually does the trick.

Really though, post your code if you want help with it.

[pimpthatfood]

Here's the code

<p>&nbsp;</p>
<div id="slideshow"><img class="active" src="http://www.pimpthatfood.com/storage/image_1.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/Image_2.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/image_3.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/Image_4.JPG" alt="" /></div>
<p>&nbsp;</p>

thanks for your help

[Fumigator]

I assume you've got some jquery/javascript code too?

[pimpthatfood]

this is the coding

<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>

#slideshow {
position:relative;
height:350px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}

#slideshow IMG.active {
z-index:10;
}

#slideshow IMG.last-active {
z-index:9;
}

function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();

$next.addClass('active');

$active.removeClass('active');
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});


Here is the link I brought this http://jonraasch.com/blog/a-simple-jquery-slideshow