Glisse.js - 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)

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.

Compatibility

• Firefox 4+
• Opera 11.6+
• Chrome 14+
• Safari 5+
• iPhone/iPad iOS 4.3+
• BlackBerry OS v6+

Works but without CSS3 trantions:

• Opera 10+
• Firefox 3.6
• IE8+

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: glisse.victorcoulon.fr

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="glisse.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="glisse.js"></script>

2. HTML

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

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

3. JAVASCRIPT

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

4. OPTIONS

Valid options for glisse.js are:

• changeSpeed - Transition duration betwwen 2 pictures (default 1000)
• speed - Open/Close slideshow duration (default 300)
• dataName - change the data attribute name for fulscreen pictures (default data-glisse-big)
• fullscren - fullscreen gallery using fullscreen api (default false)
• disablindRightClick - disabling right click on full size picture (default false)
• effect - Effect (default bounce)
  • Valid effect values:
  • bounce
  • fadeBig
  • fade
  • roll
  • rotate
  • flipX
  • flipY

Example 1

Example 2