
As we all knows that image gallery is one of the best important parts of any web application and most of the time we spent several hours on internet to find out suitable plug-in or downloadable readymade files. But do you know you can create them very easily and within few minutes. Let's start discussing how you can create and implement.
Previously I have published few posts on jQuery and hope you have read out them. If you missed them, please click here to read for better understanding. Because the easiest way to create image gallery is using jQuery and we are going to use the same.
Make sure that what kind of gallery you are going to create and plan accordingly. As I am going to create several image thumbnails will show on a page with title and once user will click on it, the enlarge image will show with title and description.
Please include jQuery library in the page where you are going to create the gallery. Please click here to see jQuery library installation. Then start writing HTMl code as structure below.
Copy the same li list and change the image path for thumbnail and enlarge images.<div class="gallery_wrapper">
<ul class="gallery_content">
<li>
<div class="img-front">
<h2>Image Title 01</h2>
<p><img src="Thumb Image URL.jpg" alt="" /></p>
</div>
<div class="img-enlarge">
<b><i class="fa fa-search"></i> Enlarge</b>
</div><!-- Content -->
<div class="all-content">
<h1>Image Title 01</h1>
<p>Image Description for enlarge image</p>
<p><img src="Enlarge Image URL.jpg" alt="" /></p>
</div>
</li>
</ul>
</div>
Now the time to display images properly, using following CSS prperties.
.gallery_content ul, .gallery_content li { list-style-type:none; margin:0; padding:0; }Its almost ready, just you have to put click function for each image. Please include following script at the end of gallery page.
.gallery_content li {width:180px; display:block; float:left; border:#ccc 1px solid; margin:10px; text-align:center;}
.gallery_content li p { overflow:hidden;}
.gallery_content li .img-front img { max-width:180px; transition: all .2s ease-in-out; }
.gallery_content li b { font-size:12px; font-weight:normal; display:block; padding:5px; cursor:pointer;}
.gallery_content li h2 {font-size:18px; text-align:center; margin:0; padding:5px;}
.gallery_content li .all-content { position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0; z-index:1199; background:#e30101; color:#fff}
.gallery_content li .all-content p {margin-bottom:15px;}
.gallery_content li .all-content img {max-width:100%;}
.close { position:absolute; right:20px; top:20px; cursor:pointer; z-index:1200; color:#fff}
.gallery_content li .img-front img:hover {
-ms-transform: scale(1.5,1.5); /* IE 9 */
-webkit-transform: scale(1.5,1.5); /* Safari */
transform: scale(1.5,1.5);
}
$('.all-content').hide();
var bgColor;
var effect = 'animated bounceInLeft';
$('.gallery_content li').click(function(){
$('.img-front, .img-enlarge').hide();
$('.gallery_content li').removeClass('active').hide().css('border','none');
$(this).addClass('active').show();
bgColor = $('.active .img-enlarge').css('background-color');
$('.gallery_content').css('background-color',bgColor);
$('.close, .all-content').show();
$('.gallery_wrapper').append('<span class="close"><i class="fa fa-close"></i> Close</span>').addClass(effect);
});
$('.gallery_wrapper').on('click', '.close', function(){
$('.close').remove();
bgColor = $('.active .img-front').css('background-color');
$('.gallery_wrapper').removeClass(effect);
$('.all-content').hide();
$('.gallery_content li').removeClass('active').show().css({ 'border':'1px solid #ccc' });
$('.img-front, .img-enlarge').show();
$('.gallery_content').css('background-color',bgColor);
});

Or, you can also see the demo here.
-
Image Title 01
EnlargeImage Title 01
Image Description
-
Image Title 02
EnlargeImage Title 02
Image Description
-
Image Title 03
EnlargeImage Title 03
Image Description
-
Image Title 04
EnlargeImage Title 04
Image Description
-
Image Title 05
EnlargeImage Title 05
Image Description
-
Image Title 06
EnlargeImage Title 06
Image Description
-
Image Title 07
EnlargeImage Title 07
Image Description
-
Image Title 08
EnlargeImage Title 08
Image Description
Awesome......
ReplyDeletePlease include jQuery library in the page where you are going to create the gallery. Please click here to see jQuery library installation. JN0-681 Practice Test Questions
ReplyDelete