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.

You may also be interested in the inline version.

Demo

Single Images

Thumb Thumb

Image Set

Start Slide Show »

Thumb Thumb Thumb Thumb Thumb

Features

  • 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

    Image sources and caption data are set in your HTML page—no need to edit long Javascript arrays.

  • 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 classes and ids that do not exist in your web page.

  • Graceful degradation

    If a user does not have Javascript, images will simply open on a new page. An elegant error message appears if a slide cannot be loaded.

Download

Only 1 file to download! Upload this Javascript file to your server:

jSlide v0.9.1 JS file, 15.2 KB

Click the above file to copy the text directly, or right-click and choose "Save Link As..."

Changelog

v0.9.12/28/12Added option to start slideshow automatically when launch button is clicked

Setup

  1. Include jQuery

    jSlide requires jQuery to run. If you don't already have jQuery on your page, include the following line in the <head> tag:

    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    jSlide has been tested to work with jQuery 1.7.1.

  2. Include jSlide

    Include the following line in the <head> tag of your page, after jQuery has been included:

    <script type="application/javascript" src="/jslide.js"></script>

    Modify the src attribute so that it points to the file you downloaded above.

  3. Activate jSlide

    Single Images

    Add 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 jslide.js.

    Captions

    Add a title attribute to set captions, or a caption attribute 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. -->

    Image Groups

    If you have a group of images that you want to be part of the same slideshow, add square brackets in the rel attribute 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.

    Launch Button

    Use a link without a href attribute 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.

  4. Customize

    A set of easily-editable Javascript variables can be found at the top of jslide.js, along with specific instructions on how to change settings. The following are just some of the features that can be customized:

    Features

    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

    Slideshow Settings

    • Time it takes images to fade in
    • Time spent on each image in timed slideshows
    • How far ahead images are preloaded during slideshows