JStack - Üst üste yığılmış fotoğraf albümü

Hisasan'ın jQuery için geliştirdiği jStack eklentisi. Başlık resminden ne anladınız bilmiyorum ama bu eklentinin yapabildikleri belirlediğiniz bir css çerçeve içerisindeki bütün resimlere sanki avuç içindeymiş gibi bir görünüm veriyor. Bununla kalmayıp tıklanan her resmi çekip en arkaya atıyor bu eklenti.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jStack.js"></script>

JavaScript :

var options = {
 isClickAnimation: true,
 isPositionRandom: true,
 durationOut: 300,
 durationIn: 200,
 easingOut: "easeInOutBack",
 easingIn: "easeOutBounce",
 moveLeft: 250,
 moveTop: 150,
 opacityOut: 0.6,
 opacityIn: 1,
 delay: 10,
 direction: "next",
 callback: function () {}
};

$(window).bind("load", function () {
 // jStack
 var jstack = $("#imageBox").jStack(options);
 $("#next").click(function () {
  jstack.next();
 });
 $("#prev").click(function () {
  jstack.prev();
 });
 $("#shuffle").click(function () {
  jstack.shuffle();
 });
});

Css :

<style type="text/css" media="screen">
body, img {
 border:0;
}
.jStack {
 margin-bottom: 20px;
}
#imageWraper1 {
 margin: 0px auto;
 width: 700px;
 height: 450px;
}
#stackTrace {
}
#imageBox {
 margin: 10px auto;
 width: 450px;
}
#imageBox a {
 outline: none;
 display: none;
}
#imageBox img {
}
.jStackBtn {
 text-align: center;
}
</style>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="imageWraper1">
	<div id="imageBox">
		<a href="#"><img src="img/img4.png"></a> 
		<a href="#"><img src="img/img5.png"></a> 
		<a href="#"><img src="img/img6.png"></a> 
		<a href="#"><img src="img/img7.png"></a>
		<a href="#"><img src="img/img8.png"></a> 
		<a href="#"><img src="img/img9.png"></a>
	</div>
</div>