JQuery Lightbox Yapımı ve Kullanımı

0 yorum

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;
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.
“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.
<!– 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 :)
Bu Bilgiyi Paylaş :

Yorum Gönder

Sitemizde sizlere ilginç gelebileceğine inandığımız her konuda yazılar ve bilgiler paylaşıyoruz. Sitemizde bulabilecekleriniz şöyle:Otomobil,sağlık,blog,haber,backlink,site ekle,banner ekle,html kodlar,dizi,film,ilginç bloglar,blogger için temalar,internet için bilgiler,siyasi görüşler,anketler,yazılımlar,ilginç siteler,ilginç insanlar,mesleklerle ilgili ayrıntılar,forumlar,fikir paylaşımları,yorumlar
 
Siteler: Oyun58 | Kadın Ve Yaşam | Dizi İzle
Copyright © 2011. Bilgi Blog - Tüm Hakları Saklıdır
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger