24xhtml.com: How to create image gallery within few minutes?

Wednesday, 30 September 2015

How to create image gallery within few minutes?

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.

<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>

Copy the same li list and change the image path for thumbnail and enlarge images.

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; }

.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);

}

Its almost ready, just you have to put click function for each image. Please include following script at the end of gallery page.

$('.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);

  });