Hi everyone,
This is my first post, so please forgive me if this question has been asked a million times. I'm a self professed jQuery hack and I need a little guidance on taking this script I found and adapting it to my needs.
Anyway, what I'm making is an image slide show with navigation. The script I found does this, but does not automatically cycle through the images. I'm using jQuery 1.3.2 and would rather stick with that than using the newer library. I would also prefer to edit what is already here rather than start from scratch.
Anywho, here's the html:
<div id="myslide">
<div class="
cover">
<div class="mystuff">
<img alt=" " src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/current_Denver-skyline.jpg" />
</div>
<div class="mystuff">
<img alt=" " src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/pepsi_center-IS42RF-0D111C.jpg" />
</div>
<div class="mystuff">
<img alt=" " src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/columbine-2689820469_D1104.jpg" />
</div>
<div class="mystuff">
<img alt=" " src="http://www.mfhc.com/wp/wp-content/uploads/2010/05/ist2_10460354-RedRocks.jpg" />
</div>
</div> <!-- end of div
cover -->
</div> <!-- end of div myslide -->
And here's the jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .
cover').css({left:-820*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div #mystuff (here 820) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
});
</script>
Here's where I got the script: http://www.webdeveloperjuice.com/2010/04/07/create-lightweight-jquery-fade-manual-slideshow/
Again, if this question is too basic for this site please let me know and possibly provide a reference link or two. Thanks a ton!
