Loading...

Activating Isotope

To activate Isotope simply add a script tag right above your body tag.

     $container.isotope({
          itemSelector: '.item'
     });

If you would like a fixed width for columns you could change the columnWidth property to Masonry, but bare in mind that this will not allow for fluid/responsive layouts:

     $container.isotope({
          itemSelector: '.item'
          masonry: { columnWidth: 230 }
     });

To obtain a responsive result you can now style via @media-queries the width of .item

@media only screen and (max-width: 960px) {
	.item.small {width:25%;}	
}

/*Mobile Layout: Landscape Container width:768px*/
@media only screen and (min-width: 768px) and (max-width: 959px) {	
.item.small {width:33%;}	
}

/*Mobile Layout: Landscape Container width:480px*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.item.small {width:50%;}
}

/*Mobile Layout: Portrait Container width:320px*/
@media only screen and (max-width: 479px){
	.item.small {width:100%;}

Troubleshooting —the grid looks “messy” until the window is resized

This is because we are trying to load images —that take longer to load— while Isotope has already began positioning without knowing their heights. We didn’t specify a height for .item so that it could take the proportional size of the image. To resolve this problem we will just delay triggering Isotope until all images are loaded by using the function imagesLoaded(). As the images are loading we will show up a loading gif to inform the visitor, while hiding the actual Isotope layout. So here are the changes to our structure, style and script:

HTML & Script:

<html>
<head><title>Testing galleries</title>
<!-- insert meta tags here -->
<!-- link the style css file -->
<link rel="stylesheet" type="text/css" href="css/snapshots.css" />
</head>

<body>
<div id="fit-width">
<div id="loading"><p>loading...</p><img src="images/loading.gif" /></div>
<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>
...
</div>
</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>
<script>
var $container = $('#container');
$container.imagesLoaded(function() {
$container.isotope({
itemSelector: '.item',
});
$('#loading').css('display', 'none');
$container.css('visibility', 'visible');
});
</script>
</body>
</html>

CSS:

/* 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 */
#fit-width {margin:auto; max-width: 1300px;}

/* Styling the loading gif -centering- */
#loading p{text-indent: -9999px;}
#loading {display: block; width: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}
#loading img {width: 100px;}

/* Hide isotope container while it loads */
#container {visibility: hidden;}

/* General styling for all items. For example a big, white, border. */
.item {border: 15px solid #fff; text-align: center;}

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

Follow to next page to set up Infinite Scroll.

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.