jQuery sitesinde dolanırken gördüğüm güzel eklentilerden (plugin) biri VerticalShift. Husbandman (Mark Tank) tarafından yapılan bu eklenti size yatay bir alanda birden çok açılan alan kullanarak resim, yazı ve hatta açıklamalarınızı gösterebilmenize yarayan güzel bir eklenti. Kullanımı ve indirme ile ilgili bilgileri aşağıda size belirteceğim. Umarım kullanabileceğiniz güzelliktedir. Çalışmalarınıza renk katması dileğimle başlıyorum…
Yatay Alanda Açılır Resim Kutucukları…
Aşağıda önizleme linki vereceğim scripti kullanmak için öncelikle javascript dosyasını ve dolayısıyla jQuery dosyalarını sitemize entegre etmek zorundayız. Önemli bir Not: jQuery 1.4.4 ve sonraki sürümlerinde çalışır.
İndirme Linki;
Script Kullanımı;
NOT: Ordaki Örneği Kullanarak Kod örneği verdim. Lütfen Detaylar için Önizleme Sayfasını ziyaret ediniz.
Öncelikle jQuery ve VerticalShift i sisteme dahil edelim.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script>
Daha sonra kullanmak sistemi aktif hale getirmek için gerekli kodu ekleyelim.
<script type="text/javascript">
$(document).ready( function() {
$(".blind").verticalShift({opacity: .4});
$("#textBoxes > div").verticalShift();
});
</script> Ekleyeceğimiz resimleri ya da yazıları girelim
<div id="notes"> <div>Note One</div> <div>Note Two</div> <div>Note Three</div> </div> ya da <div id="photos"> <div><img src="images/forest.jpg" width="216px" height="216px" /></div> <div><img src="images/ocean.jpg" width="216px" height="216px" /></div> <div><img src="images/desert.jpg" width="216px" height="216px" /></div> </div>
Burda işimiz bittiyse tüm kodlama şöyle görünecektir;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".blind").verticalShift({opacity: .4});
$("#textBoxes > div").verticalShift();
});
</script>
<div id="notes">
<div>Note One</div>
<div>Note Two</div>
<div>Note Three</div>
</div>
ya da
<div id="photos">
<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
</div>
Aynısını görüyorsunuz sıkıntı yok :) Güle Güle Kullanın.
Örnek görmek isterim diyenlere;
Hadi Selametle…