First of all, download jquery and the four plugins.

Basic structure and styling

The basic structure to apply Isotope on is the following:

 <title>Testing galleries</title>
 <!-- insert meta tags here -->
 <!-- link the style css file -->
 <link rel="stylesheet" type="text/css" href="css/snapshots.css" />
 <div id="container">
 <div class="item"><img class="snap" alt="" src="images/images1.jpg" /></div>
 <div class="item"><img class="snap" alt="" src="images/images1.jpg" /></div>
 <div class="item">><img class="snap" alt="" src="images/images1.jpg" /></div>

 <!-- load scripts here -->
 <script src="js/jquery-1.7.1.min.js"></script>
 <script src="js/jquery.isotope.min.js"></script>
 <script src="js/lightbox-2.6.min.js"></script>
 <script src="js/jquery.infinitescroll.min.js"></script>
 <script src="js/jquery.inview.min.js"></script>

It is very important to give the container div an id (#container) and the child divs a class (.item) —remember, ids are unique, only classes can repeat themselves— because they’re the keys for Isotope to work. You can now style the elements with css. I opted for a maximum width for the container, but you can set to 100% to achieve a full screen layout.

/* This is interesting to control entirely the size of your columns,
having the border be a part of it, instead of growing outwards. */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

/* reset values */
body {margin: 0; padding: 0; background: #fff; color: #000; }

/* Change here the value for the total maximum width */
#container {margin:auto; max-width: 1300px;}

/* General styling for all items. */
.item {border: 15px solid #fff; text-align: center;}

/* Styling for possible different widths */
.item.small {width: 25%;}
.item.big { width: 50%;}

It is interesting to define different column size possibilities that can later be used together by giving new classes to our image divs. Clearly, .small is providing a column a quarter of the total width, while .big will occupy half of the space. Here’s an example of a masonry style grid with multiple column widths:

Screen Shot 2013-08-06 at 8.45.24 AM

Follow to next page to set up Isotope.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.