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

JStack

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-01-27 tarihinde yayınlandı,Toplam 1572 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...