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.

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>