Make an Image Gallery with JQuery Pt 2

Make an image galleryIn my previous tutorial How to Make a Slideshow, I showed you all of the HTML and CSS code that is required to make an image gallery with JQuery.

In this video tutorial, I’ll go over all of the JQuery and JavaScript needed to finish this image gallery tutorial.

This also is going to be a pretty awesome JQuery tutorial, because I’m going to review a lot!

What I’ll Cover

I need to add some functionality to this image gallery and JQuery is the best way I know of to do that because it’s cross browser. I’ll add this functionality today:

  • Provide a way to open the lightbox / image gallery
  • Dim the background
  • Display the images one at a time
  • Skip to next and previous image based on mouse clicks
  • Resize the lightbox based on the size of the image
  • Close the lightbox / image gallery

Here is a link to a zipped archive for all of the code and images JQuery Slideshow Code. I explain the code line by line after the video.

Code from the Video

LIGHTBOX_JS_CODE.JS

$(document).ready(function(){

// When a link of class open_lightbox is clicked this function is triggered

$(“a.open_lightbox”).click(function(){

 

// Sets the opacity for the background shadow to 85%

$(“#lightbox_background”).css({opacity: 0.85});

 

// Makes all of the hidden parts of the lightbox appear

$(“#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button”).fadeIn(300);

 

// Gets the height and width of the first media type displayed

// Media type is a reference to any images or movies

ntt_img_height = $(‘.ntt_media_file:first’).css(‘height’);

ntt_img_width = $(‘.ntt_media_file:first’).css(‘width’);

 

// Changes the size of the parent div that surrounds the media on screen

// Animate will make the changes slowly for dramtic effect

$(‘.ntt_media_file:first’).parent().animate({

height: ntt_img_height+100,

width: ntt_img_width

}, “slow”);

 

});

 

// If an img is clicked on with the id of close-panel run this function

$(“img#close-panel”).click(function(){

 

// Make all the lightbox elements disappear

$(“#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button”).fadeOut(300);

})

 

// When the next button is clicked it triggers a click event on

// the current image visible on the screen

$(“img#ntt_next_media”).click(function(){

$(“.ntt_media_file:visible”).trigger(‘click’);

});

 

// Closes the lightbox if the escape key is pressed

$(document).keypress(function(e) {

// If the key pressed was escape close the lightbox

if(e.keyCode == 27)

{

$(“#lightbox_background, .lightbox-panel”).fadeOut(300);

}

 

});

 

// This event is triggered any time the user clicks on anything with a

// class of ntt_media_file.

// It cycles through the different media types from first to last

$(“.ntt_media_file”).click(function(){

 

if( $(this).next(‘.ntt_media_file’).length == 0)

{

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Display the first media in the lightbox

$(“.ntt_media_file:first”).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

 

} else {

 

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// this is a reference to the element that was clicked to trigger

// this function. This statement is causing the next media

// with the class ntt_media_file to appear

$(this).next(‘.ntt_media_file’).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

}

 

});

 

// This event is triggered any time the user clicks on the previous

// button.

// It cycles backwards through the different media types

$(“.ntt_prev_button”).click(function(){

 

// This checks to see if a media file is available to display

if( $(“.ntt_media_file:visible”).prev(‘.ntt_media_file’).length == 0)

{

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Display the first media in the lightbox

$(“.ntt_media_file:last”).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

} else {

 

// Get the current index value for the media shown

var ntt_current_media_shown = $(“.ntt_media_file:visible”).index();

 

// Get the index for the media that proceeds the current image

var ntt_prev_item_to_show = ntt_current_media_shown – 1;

 

// Toggle off all visible media in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Toggle on the media previous to the last shown

$(“.ntt_media_file”).eq(ntt_prev_item_to_show).toggle();

 

// Call this function to resize the div based on dimensions

// of the media shown in the lightbox

ntt_resize_div_container();

 

}

 

});

 

});

 

// Call this function to resize the div based on dimensions

// of the media shown in the lightbox

function ntt_resize_div_container()

{

// Get the current height and width of the visible media in lightbox

ntt_img_height = $(“.ntt_media_file:visible”).css(‘height’);

ntt_img_width = $(“.ntt_media_file:visible”).css(‘width’);

 

// Define the margins based on the size of the image

ntt_img_margin_top = (ntt_img_height / 4);

ntt_img_margin_left = (ntt_img_width / 4);

 

// Target the div that surrounds the visible media (it’s a div)

// Adjust the size of the parent div based on the dimensions

// of the media it contains

$(“.ntt_media_file:visible”).parent().animate({

height: ntt_img_height+100,

width: ntt_img_width

}, “fast”);

 

 

$(“.ntt_media_file:visible”).parent().css({

‘position’: ‘fixed’,

‘top’: ‘22%’,

‘left’: ‘22%’,

‘min-width’: ‘530px’,

‘margin-top’: ntt_img_margin_top,

‘margin-left’: ntt_img_margin_left

});

 

}


4 Responses to “Make an Image Gallery with JQuery Pt 2”

  1. Nice tutorial! Great help for newbie! Thanks.

  2. Dulle.js says:

    Cool tutorial i understod it even with only knowing basics of javascript

    Tough alot of css and html

Leave a Reply

Your email address will not be published.

Google+