least.js – jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

Least.js is a plugin made by Kamil Czujowski and Sergej Müller. With this Jquery plugin you can display your images in a beautiful responsive gallery and it will give your website a great and modern look.

 
least.js RANDOM & RESPONSIVE HTML 5, CSS3 GALLERY WITH LAZYLOAD

 

least.js RANDOM & RESPONSIVE HTML 5, CSS3 GALLERY WITH LAZYLOAD

DEMO | DOWNLOAD

How to Use:

Download least.js

Insert the following code before end of </head>-tag.

 
<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!-- least.js JS-file -->
<script src="js/least.min.js" defer="defer"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.js" defer="defer"></script>

 

Insert the following code right after the <body>-tag.

 <section>
<ul id="gallery">
<li id="fullPreview"></li>
 <li>
<a href="img/full/full_1.jpg"></a>
<img data-original="img/thumb/thumb_1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" />
 <div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>
Ocean
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>

<div class="projectInfo">
<strong>
Monday, 14th April 2093:
</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</li>
</ul>
</section>

That’s it. Easy and simple implementation. You can see the project on github.

About This Author

I am Petia Koleva (aka scarletish) and I am doing web and graphic design. I also like to experiment in infographics and motion graphics design. I graduated @Gray's School of Art in Aberdeen, Scotland - BDes (Hon) Design for Digital Media. I have two design awards: BP Design Award 2012 @ Gray's School of Art and RGU Purchase Prize Award. I am very passionate about design and I share my passion on designify.me.

Post A Reply