jQuery Fullscreen Photo Wall with CSS3 Transitions
File Size: | 12.9MB |
---|---|
Views Total: | 9388 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery plugin for creating a full-screen photo gallery with smooth diagonal fade effect and CSS3 transitions. Ideal for creating a photo wall on your website for showcasing your projects/photos/images.
How to use it:
1. Create the containers for your photo wall
<div id="loading"></div> <div id="gallery"></div>
2. Include necessary javascript files
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/jquery.loadImage.js"></script> <script src="assets/js/script.js"></script>
3. Include jQuery swipebox plugin for customizable and touchable lightbox support
<link href="swipebox/swipebox.css" rel="stylesheet" /> <script src="swipebox/jquery.swipebox.min.js"></script>
4. The CSS
#loading { display: none; width: 40px; height: 40px; background: url(../img/preloader.gif) no-repeat center center; position: fixed; top: 50%; left: 50%; margin: -20px 0 0 -20px; } #gallery { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #gallery a { opacity: 0; float: left; background-size: cover; background-position: center center; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); -webkit-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; } #gallery a.static:hover, #gallery a.show:hover { opacity: 0.9 !important; } #gallery a.static { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } #gallery a.next, #gallery a.prev { background-color: #333; cursor: pointer; } #gallery a.next { background-image: url('../img/arrow_next.jpg'); } #gallery a.prev { background-image: url('../img/arrow_prev.jpg'); } #gallery a.show { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
5. The javascript
$(function(){ // Global variables that hold state var page = 0, per_page = 100, photo_default_size = 150, picture_width = photo_default_size, picture_height = photo_default_size, max_w_photos, max_h_photos data = []; // Global variables that cache selectors var win = $(window), loading = $('#loading'), gallery = $('#gallery'); // Fetch all the available images with // a GET AJAX request $.get('load.php', function(response){ // response.data holds the photos data = response.data; // Trigger our custom data-ready event gallery.trigger('data-ready'); }); // Redraw the photos on screen gallery.on('data-ready window-resized page-turned', function(event, direction){ var cache = [], deferreds = []; gallery.trigger('loading'); // The photos that we should be showing on the new screen var set = data.slice(get_page_start(), get_page_start() + get_per_page()); $.each(set, function(){ // Create a deferred for each image, so // we know when they are all loaded deferreds.push($.loadImage(this.thumb)); // build the cache cache.push('<a href="' + this.large + '" class="swipebox"' + 'style="width:' + picture_width + 'px;height:' + picture_height + 'px;background-image:url(' + this.thumb + ')">'+ '</a>'); }); if(is_prev_page()){ cache.unshift('<a class="prev" style="width:' + picture_width + 'px;height:' + picture_height + 'px;"></a>'); } if(is_next_page()){ cache.push('<a class="next" style="width:' + picture_width + 'px;height:' + picture_height + 'px;"></a>'); } if(!cache.length){ // There aren't any images return false; } // Call the $.when() function using apply, so that // the deferreds array is passed as individual arguments. // $.when(arg1, arg2) is the same as $.when.apply($, [arg1, arg2]) $.when.apply($, deferreds).always(function(){ // All images have been loaded! if(event.type == 'window-resized'){ // No need to animate the photos // if this is a resize event gallery.html(cache.join('')); show_photos_static(); // Re-initialize the swipebox $('#gallery .swipebox').swipebox(); } else{ // Create a fade out effect gallery.fadeOut(function(){ // Add the photos to the gallery gallery.html(cache.join('')); if(event.type == 'page-turned' && direction == 'br'){ show_photos_with_animation_br(); } else{ show_photos_with_animation_tl(); } // Re-initialize the swipebox $('#gallery .swipebox').swipebox(); gallery.show(); }); } gallery.trigger('loading-finished'); }); }); gallery.on('loading',function(){ // show the preloader loading.show(); }); gallery.on('loading-finished',function(){ // hide the preloader loading.hide(); }); gallery.on('click', '.next', function(){ page++; gallery.trigger('page-turned',['br']); }); gallery.on('click', '.prev', function(){ page--; gallery.trigger('page-turned',['tl']); }); // Monitor window resizing or changing device orientation win.on('resize', function(e){ var width = win.width(), height = win.height(), gallery_width, gallery_height, difference; // How many photos can we fit on one line? max_w_photos = Math.ceil(width/photo_default_size); // Difference holds how much we should shrink each of the photos difference = (max_w_photos * photo_default_size - width) / max_w_photos; // Set the global width variable of the pictures. picture_width = Math.ceil(photo_default_size - difference); // Set the gallery width gallery_width = max_w_photos * picture_width; // Let's do the same with the height: max_h_photos = Math.ceil(height/photo_default_size); difference = (max_h_photos * photo_default_size - height) / max_h_photos; picture_height = Math.ceil(photo_default_size - difference); gallery_height = max_h_photos * picture_height; // How many photos to show per page? per_page = max_w_photos*max_h_photos; // Resize the gallery holder gallery.width(gallery_width).height(gallery_height); gallery.trigger('window-resized'); }).resize(); function show_photos_static(){ // Show the images without any animations gallery.find('a').addClass('static'); } function show_photos_with_animation_tl(){ // Animate the images from the top-left var photos = gallery.find('a'); for(var i=0; i<max_w_photos + max_h_photos; i++){ var j = i; // Loop through all the lines for(var l = 0; l < max_h_photos; l++){ // If the photo is not of the current line, stop. if(j < l*max_w_photos) break; // Schedule a timeout. It is wrapped in an anonymous // function to preserve the value of the j variable (function(j){ setTimeout(function(){ photos.eq(j).addClass('show'); }, i*50); })(j); // Increment the counter so it points to the photo // to the left on the line below j += max_w_photos - 1; } } } function show_photos_with_animation_br(){ // Animate the images from the bottom-right var photos = gallery.find('a'); for(var i=0; i<max_w_photos + max_h_photos; i++){ var j = per_page - i; // Loop through all the lines for(var l = max_h_photos-1; l >= 0; l--){ // If the photo is not of the current line, stop. if(j > (l+1)*max_w_photos-1) break; // Schedule a timeout. It is wrapped in an anonymous // function to preserve the value of the j variable (function(j){ setTimeout(function(){ photos.eq(j).addClass('show'); }, i*50); })(j); // Decrement the counter so it points to the photo // to the right on the line above j -= max_w_photos - 1; } } } /* Helper functions */ function get_per_page(){ // How many pictures should be shown on current page // The first page has only one arrow, // so we decrease the per_page argument with 1 if(page == 0){ return per_page - 1; } // Is this the last page? if(get_page_start() + per_page - 1 > data.length - 1){ // It also has 1 arrow. return per_page - 1; } // The other pages have two arrows. return per_page - 2; } function get_page_start(p){ // Which position holds the first photo // that is to be shown on the give page if(p === undefined){ p = page; } if(p == 0){ return 0; } // (per_page - 2) because the arrows take up two places for photos // + 1 at the end because the first page has only a next arrow. return (per_page - 2)*p + 1; } function is_next_page(){ // Should we show the next arrow? return data.length > get_page_start(page + 1); } function is_prev_page(){ // Should we show the previous arrow? return page > 0; } });
This awesome jQuery plugin is developed by tutorialzine. For more Advanced Usages, please check the demo page or visit the official website.