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]