jQuery Image Slideshow
jQuery Image Slideshow
Heya there,
I have a slight problem...I have coded a simple jQuery image gallery, but the thing is...I want to add some text as well in <p> tags. to go along the side of the image. I was just wondering how I would do this.
The jQuery for this is...
-
$(document).ready(function() {
var imgWrapper = $('.slideshow > img');
// only show the first image, hide the rest
imgWrapper.hide().filter(':first').show();
$('ul.recentlist li a').click(function () {
if (this.className.indexOf('current') == -1){
imgWrapper.hide();
imgWrapper.filter(this.hash).fadeIn(500);
$('ul.recentlist li a').removeClass('current');
$(this).addClass('current');
}
return false;
});
});
The html for this is...
-
<div class="slideshow" style='margin: auto; clear: both; margin-top: 90px;'>
<ul class="recentlist">
<li><a class="current" href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
</ul>
<img id="slide1" src="http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/example/slide-1.gif" alt="Image 1 slideshow" />
<img id="slide2" src="http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/example/slide-2.gif" alt="Image 2 slideshow" />
<img id="slide3" src="http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/example/slide-3.gif" alt="Image 3 slideshow" />
</div>
If anyone could help out that would be great, thanks in advance.