jstack js

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>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla