Responsive Photo Gallery with LazyLoad (least.js)

Looking for a great responsive photo gallery with lazy load effect, then our new article is for you. During my wanderings on the internet I came across a great plugin least.js. It let you turn a set of photos into a photo gallery which works great even on mobile phones with small screens, moreover lazy load effect lets you to decrease server’s traffic. When you move your mouse over a photo, custom text is displayed. To view the full-size version – need to click on the thumb. I think that this could be ideal for you, because besides of all listed features, its size is only 1kb.

Contents

Step 1. HTML
Step 2. CSS
css/main.css
Step 3. JS
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, let’s download the source files and start coding !

Step 1. HTML

In the beginning we need to link all the necessary styles and js scripts (in the header section):

<!-- add styles --> 
  
<link href="css/least.min.css" rel="stylesheet" type="text/css" /> 
  
<link href="css/main.css" rel="stylesheet" type="text/css" /> 
  
<!-- add scripts --> 
  
<script src="js/jquery.min.js"></script> 
  
<script src="js/least.min.js"></script> 
  
<script src="js/jquery.lazyload.js"></script>

Pay attention, that the latest version of this gallery you can download here. If you want to add the support of mobile devices (small screens), you can easily add this row (in the same header section):

`1`	`<meta` `content="width=device-width, initial-scale=1"` `name="viewport"` `/>`

Now, we can prepare the main layout for our photos. Schematic structure looks like this:

<section> 
  
    <ul id="gallery"> 
  
        <li id="fullPreview"></li> 
  
        <!-- single photo object --> 
  
        <li> 
  
            <a href="images/p1.jpg"></a> 
  
            <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Photo 1" /> 
  
            <div class="overLayer"></div> 
  
            <div class="infoLayer"> 
  
                <ul> 
  
                    <li><h2>Photo 1</h2></li> 
  
                    <li><p>View</p></li> 
  
                    <li><p>it</p></li> 
  
                </ul> 
  
            </div> 
  
            <div class="projectInfo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div> 
  
        </li> 
  
        <!-- other photos --> 
  
    </ul> 
  
</section>

There are 20 photos in our demo. I haven’t included all of them into our tutorial, but I hope that you understand how to add other your photos.

Step 2. CSS

Basically, all the base styles are already presented in ‘least.min.css’ which is included with the package. But I made next adjustments for our demonstration:

css/main.css

section { 
  
    background-color: #FFFFFF; 
  
    box-shadow: none; 
  
} 
  
section li a, 
  
section li .overLayer, section li .infoLayer { 
  
    height: 187px; 
  
    width: 250px; 
  
} 
  
section li .infoLayer ul li { 
  
    padding: 5px 0 0; 
  
}

Step 3. JS

We needn’t add any special initialization code, everything works automatically.

Live Demo

Conclusion

Today we built the outstanding gallery which is made of HTML5 and CSS3 technologies. I hope you enjoyed our lesson. Good luck and welcome back.