Websiteleri için Lightbox Eklentisi
Bu yazımda websiteleri yada WebBloglar için Lightbox sistemini nasıl sitenize uygulayacağınızı anlatacam. Umarım biçok kişiye yardımcı olur. Lightbox birçok web sitesinde gördüğümüz, küçük önizlemesi verilen resimlerin tıklayıp büyütülmesine yarayan, jQuery ile çalışan bir sistemdir. Diğer javascript/jQuery yazılımları gibi farklı türde uygulamaları/örnekleri bulunur. Lightbox bir resme tıkladığınızda arka planı karartma efekti vererek sizin dikkatinizi resme çekmeye çalışmaktır. Web sayfalarındaki resimleri daha esnek ve çekici görüntülemek için kullanılan basit ve kullanışlı bir uygulamadır.

ÖNİZLEME

1. Seçenek

1. ADIM - JAVASCRIPT VE CSS'Yİ YÜKLEME
  1. Lightbox'un en son sürümünü indirin ve açın.
    2. İNDİR

  2. İndirdikten sonra dosyaları çıkartın. css,img ve js klasörlerini sitenizde scripti kurmak istediğiniz yere atın.
  3. Jquery-1.11.0.js ve lightbox.js bulmak ve bu dosyaların ikisinide yüklemek için js klasörünün içine bakın. Lightbox.css style dosyasını bulmak ve yüklemek için css klasörünün içine bakın.
  4. Close.png, loading.gif, prev.png ve next.png bulmak için img klasörünün içine bakın. Bu dosyaları lightbox.css kullanılır. Varsayılan olarak, lightbox.css img adında bir klasör bu görüntüler için arayacaktır.
  5. Aşağıdaki kodları lightbox scriptini kullanmak istediğiniz sayfanın <head>...</head> tagları arasına ekleyin.
<link rel="stylesheet" href="https://www.siteniz.com/css/lightbox.css" type="text/css" media="screen"/>
<script src="https://www.siteniz.com/js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="https://www.siteniz.com/js/lightbox.js" type="text/javascript"></script>

Burda style dosyası olan lightbox.css adlı dosyayı sitenizin ana dizinindeki css adlı klasöre attığınız varsayılmıştır.
jquery-1.11.0.js ve lightbox.js script dosyaları sitenizin ana dizinindeki js adlı klasöre attığınız varsayılmıştır.Dilerseniz değiştirebilirsiniz.

  • Eğer sitenizin ana dizininde img adında bir klasör oluşturup Lightbox'un resim dosyaları olan Close.png, prev.png ve next.png image dosyalarını içine atmadıysanız; sitenizde bulunan başka bir klasöre attıysanız şu değisikligi yapmalısınız;
    css klasöründe bulunan lightbox.css dosyasını Notepad++, Dreamweaver ya da herhangi bir metin editörü ile açın ve aşağıda yazmış olduğum kodları Ctrl-F yardımıyla aratıp bulun.
    • ../img/close.png

    ../img/loading.gif

    ../img/prev.png

    ../img/next.png

    Burda style dosyası olan lightbox.css adlı dosyada Lightbox icin gerekli resimler sitenizin ana dizinineki img klasörü içinde olarak varsayılmıştır. Resimleri başka klasöre attıysanız aşağıdaki gibi değişiklik yapabilirsiniz. Yoksa dokunmayın!

    Örnegin sitenizin ana dizinindeki resimler klasörünüze attıysanız şöyle değiştirin;
    ../resimler/close.png

    2. Seçenek

    Eğer 1. seçenekteki adımları uygulayamadım, yapamadım diyosanız; aşağıdaki kodları <head>...</head> tagları arasına kopyalayıp yapıştırın.
    <link rel="stylesheet" href="https://meftunmede.github.io/stylesheets/lightbox.css" type="text/css" media="screen"/>
<script src="https://meftunmede.github.io/javascripts/jquery-1.11.0.js" type="text/javascript"></script>
<script src="https://meftunmede.github.io/javascripts/lightbox.js" type="text/javascript"></script>

    Bu kadar, Kulumu tamamladık.
    NASIL KULLANILIR

    1. Kulumu tamamladıktan sonra nasıl kullanacağımıza geçelim.
    2. Lightbox'u etkinleştirmek için herhangi bir görüntü bağlantısı için bir data-lightbox özniteliğini ekleyin. Niteliğin değeri, her bir görüntü için benzersiz bir ad kullanın.

    Örneğin:

    <a href="../resimler/resim-1.jpg" data-lightbox="resim-1" data-title="Resmin başlığı"><img src="../resimler/thumb_resim.jpg" width="100" height="40" alt="resmim"/></a>

    İsteğe bağlı: Bir resmin başlığını göstermek istiyorsanız data-title özniteliğini ekleyin.
    Mesela bir albümünüz var, Fethiye'de çekilmiş, albüm isminiz Fethiye olsun ,data-lightbox:Fethiye ve 1. resim Ölüdeniz'de çekilmiş, resmin altında görünecek başlık Ölüdeniz ise data-title:Ölüdeniz yazmanız gerekir. Yani aşağıdaki gibi örnekleyebiliriz.
    <a href="../resimler/resim-1.jpg" data-lightbox="Fethiye" data-title="Ölüdeniz"><img src="../resimler/thumb_resim-1.jpg" width="100" height="40" alt="Ölüdeniz"/></a>
<a href="../resimler/resim-2.jpg" data-lightbox="Fethiye" data-title="Kayaköy"><img src="../resimler/thumb_resim-2.jpg" width="100" height="40" alt="Kayaköy"/></a>
<a href="../resimler/resim-3.jpg" data-lightbox="Fethiye" data-title="Çalış Plajı"><img src="../resimler/thumb_resim-3.jpg" width="100" height="40" alt="Çalış Plajı"/></a>

    İşlem tamam. Artık resimlerinize tıklandığında Lightbox içinde görünecektir.
    Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...
    Tags

    6 Yorumlar

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    1. UnknownMayıs 10, 2016 2:11 ÖS

      güzel çalışma olmuş ellerşnşze sağlık.
      fakat bu resme tıklanınca büyüyen resmin boyutlarını nasıl yükseltebiliriz?

      YanıtlaSil
    2. UnknownHaziran 11, 2016 12:48 ÖÖ

      teşekkürler çok güzel fakat bende küçük resimler çıkmıyor. resim-1 şeklinde kırmızı bir yazı var tıklayınca resim çıkıyor.. ?? nerde hata yaptım acaba

      YanıtlaSil
    3. UnknownAğustos 02, 2016 5:28 ÖS

      bütün dediklerinizi yaptığım halde sadece resim yeni pencere de açılıyor hata nerde olabilir scp dosyarını dosyadan tanıyıtorum ondan mı acaba?

      YanıtlaSil
    4. UnknownMart 07, 2017 2:36 ÖS

      merhabalar herşey güzel fakat diğer resme geçmek için 4 5 kere butona tıkladıktan sonra 2. ci resme geçiyor yardımcı olursanız çok sevinirim .

      YanıtlaSil
    5. UnknownNisan 29, 2017 10:17 ÖÖ

      hocam yapamadım bi yardımcı olursanız sevinirim

      YanıtlaSil
    6. UnknownMayıs 11, 2017 2:50 ÖS

      arkadaşlar yapamayanlar tıklasın

      https://www.youtube.com/watch?v=quiosMhwJQY&list=LLRm0O89OR6bG_QcmV982SXQ&index=1

      YanıtlaSil

    Yorum Gönder

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    Önceki Makale Sonraki Makale