Creating a Simple Photo Album using jQuery

photoalbum2

Photo album is one of the easiest way to show the collection of pictures in the webpage. I was also searching simple one that can be easily customized. I was inspired by the article which is so simple and easy to use. It can be used in both automatic and manual method to show the pictures.

We can edit the simple CSS to change the appearance and size of the album.

In automatic mode, the picture changes according to the specified time. The picture also shows the description if we need and can be also hyper-linked. The time between the photo change can also be adjusted.

In manual mode, when we slide the mouse over the photo album a navigation menu appears in the bottom which contains the button for previous photo, pause/play and next photo. And rest features are same as automatic mode.

One demerit of this photo album is that we should first need to resize the photos same as that of the size of photo album. Because this photo album don’t automatically resize it. One should be careful about this.

Steps 1:

Add the following script to the head section of your page:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
 
<style type="text/css">
 
/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid black;
}
 
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}
 
</style>
 
<script type="text/javascript" src="simplegallery.js"></script>
 
<script type="text/javascript">
 
var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [240, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["http://www.designgala.com/demos/palbum/p1.JPG", "", "", "Always "],
		["http://www.designgala.com/demos/palbum/p2.JPG", "", "", "Somewhere"],
		["http://www.designgala.com/demos/palbum/p3.JPG", "", "", "Miss you "],
		["http://www.designgala.com/demos/palbum/p4.JPG", "", "", "and love you always!"]
 
	],
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})
 
</script>

The code above references two external .js files plus 4 images, which you need to download below (right click/ select “Save As”):

1. simplegallery.js (customize variable “simpleGallery_navpanel” at the top)
2. jquery.min.js
3.Save the following images in the same folder
right
play
pause
right

Steps 2:

Then, add an empty DIV with a unique ID attribute where you wish a Gallery to appear on your page.

<div id="simplegallery1"></div>

The DIV’s ID value should match up with the value set in simpleGallery.wrapperid in the code of Step 1 above. When the page loads, the script will load the gallery into this DIV.

Our Simple Photo Album is ready now.

Click here to see the sample

6 replys to Creating a Simple Photo Album using jQuery

  1. Pingback: Design Gala
  2. Pingback: jQuery Tips

Leave a Reply

Your email address will not be published. Required fields are marked *