-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlightbox-exercise.js
More file actions
37 lines (28 loc) · 910 Bytes
/
lightbox-exercise.js
File metadata and controls
37 lines (28 loc) · 910 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//Problem: User when clicking on image goes to dead end
//Solution: Create an overlay with the large image - Lightbox
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
// An image to overlay
$overlay.append($image);
// Add overlay
$("body").append($overlay);
// A caption to overlay
$overlay.append($caption);
//Capture the click event on a link to an image
$("#imageGallery a").click(function( event ) {
event.preventDefault();
var imageLocation = $(this).attr("href");
// Update overlay with the image linked in the link
$image.attr("src", imageLocation);
//Show the overlay.
$overlay.show();
// Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
// When overlay is clicked
$overlay.click(function() {
// Hide the overlay
$overlay.hide();
});