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.
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: best jquery photogallery, create photogallery, easily create photogallery with jquery, easy photgallery with javascript, html photo gallery, javascript photos, jquery photo gallery tutorial
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.
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.