5 Eylül 2012 Çarşamba

JavaScript Lightbox Kullanımı

javascript_lightbox
Lightbox ; hemen hemen içerisinde resim barındıran bütün websitelerinde kullanılan oldukça popüler bir javascript uygulamasıdır. Bir başka deyişle Lightbox herhangi bir resmin üzerine tıklayınca resmin büyümesidir.Örnegin yeni bir websitesi tasarlıyorsunuz ve galeri sayfası veya  kücük resimlerden olusan bir alan ayırdınız.Burada sitenize gelen ziyaretçiler sitedeki resimlere tıkladıgında resim büyürerek daha detaylı bir görünüme sahip olur.Bir anlamda sitenizde javascript lightbox kullanarak html sayfanızı  dinamikleştirmiş olursunuz.Şimdi gelelim javascript lightbox kullanımına;

Öncelikle Lightbox u indireceğimiz  siteye giriş yapalım  ve Download kısmından Lightbox v2.51 versiyonunu indirelim . Lightbox u indirdikten sonra lightbox rar lı  dosyasının içinde

  • Css
  • Images
  • Js 
3 tane dosya olacak. Bu 3 dosyayı sitenizin bulundugu kök dizine atınız.Veya kendi klasörlerinizin içine ekleyeniz.Örnegin kendinizin bir css klasörü varsa o css klasörünün içine Css dosyalarını ekleyebilirsiniz.
 Dosyaları ekledikten sonra ; Şimdi Html dosyamıza bu dosyaların yollarını gosterelim.

Öncelikle Css dosyasını yolunu gösterelim ;

  •  <link href="css/lightbox.css" rel="stylesheet" media="screen" />

Sonra Javascript ve JQuery dosyalarını ekleyelim ;


  • <script src="js/jquery-1.7.2.min.js"></script>
  • <script src="js/lightbox.js"></script>
 

Bu dosyaları html sayfamıza cagırdıktan sonra .Lightbox u aktif etmemiz için son kodumuzu ekleyerek lightbox işlemini halletmiş olacağız.

Lightbox efektini aktif etmek için  resme link verirken rel="lightbox" niteligini eklememiz gerekir.

  •  <a href="images/1.jpg" rel="lightbox">

Dreamweaver Cs 5 programında kullandıgım ve sonucu sizinde daha iyi gorebilmeniz acısından bütün kodların bir arada yer aldıgı ekran goruntusunu paylasmak istiyorum. Uygularken herhangi bir hata ile karsılasmamanız acısından ve daha rahat uygulayabilmeniz amacıyla bu resime bakarak lightbox uygulamasını daha rahat kullanabilirsiniz.

javascript_lightbox

Son olarak js lightbox un mucidi Lokesh Dhakar teşşekür ederek yazımı sonlandırmak istiyorum, Daha detaylı bilgi almak için  http://lokeshdhakar.com/ sitesini ziyaret edebiliriniz.

10 yorum:

  1. çok teşekkur ediyorum ama bi sorun var 2 tane resim çıkıyor biri orginal boyut biride tablonun içine yerleştirdiğim ama kodu çalıştıramadım

    YanıtlaSil
  2. rica ederim tam sorunuzu anlayamadım fakat yazının son resminde paylastıgım kod gibi uygularsanız net bir sonuç alırsınız

    YanıtlaSil
  3. çok teşekkür ederim.dediğiniz gibi resimdeki şekilde uyguladım sorunsuz çıktı

    YanıtlaSil
  4. rica ederim işinize yaramasına sevindim , bloguma izleyici olarak katılabilirsiniz.

    YanıtlaSil
  5. Dostum peki birşey sormak link verilmeden yapamaz mıyız? Demişsinki :"Lightbox efektini aktif etmek için resme link verirken rel="lightbox" niteligini eklememiz gerekir." ya vermezsem? Bu plugini kullanabilmek için resimlerde link şartı bulunmuyorsa aynı "rel=lightbox" class'ını images dosyamıza versekde olur mu?

    YanıtlaSil
  6. vermezsen resim lightbox olarak gozukmez,cunki rel = lightbox resim linkini aktif eder.

    YanıtlaSil
  7. Merhaba, lightbox ta resimlerin 1,2,3 ... sıralı şeklindeki açılış yönünü, sağdan sola değiştirmek istersek nasıl bir kod eklenmesi gerekir.?

    YanıtlaSil
    Yanıtlar
    1. Merhaba ; Açıkcası tam anlayamadım sorunuzu , biraz daha detay verebilirseniz yardımcı olabilirm belki

      Sil
  8. merhaba resim 6 dan sonrasını göstermiyor?

    YanıtlaSil
    Yanıtlar
    1. Merhaba ; resim 6 dan sonrası dediğiniz heralde sizin eklediğiniz resimler ; girmiş oldugunuz resimlerin uzantılarına ve isimlerinin doğrulugunu kontrol edin.Herhangi bir sınır yok çünkü.

      Sil

Not: Yalnızca bu blogun üyesi yorum gönderebilir.

//Luckyorange//