Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571
Create a simple photogallery with jQuery in five minutes - Team Webgalli Blog
Request quote

Create a simple photogallery with jQuery in five minutes

Posted on: July 25th, 2012 by Sarath C 2 Comments

This is a simple tutorial which will help you to create a simple photo gallery system for your web project in less than five minutes using HTML, CSS, and JavaScript (jQuery). Following is the screenshot of the final product.

Live demo

Step 1: Load the jQuery library

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Step 2: The HTML Markup

The most important part of any good web component is a solid HTML structure. A semantic foundation means that your content will be web accessible in virtually all browser clients.

Our content’s structure involves a div called #photogallerywrapper that serves as the container for our gallery. Nested inside it is another div called #thumbnailsgallery that holds the gallery images.

<div id="photogallerywrapper">
	<div id="master_image"><img src="master_image_1.jpg" border="0"/></div>
		<div id="thumbnailsgall">
			<a href="#" rel="master_image_1.jpg" class="thumb_nail"><img src="thumb_nail_1.jpg" class="thumb" border="0"/></a>
			<a href="#" rel="master_image_2.jpg" class="thumb_nail"><img src="thumb_nail_2.jpg" class="thumb" border="0"/></a>
			<a href="#" rel="master_image_3.jpg" class="thumb_nail"><img src="thumb_nail_3.jpg" class="thumb" border="0"/></a>
			<a href="#" rel="master_image_4.jpg" class="thumb_nail"><img src="thumb_nail_4.jpg" class="thumb" border="0"/></a>
			<a href="#" rel="master_image_5.jpg" class="thumb_nail"><img src="thumb_nail_5.jpg" class="thumb" border="0"/></a>
	</div>
</div>

Step 3 : The CSS

The next step to a strong design is having a good set of styles that consider the possibility that the user has JavaScript disabled.

#master_image {
    float: left;
    max-width: 205px;
    width: 205px;
}	
#master_image img {
	margin:2px;
	border:1px solid #dedede;
}  
#thumbnailsgall {
    float: right;
    max-width: 345px;
    width: 345px;
}	
#thumbnailsgall img {
	margin:2px;
	border:1px solid #dedede;
}	
#photogallerywrapper {
	border:1px solid #858585;
	background:#858585;
	overflow:auto;
	margin:10px 0;
}

Step 4 : The simple magic

With our HTML and CSS in place, it’s time for the fun stuff. We’ll use the loaded jQuery library to make our slideshow more interactive and animated.

	<script style="text/javascript">
	$(function() {
		$(".thumb_nail").click(function() {
		var image = $(this).attr("rel");
		$('#master_image').hide();
		$('#master_image').fadeIn('slow');
		$('#master_image').html('<img src="' + image + '"/>');
		return false;
		});
	});
	</script>

In summary

In this tutorial, we created a simple photogallery script using solid HTML, CSS, and JavaScript (jQuery).

Feedback? Questions?

What did you think about this tutorial? Was it helpful? Were you confused at any point? Did you spot errors or points of improvement? Please share your thoughts in the comments so that we can improve tutorials here. Additionally, if you have questions, we’d love to help – so don’t be shy!

Tags: , , , , , ,

2 Responses

  1. Seungkyu says:

    Extending this technique you can make a loading image appear while the image is loading, and then switch in the image after it has loaded:

    var $image = $( ).css({ display: none' }).attr({src: path/to/image.png',alt: description of image'});
    var $loader = $( ).attr({src: path/to/loader.gif'});
    $(this).append($loader).append($image.load(function() {
    $loader.remove();
    $image.css({ display: inline-block' });
    }));

    Or you could use inline’ or block’ for the final display property of the image, whatever matches your requirements.

  2. Sarath C says:

    You are correct. But I think, we can have the same effect easily by giving a background property for the #master_image div as follows

    #master_image{
    background: url("path/to/loading.gif") 50% 50% no-repeat;
    }

    See our preloader tutorial for the example.