A JavaScript slideshow!

January 16, 2:58 p.m. | download

I know it's been a while since I last posted, but I've been in the process of moving back up to Columbia after break. To make up for it, I'm taking step one in the very long process of open-sourcing this site. First off is a script I wrote to address a general annoyance I've had with JavaScript slideshow plugins. All of them seem to be way too complicated to just scroll through a set of images without user input. So, I wrote a script that just pages through images in an unordered list. Pretty simple JavaScript (only 30ish lines), but, with my recent advice to people to use jQuery instead of Flash for this type of thing, it's one less thing you'll have to code in an unfamilliar language.

 

Here's the .zip file with the script, jQuery 1.4 and an example HTML file: quickSlide.zip

 

How to use it: Basically, all you need to do is, in your <body> tag, just make an unordered list (<ul>) with <li>s of the class 'slideshow' with your images. So, it looks something like this:

 

<ul style='list-style: none;'>

<li class='slideshow'><img src='wherever_your_first_image_is.jpg'></li>

<li class='slideshow'><img src='wherever_your_second_image_is.jpg'></li>

</ul>

 

Your <head> should link to the jQuery library and quickSlide. So, that part looks like this:

 

<script type="text/JavaScript" src="jQuery-1.4.min.js"></script>

<script type="text/JavaScript" src="quickSlide.js"></script>

 

Also, you should include:

 

<script>

$(document).ready(function(){

quickSlide();

});

</script>

 

In your <head> as well.

 

 

To change the interval between slides, add 'slideSettings.length = (whatever you want this to be)' to your $(document).ready function. Default is 5000 (five seconds).

 

That's it! Like I said, there's a demo.html file in the zip that should show this in practice if you don't understand anything. I'm currently using this for the photos slideshow on the right side of the page. As always, let me know if something doesn't work.



Comments - Twitter