How To 3 : Image Galleries

Example 1 : Basic Light Box

The first example is creating a basic lightbox for images. When a user clicks an image, the screen will fade in and display that image in it's original size. After the user is done, a single click on the image will fade it out

The Code

//main lightbox script
$(document).ready(function(){//start new anonymous function
  $('a.lightbox').click(function(e) {//create a click function on the lightbox class tag
    $('body').css('overflow-y', 'hidden'); // hide scrollbars when function fires
    
    $('<div id="overlay"></div>')//create new div 
      .css('top', $(document).scrollTop())//position
      .css('opacity', '0')//set div to be clear on page load
      .animate({'opacity': '0.5'}, 'slow')//animate upon click function
      .appendTo('body');//append to the body of the document covering all area
      
    $('<div id="lightbox"></div>')//create new light box div
      .hide()//hide this div
      .appendTo('body');//append this to the body
      
    $('<img />')//create image tag
      .attr('src', $(this).attr('href'))//add attribute src with href
      .load(function() {//load function
        positionLightboxImage();//runs the position function below
      })//close function positionImage
      .click(function() {//click function on the newly created div
        removeLightbox();//removes divs from display
      })//close click function
      .appendTo('#lightbox');// append this  function on the lightbox
    
    return false;;//do once
  });//close click function
});//close anonymous function

//positioning function and loading animation
function positionLightboxImage() {//creating a named function
  var top = ($(window).height() - $('#lightbox').height()) / 2; 
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  $('#lightbox')//ads the dimensional variables to lightbox
    .css({//css styles for positioning
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();// fade css in that position
}
//remove div and closing animation
function removeLightbox() {//creating new function to remove light box
  $('#overlay, #lightbox')//targeting the jQuery divs
    .fadeOut('slow', function() {//set them to fade out
      $(this).remove();//removing the divs
      $('body').css('overflow-y', 'auto'); // show scrollbars once faded out
    });//close fade function
}//close named function

The CSS

thumbnail {height:100px;overflow:hidden;border:1px dashed #FF0;padding:10px;}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black;
}

#lightbox {
  position: absolute;
}

The HTML

<a href="images/imageTest/AEmoon.jpg" class="lightbox">
<img src="images/imageTest/AEmoon.jpg" class="thumbnail"></a>
<a href="images/imageTest/DB_figure_groundB.jpg" class="lightbox">
<img src="images/imageTest/DB_figure_groundB.jpg" class="thumbnail"></a>
<a href="images/imageTest/selfportrait02.jpg" class="lightbox">
<img src="images/imageTest/selfportrait02.jpg" class="thumbnail"></a>
<a href="images/imageTest/DB_figure_groundD.jpg" class="lightbox">
<img src="images/imageTest/DB_figure_groundD.jpg" class="thumbnail"></a>

Working Code

Click an images to see the working code.

image image image image

http image or out of local directory image

image

Example 2 : Rollover Image

This example will create a basic rollover effect on two images that are stacked on top of each other.

The Code

$(document).ready(function(){//start a new anonymous function
	 $('#fader').hover(function() {//create a new hover (mouse over) function
		  $(this).find('img:eq(1)').stop(true,true).fadeIn();//stop animation unto hover function is enstated
	 },function() {//finish the function or function end
	   $(this).find('img:eq(1)').fadeOut();//fade out current inmage on mouse out
   })//close hover function
});//close Anonymous function

The CSS

#fader {
	position:relative;
}

#fader img {
height:500px;
width:500px;
}

#fader .to {
	display: none;
	position:absolute;
	left:0;
}

The HTML

<span id="fader">
<img src="images/imageTest/DB_figure_groundB.jpg" alt="image">
<img class="to" src="images/imageTest/DB_figure_groundD.jpg" alt="image">
</span>

The Working Code

image image

How To 3 : Load Images from a directory

Instead of writing out the image tags in html, it will be done all in jquery using variables.

The Code

function loadImages() {//great function to load and display images
	var imagePath = "images/imageTest/AEmoon.jpg"//image variable and path 1
	var imagePath2 = "images/imageTest/DB_figure_groundB.jpg"//image variable and path 2
	var imagePath3 = "images/imageTest/DB_figure_groundD.jpg"//image variable and path 3
	var imagePath4 = "images/imageTest/selfportrait02.jpg"//image variable and path 4
	//append to div listImg and display the image variables
	document.getElementById('listImg').innerHTML = "<img src="+imagePath +">,
    <img src="+imagePath2 +">,<img src="+imagePath3 +">,
    <img src="+imagePath4 +">"
	;
}
//excute the function
$(document).ready(function() {
		loadImages();
});

The CSS

#listImg {
	overflow:hidden;
}

#listImg img {
	width:150px;
	padding:20px;
	margin:10px;
	border:1px dashed #FF0;
	float:left;
	overflow:hidden;
}

The HTML

<div id="listImg">
</div>

THe Working Code

This is a very basic concept, but is a good way to understand more dynamic code that can read a directory and display images dynamically through server side scripting.