Loading...

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]

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.