The slideshow script that anyone can use.
jSlide is a lightweight script that displays image slideshows directly on your existing web page with virtually no assembly required.
- Easy to install
jSlide is installed with one simple file—
jslide.js—and just one line to add to the
<head>tag of your page. There are no directories or tiny images to upload.
- Clean display, unobtrusive transitions
Slides fill the window and cannot be scrolled out of view. There's no waiting for long or distracting animations. Captions fade in with images. During a slideshow, the timer is restarted when the image changes, so manually browsing pictures during a slideshow works seamlessly.
- Supports captions and multiple image sets
- Direct links to images
Copy the URL in the address bar at any time—it will point to the current image in the slideshow.
- Slideshow with keyboard controls
Use the arrow keys to move between images, space to play/pause, and Esc to close.
- Smart, efficient image preloading
Images are preloaded using CSS in the direction in which a user is viewing an image set. You can customize how far ahead images are preloaded.
- Fully customizable
Easily turn on/off nearly any feature, and set everything from slide duration and animation speed to colors and the text on buttons.
- Works on all web pages
The script does not conflict with other scripts, and automatically uses HTML
ids that do not exist in your web page.
- Graceful degradation
|v0.9.1||2/28/12||Added option to start slideshow automatically when launch button is clicked|
jSlide requires jQuery to run. If you don't already have jQuery on your page, include the following line in the
jSlide has been tested to work with jQuery 1.7.1.
Include the following line in the
<head>tag of your page, after jQuery has been included:
srcattribute so that it points to the file you downloaded above.
rel="jslide"to link tags on your page to activate jSlide:
<a href="image1.jpg" rel="jslide" >image #1</a> <!-- image1.jpg will be displayed when "image #1" is clicked -->
To use a thumbnail image:
<a href="image1.jpg" rel="jslide" ><img src="thumb1.jpg" /></a> <-- image1.jpg will be displayed when thumb1.jpg is clicked. -->
Both the attribute (can be something other than
rel) and the content of the attribute (can be something other than
jslide) can be customized in
titleattribute to set captions, or a
captionattribute if you don't want the captions to appear as tooltips when you hover over the link.
<a href="image1.jpg" title="description of picture" rel="jslide" >image #1</a> <!-- "description of picture" will appear in the slideshow as the caption for this image. -->
If you have a group of images that you want to be part of the same slideshow, add square brackets in the
relattribute with a group name:
<a href="image1.jpg" rel="jslide[concert]" >image #1</a>
<a href="image2.jpg" rel="jslide[concert]" >image #2</a>
<a href="image3.jpg" rel="jslide[concert]" >image #3</a>
You can use any combination and number of single images and groups.
Use a link without a
hrefattribute to open the first image.
<a rel="jslide[concert]" >Start Slide Show</a>
You can customize whether to automatically start playing the slideshow when this link is clicked.
jslide.js, along with specific instructions on how to change settings. The following are just some of the features that can be customized:
These settings can be switched on or off.
- Whether clicking an image moves to next slide
- Whether the arrow keys can be used to move between images
- Whether the Esc button exits slide view
- Whether the spacebar toggles a slideshow
- Whether the page automatically scrolls to the thumbnail/link of the last viewed slide when exiting slide view
- Whether timed slideshows are enabled
- Whether an animated progress bar appears next to the Play/Pause button during a slideshow
- Whether captions are shown above the image, below the image, or not at all
- Whether the address bar changes while viewing images (allowing direct links to specific images)
- Whether small images are stretched to fill the entire screen.
- Whether clicking blank space around the image closes slide view.
- Whether clicking directly on a single image or the last image in a set closes slide view
- Whether the slideshow loops around while viewing image sets and during slideshows
- Time it takes images to fade in
- Time spent on each image in timed slideshows
- How far ahead images are preloaded during slideshows
- Help using the script
- Bug reports
- Comments and suggestions
Alternatively, you can email me at email@example.com
Enjoy! — Cooper Labinger