Flashuser

  • Pin It

How to Create a Responsive jQuery Image Grid Gallery

Today we want to show you how to create a responsive jQuery grid with CSS3 transitions and using Flexslider plugin. We’ll make in this tutorial a 3×2 image grid with 2 slides. You can extend the idea according to your needs( for example you can make 3×3 grid with 5 slides; the limit is your imagination).

We want the grid to have a responsive design and for that we have used Twitter Bootstrap framework. Resize the browser window when you check the example to see how the design adapts to different widths. For the lightbox images we have used the prettyPhoto plugin.

jquery-grid

HTML CODE

First thing first. Lets include the styles and scripts that we needed in the header tag.

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="js/prettyphoto/css/prettyPhoto.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>	
<script src="js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>	
<script src="js/init.js" type="text/javascript"></script>

The structure will contain an unordered list. Each list item represents a slide which will have 2 rows with 3 columns. Each grid piece will have image, mask for the image, title and link.(due to duplicate code below will find completed only the first image from a row; the full code is in the download package)

 <section class="flexslider">
  <ul class="slides">
       <li>
	<div class="row">	
        <div class="span4">
<div class="col4_img">
<img src="images/pic1.jpg" alt="" title="" />
<div class="mask_4col">
<div class="mask_elem">
<a class="lightbox" href="images/pic1.jpg" rel="prettyPhoto[gallery]" title=""><img src="images/mglass.png" alt="" title="" /></a>

</div>

</div> 
</div><!--end col4_img-->
<h4>Title 1</h4>
<a href="#" target="_blank">View Details</a>
</div>
        <div class="span4"></div>
        <div class="span4"></div>
</div><!--end-row-->
<div class="row">	
        <div class="span4"></div>
        <div class="span4"></div>
        <div class="span4"></div>
</div><!--end-row-->
    </li>
 </ul>
</section>

CSS CODE

First will handle the flexslider container and set the list items position to relative.

.flexslider {position:relative;
margin-top:100px;
	border:none;
    border-radius:0;
    box-shadow:none;
	}
	.flexslider .slides > li {
    position: relative;
}

Now we will hide the slider button controls and use the direction navigation arrows. We’ll use a transparent png for the previous and next buttons and position the image background for each one.

.flex-control-nav{display:none;}
.flex-direction-nav a {
    background: url("images/arrows.png") no-repeat 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;
    position: absolute;
    text-indent: -9999px;
    z-index: 10;
}
.flex-direction-nav .flex-prev{background-position: 0 0;left:46%;top:-60px;}
.flexslider:hover .flex-prev{left:46%;}
.flex-direction-nav .flex-next{background-position: -40px 0;left:51%;top:-60px;}
.flexslider:hover .flex-next{ left:51%;}

Last thing, we will add the image mask that will appear on mouse hover with a opacity transition effect. We will also set a gradient background for the mask.

.col4_img .mask_4col{
width:100%;
height:100%;
position:absolute;
top:0; left:0;
text-align:center;
background: #A3CF45; /* Old browsers */
background: -moz-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EAE2ED), color-stop(100%, #c0b5c3 )); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #EAE2ED 0%, #c0b5c3 100%); /* IE10+ */
background: linear-gradient(to bottom, #EAE2ED 0%, #c0b5c3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EAE2ED', endColorstr='#c0b5c3',GradientType=0 ); /* IE6-9 */

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}

.col4_img:hover .mask_4col{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

JS CODE

To load the slider we will use the following code. Modify the parameters as you like. You can check it in the js/init.js file.

$('.flexslider').flexslider({
	animation: "slide",
	slideshow: true,
	slideshowSpeed: 7000,
	animationSpeed: 600,  
	prevText: 'Prev',
	nextText: 'Next'
	});

To activate the lightbox plugin use the following code. We will apply the :not CSS selector for the elements because the flexslider makes 2 clones for the first and last slides, so we don’t want to have image duplicates on our lightbox gallery. To mimic the :not selector functionality for Internet Explorer 6 to 8, we will include this library – js/selectivizr.js at the end of the html page.

$(".slides li:not(.clone) a[rel^='prettyPhoto']").prettyPhoto({
	animation_speed: 'normal',
	autoplay_slideshow: true,
	slideshow: 3000
	});

CONCLUSION

Hope you have found this tutorial useful. Download, use it and don’t forget to share it with your friends. Thanks and follow us for more awesomeness!

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • Pingback: How to Create a Responsive jQuery Image Grid Gallery | Design News()

  • Ryan Mark

    I love the tutorial. Is there any way to update this for Bootstrap 3? I have been trying to get a bit more functionality out of it but am having trouble getting things synced as I am new to Bootstrap.

    Also, I was trying to get the slider to be a single image in sm and xs views using the visible-sm, hidden-sm classes. Again having trouble. Any thoughts?