Fork me on GitHub

Glisse.js

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

To see the plugin in action here is two examples with some lovely photos of my friend Pierre Nizet.

Feel free to fork the project on github or ping me on twitter for any comments.

Demonstrations

Features

Warning

This plugin uses a lot of new CSS3 features like keyframes. It’s definitely not a good idea to uses it on a general public website for the time. But my goal -if the plugin has good returns- is to make a fully compliant plugin, using javascript animation on old browsers. So stay tuned.

Roadmap

Download via Github.

Documentation

Basic Usage

Put this script just after jquery in your document

<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>

Options

Valid options for glisse.js are:

Compatibility

Works but without CSS3 trantions:

Credits

Licence

Licence Mit