Responsive jQuery Photo Viewer with Transition Effect - Glisse.js

Glisse.js is a photo vewer plugin built with jQuery and CSS3 that makes it easy to create your own photo gallery with 7 built-in transition effects.  It supports fullscreen, keyboard navigation and is fully CSS customizable. 

How to use it:

1. Include required CSS file to style your plugin

<link rel="stylesheet" href="glisse.css" />
<link rel="stylesheet" href="css/app.css" />

2. Markup html structure

<ul class="gallery">
<li><img src="1.jpg" rel="group1" data-glisse-big="pictures/1.jpg" class="demo" title="" /></li>
<li><img src="2.jpg" rel="group1" data-glisse-big="pictures/2.jpg" class="demo" title="" /></li>
<li><img src="3.jpg" rel="group1" data-glisse-big="pictures/3.jpg" class="demo" title="" /></li>
<li><img src="4.jpg" rel="group1" data-glisse-big="pictures/4.jpg" class="demo" title="" /></li>
</ul>

3. Include jQuery library and Glisse.js on your web page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="glisse.js"></script> 

4. Call the plugin with options

<script>
 $(function () {
                
$('.demo').glisse({
speed: 500, // animation speed
changeSpeed: 550, 
effect:'roll', // bounce, fadeBig, fade, roll, rotate, flipX, flipY
fullscreen: false // true or false
}); 

});
</script>

More Examples:

• Example #1 (using fullscreen api)
• Example #2

---

This awesome jQuery plugin is developed by Victa. For more Advanced Usages, please check the demo page or visit the official website.