Slideshow Tools using JavaScript Frameworks
Javascript frameworks such as JQuery are used to create applications that can in turn be used in web sites. Image slideshows are one popular type of application. There are many frameworks available - a Wikipedia article comparing frameworks lists 22 of them - but the slideshow tools we look at use JQuery
There are many JQuery-based slideshows available. Some are described in a blog post 20 of the Best jQuery Slideshow Plugins at Vandelay Design.
Slideshows vary in features and in how easy they are to install and use.
To choose one, look at a number of examples and decide which ones provide the features you need.
Some slideshows are overlaid on the page, others are embedded.
Lightbox
Lightbox is an example of the first type. Lightbox is very easy to setup. You can see it in use on the CS department web site.
Lightbox also has limitations. In particular, it does not support image resizing or automatic slide changing, both of which are very popular features.
Setting up Lightbox
These notes are based on earlier version of Lightbox. For newer instructions, please refer to this link.
Please pay special attention to Javascirpt library used and the position of it.
To use lightbox, download Lightbox and unzip Lightbox distribution files.
The distribution creates three folders and a solo file:
- Folder named css, containing a single file lightbox.css
- Folder named images, containing navigational images used with slides (previous , next, etc.)
- Folder names js, containing several javascript files.
- File lightbox.html
How to use (from Lightbox web site)
Step 1:
Lightbox 2 uses the jQuery framework. Load jQuery and the Lightbox javascript files in the proper order.
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script>
Include Lightbox style file.
<link href="css/lightbox.css" rel="stylesheet" />
Step 2:
Add a rel="lightbox" attribute to any link tag to activate Lightbox.
<a href="images/image-1.jpg" rel="lightbox" title="my caption"<image #1</a>
Optional: Use the title attribute if you want to show a caption. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
No limits to the number of image sets per page or how many images are allowed in each set.
Warning - file names of the images should NOT contain punctuation symbols or blanks, just the usual letters, digits, and underscores.
Example 1: A single image, with thumbnail
<!DOCTYPE html> <html> <head> <title>Example 1 </title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/jquery-1.7.2.min.js type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head> <body> <h1>Lightbox example</h1> <p> <a href="photos/image-1.jpg" rel="lightbox" title="Food 1"> <img src="photos/thumb-1.jpg" alt="" /> </a> </>/> </body> </html>
The link to the example 1.
- The value of the rel attribute is used to specify that this is for use by Lightbox.
- Captions are created by the title attribute.
Example 2: A slideshow with multiple images use text link
- In this example, the slideshow is activated by a text link. It could also be a button or a thumbnail.
- It always starts from the first slide because that is the link the user sees.
- A group of images is defined by adding [groupname]in the rel attribute. Notice the square brackets in the source code.
- The order in which the images are listed is the order in which they will be shown.
The source code for the example
<!DOCTYPE html>
<html>
<head>
<title>Example 2 </title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<h1>Lightbox example 2</h1>
<div>
<a href="photos/image-1.jpg" rel="lightbox[Stuff]" title="Food 1">
<span style="font-size: 1.5em; color: red">See Slideshow</span></a>
<a href="photos/image-2.jpg" rel="lightbox[Stuff]" title="Food 2"></a>
<a href="photos/image-3.jpg" rel="lightbox[Stuff]" title="Flower"></a>
<a href="photos/image-4.jpg" rel="lightbox[Stuff]" title="Fountain"></a>
<a href="photos/image-5.jpg" rel="lightbox[Stuff]" title="Fall Leave"></a>
</div>
</body>
</html>
The link to the example 2.
Example 3: A slideshow with multiple images, image as link.
In this example, the slideshow is activated by a thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>Example 3 </title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<h1>Lightbox example 3</h1>
<div>
<a href="photos/image-1.jpg" rel="lightbox[Stuff]" title="Food 1">
<img src="photos/thumb-1.jpg" alt="" ></a>
<a href="photos/image-2.jpg" rel="lightbox[Stuff]" title="Food 2"></a>
<a href="photos/image-3.jpg" rel="lightbox[Stuff]" title="Flower"></a>
<a href="photos/image-4.jpg" rel="lightbox[Stuff]" title="Fountain"></a>
<a href="photos/image-5.jpg" rel="lightbox[Stuff]" title="Fall Leave"></a>
</div>
</body>
</html>
The link to the example 3.
In this example, the slideshow can be activitated by any thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>Example 4 </title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<h1>Lightbox example 4</h1>
<div>
<a href="photos/image-1.jpg" rel="lightbox[Stuff]" title="Food 1">
<img src="photos/thumb-1.jpg" alt="" ></a>
<a href="photos/image-2.jpg" rel="lightbox[Stuff]" title="Food 2">
<img src="photos/thumb-2.jpg" alt="" ></a></a>
<a href="photos/image-3.jpg" rel="lightbox[Stuff]" title="Flower">
<img src="photos/thumb-3.jpg" alt="" ></a></a>
<a href="photos/image-4.jpg" rel="lightbox[Stuff]" title="Fountain">
<img src="photos/thumb-4.jpg" alt="" ></a></a>
<a href="photos/image-5.jpg" rel="lightbox[Stuff]" title="Fall Leave">
<img src="photos/thumb-5.jpg" alt="" ></a></a>
</div>
</body>
</html>
The link to the example 4.