4 Mayıs 2014 Pazar

Websiteleri için Lightbox Eklentisi

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.

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

  3. İndirdikten sonra dosyaları çıkartın. css,img ve js klasörlerini sitenizde scripti kurmak istediğiniz yere atın.
  4. 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.
  5. 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.
  6. Aşağıdaki kodları lightbox scriptini kullanmak istediğiniz sayfanın <head>...</head> tagları arasına ekleyin.
<link rel="stylesheet" href="http://www.siteniz.com/css/lightbox.css" type="text/css" media="screen"/>
<script src="http://www.siteniz.com/js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="http://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="http://meftun-mede.googlecode.com/svn/trunk/lightbox.css" type="text/css" media="screen"/>
    <script src="http://meftun-mede.googlecode.com/svn/trunk/jquery-1.11.0.js" type="text/javascript"></script>
    <script src="http://meftun-mede.googlecode.com/svn/trunk/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...

    Hiç yorum yok:

    Yorum Gönder