Tilted Image Gallery / Rotator With jQuery And CSS3 - jGallery

jGallery is a jQuery plugin which lets you create a fancy, dynamic, tilted gallery / rotator using CSS3 transition, transform and perspective properties. Click on the neighboring slides to rotate through the gallery with a flipping effect.

How to use it:

1. Create a DIV container to place the tilted gallery.

<div id="my-gallery">
</div

2. Include jQuery library and the JavaScript file gallery.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/gallery.js"></script>

3. Initialize the plugin and create an array of objects containing web content to be presented in the gallery.

var myGallery = new Gallery;
myGallery.init({
  id : 'my-gallery',
  list:[
    {html:'<img src="1.jpg">Conent 1'},
    {html:'<img src="2.jpg">Conent 2'},
    {html:'<img src="3.jpg">Conent 3'},
    {html:'<img src="4.jpg">Conent 4'},
    {html:'<img src="5.jpg">Conent 5'},
  ]
});

4. The primary CSS/CSS3 styles for the flip effect.

/* entire container, keeps perspective */
.flip-container {
  display: inline-block;
  perspective: 1000px;
}

.flip-container, .front, .back {
  transform-style: preserve-3d;
  width: 320px;
  height: 420px;
}

/* flip speed goes here */

.flipper {
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */

.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

.fast { transition: 0.1s !important; }

/* back, initially hidden pane */

.back { transform: rotateY(180deg); }

5. All default plugin options.

myGallery.init({
  id : '',
  name : '',
  url : '',
  speed : 600,
  render : function(value){ 
    return "<div class='flip-container'><div class='flipper'><div class='front'>"+value+"<div class='back'></div></div></div>";
  }
});

---

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