JQuery Lightbox Yapımı , JQuery Lightbox Kullanımı
Websitelerinde çoğunlukla kullanılan çok sık karşımıza çıkan bir olay, JQuery eklentisi olan lightbox ve bunu nasıl kullanabiliriz ona değineceğiz. JQuery Lightbox Yapımı ve Kullanımı hakkında bilgi vereceğiz. Hemen çalışmalara başlayalım.
En başta gerekli dosyalara indirmemiz gerekir aslında indirdiğimiz klasör halinde ve içinde demo bulunmaktadır.
Zip halindeki dosyayı bu adresten indirelim;
En başta gerekli dosyalara indirmemiz gerekir aslında indirdiğimiz klasör halinde ve içinde demo bulunmaktadır.
Zip halindeki dosyayı bu adresten indirelim;
http://leandrovieira.com/projects/jquery/lightbox/
İndirme işlemi bittikten sonra açalım ve bize gerekli olan klasörleri kendi çalışma klasörümüz içine alalım.
İndirme işlemi bittikten sonra açalım ve bize gerekli olan klasörleri kendi çalışma klasörümüz içine alalım.
“css- images – js”
Sıra geldi kendi sitemize entegre kısmına index sayfamızı açalım ve <head></head> etiketleri arasına altta bulunan kodları yapıştıralım.
Burada ne yaptık arkadaşlar gerekli css ve javascript dosyalarımızı çağırmış olduk.
Sıra geldi kendi sitemize entegre kısmına index sayfamızı açalım ve <head></head> etiketleri arasına altta bulunan kodları yapıştıralım.
Burada ne yaptık arkadaşlar gerekli css ve javascript dosyalarımızı çağırmış olduk.
<!– Css Dosyamızı Çağırıyoruz–>
<link rel=”stylesheet” type=”text/css” href=”../style-projects-jquery.css” /><!– Jquery dosyalarını çağırıyoruz –>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />
<!– / Jquery dosyalarını çağırıyoruz –><!– Jquery Açılış eklentisi –>
<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>
Sıra geldi resimin nasıl lightbox olarak açılmasına bunun için açılacak resmi gallery adındaki ID içerisine almak ve açılacağı resme link vermek yani.
<div id=”gallery”>
<a href=”resim/webtroloji.jpg”>
<img src=”resim/webtroloji.jpg” width=”200″ height=”150″ border=”0″/>
</a>
</div>
Kolay Gelsin
Yorum Gönder