Code
Here’s everything put together on the same file, and a download to the project.
[button type=”qd_button btn_middle” url=”http://codelabs.beacabrera.es/infinite_gallery/infinite_gallery.zip” target=”on” button_color_fon=”#050fe6″ ]Download[/button]
<html>
<head><title>Infinite Galleries</title>
<!--
Simple example to get it going by Bea Cabrera (hello@beacabrera.es) - Jul' 2013
Based on plugins:
Isotope by David Desandro,
Infinite-Scroll by Paul Irish,
Inview by Protonet and
Lightbox by Lokesh Dhakar
-->
<link href="css/lightbox.css" rel="stylesheet" />
<style>
/* 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- */
#cargando p{text-indent: -9999px;}
#cargando {display: block; width: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}
#cargando img {width: 100px;}
/* Hide isotope container while it loads */
#container {visibility: hidden;}
/* Styling status messages */
#infscr-loading {width: 200px; height: 200px; background: rgba(255,255,255,0.7); border-radius: 10px; position: absolute; bottom: 30px; left: 50%; margin-left: -100px; z-index: 10000;}
#infscr-loading img{margin-left: 50px; margin-bottom: 5px; width: 100px; height: 100px; }
#infscr-loading div {color: #000; font-size: 20px; text-align: center; font-family: 'Oswald', 'Helvetica', sans-serif;}
/* General styling for all items. For example a big, white, border. */
.item {border: 15px solid #fff; text-align: center; visibility:hidden; }
.item img{width: 100%;}
/* Styling for possible different widths */
.item.small {width: 25%;}
.item.big { width: 50%;}
/* hide original navigation */
#page_nav {visibility: hidden;}
</style>
</head>
<body>
<div id="fit-width">
<div id="cargando"><p>loading...</p><img src="images/loading.gif" /></div>
<div id="container">
<div class="item small">
<a href="images/1.jpg" data-lightbox="snapshots">
<img class="snap" alt="" src="images/1th.jpg" />
</a>
</div>
<div class="item small">
<a href="images/2.jpg" data-lightbox="snapshots">
<img class="snap" alt="" src="images/2th.jpg" />
</a>
</div>
<div class="item small">
<a href="images/3.jpg" data-lightbox="snapshots">
<img class="snap" alt="" src="images/3th.jpg" />
</a>
</div>
<div class="item small">
<a href="images/4.jpg" data-lightbox="snapshots">
<img class="snap" alt="" src="images/4th.jpg" />
</a>
</div>
<div class="item small">
<a href="images/5.jpg" data-lightbox="snapshots">
<img class="snap" alt="" src="images/5th.jpg" />
</a>
</div>
</div>
<nav id="page_nav">
<div class='next'><a href="html/page2.html">Next →</a></div>
</nav>
<!-- 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>
// ISOTOPE
var $container = $('#container');
$container.imagesLoaded(function() {
$container.isotope({
itemSelector: '.item',
});
$('#cargando').css('display', 'none');
$container.css('visibility', 'visible');
});
// INVIEW
$(document).on("inview", ".item", function(e) {
var $this = $(this);
if(!$this.hasClass('loaded')) {
$this.addClass('loaded');
$this.css('visibility','visible').hide().fadeIn('slow');
}
});
// INFINITE SCROLL
$(function(){
$container.infinitescroll({
// selector for the paged navigation
navSelector : '#page_nav',
// selector for the NEXT link (to page 2)
nextSelector : '.next a',
// selector for all items you'll retrieve
itemSelector : '.item',
loading:{
// message while loading
msgText: 'Hang on, loading more pics!',
// message at the end
finishedMsg: '<em>No more pictures to load</em>',
// loading gif
img: 'images/loading.gif'
}
},
// trigger Isotope as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css('visibility', 'hidden');
// ensure that images load before adding to Isotope layout
$newElems.imagesLoaded(function() {
// show elems now they're ready
$container.isotope( 'appended', $newElems );
});
});
});
</script>
</body>
</html>
[button type=”qd_button btn_middle” url=”http://codelabs.beacabrera.es/infinite_gallery/infinite_gallery.zip” target=”on” button_color_fon=”#050fe6″ ]Download[/button]
