WARNING: ⚠⚠ this version has been deprecated and a new fully JS version is being developed here: https://github.com/orion3dgames/gridder-js ⚠⚠
=======
We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link
=======
Live demo GRIDDER v2 : https://www.oriongunning.com/demo/gridder-ajax/demo.php
=======
*24 June 2015 You can now load content via ajax. Simply replace the #ID with an URL.
=======
=======
Include jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Include plugin's code:
<script src="https://github.com/orion3dgames/gridder/raw/master/dist/jquery.gridder.min.js"></script>
HTML
<!-- Gridder navigation -->
<ul class="gridder">
<!-- You can load specify which content is loaded by specifying the #ID of the div where the content is -->
<li class="gridder-list" data-griddercontent="#content1">
<img src="https://placehold.it/600x400" />
</li>
<li class="gridder-list" data-griddercontent="#content2">
<img src="https://placehold.it/600x400" />
</li>
<li class="gridder-list" data-griddercontent="#content3">
<img src="https://placehold.it/600x400" />
</li>
<!-- You can also load html/ajax pages by replacing the #ID with a URL -->
<li class="gridder-list" data-griddercontent="/content.html">
<img src="https://placehold.it/600x400" />
</li>
</ul>
<!-- Gridder content -->
<div id="content1" class="gridder-content"> Content goes here... </div>
<div id="content2" class="gridder-content"> Content goes here... </div>
<div id="content3" class="gridder-content"> Content goes here... </div>
Call the plugin:
<script>
$(function() {
// Call Gridder
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: true, // Show Navigation
nextText: "Next", // Next button text
prevText: "Previous", // Previous button text
closeText: "Close", // Close button text
onStart: function(){
//Gridder Inititialized
},
onContent: function(){
//Gridder Content Loaded
},
onClosed: function(){
//Gridder Closed
}
});
});
</script>
This work is licensed under a Creative Commons Attribution 3.0 Unported License.