// lightbox-ex5.js
// Sample JavaScript solution code for Lab 5: Lightbox
// (Partial solution through Exercise 5.)
// INFO 343, Autumn 2012
// Morgan Doocy
// List of image filenames and captions to display in the gallery.
var IMAGES = [
{ file: 'http://info343.ischool.uw.edu/labs/5/avocado.jpg', caption: 'Avocado' },
{ file: 'http://info343.ischool.uw.edu/labs/5/beach.jpg', caption: 'Beach' },
{ file: 'http://info343.ischool.uw.edu/labs/5/biebs.jpg', caption: 'Biebs' },
{ file: 'http://info343.ischool.uw.edu/labs/5/bling.jpg', caption: 'Bling' },
{ file: 'http://info343.ischool.uw.edu/labs/5/cat.jpg', caption: 'Cat' },
{ file: 'http://info343.ischool.uw.edu/labs/5/dew.jpg', caption: 'Dew' },
{ file: 'http://info343.ischool.uw.edu/labs/5/fall.jpg', caption: 'Fall' },
{ file: 'http://info343.ischool.uw.edu/labs/5/freeway.jpg', caption: 'Freeway' },
{ file: 'http://info343.ischool.uw.edu/labs/5/hongkong.jpg', caption: 'Hong Kong' },
{ file: 'http://info343.ischool.uw.edu/labs/5/leaves.jpg', caption: 'Leaves' },
{ file: 'http://info343.ischool.uw.edu/labs/5/reflection.jpg', caption: 'Reflection' },
{ file: 'http://info343.ischool.uw.edu/labs/5/tuners.jpg', caption: 'Tuners' }
];
// When the page is ready, create and inject images into #gallery and attach
// event handlers.
$(document).ready(function() {
$.each(IMAGES, function(i, image) {
// Create the image with appropriate attributes.
var $img = $('<img>').attr('src', image.file).attr('alt', image.caption);
// Create a link whose href is the image file itself - but attach a click
// handler to show the lightbox and prevent the browser from visiting the
// image's URL. (Here we introduce an anonymous intermediary function to
// pass i from here into the enlarge function.)
var $a = $('<a>').attr('href', image.file).click(function(event) { enlarge(event, i); });
// Inject the image into the link, and the link into the gallery.
$img.appendTo($a);
$a.appendTo('#gallery');
});
});
// Show the lightbox, enlarging the ith image in the list.
function enlarge(event, index) {
// Prevent the browser from visiting the clicked link.
event.preventDefault();
// Create and inject an image into the lightbox with the source and alt of the
// ith image in the list.
$('<img>').attr('src', IMAGES[index].file).attr('alt', IMAGES[index].caption).appendTo('#container');
<!--[<ins>]-->// Set the previous and next links to go to the appropriate images.<!--[</ins>]-->
<!--[<ins>]-->setNavigation(index);<!--[</ins>]-->
// Special effect: make the lightbox fade in using a jQuery effect.
$('#lightbox').show();
}
<!--[<ins>]-->// Set the lightbox navigation links to go to the next/previous images.
function setNavigation(index) {
var prev = index > 0 ? index - 1 : IMAGES.length - 1;
var next = (index + 1) % IMAGES.length;
// Set the next/prev links to new hrefs, and attach new click handlers (making
// sure to unbind the previous one).
$('#prev').attr('href', IMAGES[prev].file).unbind('click').click(function(event) { load(event, prev) });
$('#next').attr('href', IMAGES[next].file).unbind('click').click(function(event) { load(event, next) });
}
// Load the image at the given index into the lightbox.
function load(event, index) {
// Prevent the browser from viewing the clicked link.
event.preventDefault();
// Alert the index we're given.
alert(index);
// Reset the navigation links.
setNavigation(index);
}<!--[</ins>]-->