Image Cylinder jQuery plugin
HTML
<div id="images">
<img src="http://images5.fanpop.com/image/photos/32000000/Cat-cats-32040775-1440-900.jpg" />
<img src="http://www.metrodogstop.com/cms/wp-content/uploads/2013/05/cute-dog.jpg" />
<img src="http://images4.fanpop.com/image/photos/16400000/Bunnies-bunny-rabbits-16437969-1280-800.jpg" />
<img src="http://davidchuka.com/wp-content/uploads/2013/03/baby-hedgehog.jpg" />
</div>
CSS
#images {
width: 800px;
height: 300px;
margin: 0 auto;
}
.imagecylinder {
background-color: #DDD;
position: relative;
perspective: 1500px;
overflow: hidden;
}
.imagecylinder img {
padding: 0;
position: absolute;
transform: rotateY(40deg);
/*transform-style: preserve-3d;*/
}
JavaScript
(function noConflict($) {
$.fn.imagecylinder = function imagecylinder(options) {
var settings = $.extend({
imageWidth: 200,
imageHeight: 200,
depth: 650
}, options ),
$images = this.children("img"),
width = this.width(),
height = this.height(),
_onImageClick = function _onImageClick() {
console.log("click", this);
},
_init = function _init() {
this.addClass("imagecylinder");
$images
.css({
"width": settings.imageWidth,
"height": settings.imageHeight,
"top": (height - settings.imageHeight) / 2,
"left": (width - settings.imageWidth) / 2,
"transform-origin": "0 0 -" + settings.depth + "px"
})
.click(_onImageClick)
.each(function imagesEach(index) {
$(this).css({
"transform": "rotateY(" + index * 29 + "deg)"
});
});
};
// init
_init.apply(this);
};
}(jQuery));
$("#images").imagecylinder({
"imageWidth": 300,
"imageHeight": 200,
"depth": 650
});