Glisse.js: simple, responsive and fully customizable jQuery photo viewer

Glisse.js: simple, responsive and fully customizable jQuery photo viewer

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

Features:

  • Keyboard navigation
  • Fully CSS Customizable
  • Animated with CSS3 keyframes
  • 7 different transition effects
  • Scale to the viewport
  • Fullscreen support
  • iPad & iPhone ready (soon a fully Android support)

Usage

<script src="glisse.js"></script>

Then include the base stylesheet (Before you own stylesheets)
This stylesheet contains the base style for Glisse.js but there are not visual style included.

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

Add a “data-glisse-big” attribute to your image. This attribute corresponds to your full view picture.

<img class="pics" src="thumb.jpg" data-glisse-big="big.jpg"/>

If you want image shows/groups, simply add a “rel” attribute to your links

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1"/>
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1"/>
<img class="pics" src="thumb-3.jpg" data-glisse-big="big-3.jpg" rel="group1"/>

If you want show a title during the slideshow, simply use the “title” attribute

<img class="pics" src="thumb-1.jpg" data-glisse-big="big-1.jpg" rel="group1" title="my awesome picture"/>
<img class="pics" src="thumb-2.jpg" data-glisse-big="big-2.jpg" rel="group1" title="wooh, another picture"/>

After it, call the plugin.

<script>
$(function () {
    $('.pics').glisse({
        changeSpeed: 550, 
        speed: 500,
        effect:'bounce',
        fullscreen: true
    }); 
});
</script>


Demo 1
Demo 2DocumentationDownload

Enjoyed this article? Subscribe to read more like it

 

Sponsors