jQuery Slide Show Fading Content by Clicks
Previously I wrote a script which would allow a user to click a piece of text, and it would fadeout the content and fade in a new piece of content. This script expands on the previous one. It was inspired by a comment a user had left me.
The commenter wanted a script where by he had multiple ’slides’ of content, and when a user clicked on one of the slides, it would fade out the current slide and fade in a new slide. I wrote a brief script to try and help him. However i felt that other people may want a similar script.
So now i have created a more SEO friendly script, which is alot more dynamic and allows for easy manipulating of content. As well as the features above, it will allow the user with javascript turned off to see all the content.
I’ve created an example file located here, where you can download and view the code. The example given, shows slides from a presentation i gave last year.
About the Code
Now i’m going to tell you a bit about the code, and how you modify it to your needs. If you view the source of the document, and look at the actual html (located towards the bottom of the document). You will notice, Each slide is wrapped in a div element.
Each div is given an incremental id e.g. page_1, page_2 etc, this allows the slideshow to find which ’slide’ is next. As well as the incremental id’s each slide is of class page and box. The box in this example, is purely used for CSS/visual purposes, and can be removed. However each slide must be of class page, this allows the script to detect which divs are slides and what are not.
You can put anything between the opening and closing tags of the page divs, and it shall be displayed on the slide. I’ve just used images, and text, to help highlight some of the possible uses.
Once you reach the end of your slideshow, an alert is shown, this is just to let you know there are no more slides, you may remove this line of code and replace it with what ever you wish.
Photo by Marcus Hansson
Tags: change content, click, DOM, Effect, fadeIn, fadeOut, function, javascript, jquery, show, slide, slideshow, transition, web development
Once this reaches the end of the slideshow, I’d like to repeat it…How do I make that happen?
Any help would be VERY much appreciated!
April 3rd, 2009 at 7:27 pm