En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

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.

Ö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

  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://meftunmede.github.io/stylesheets/lightbox.css" type="text/css" media="screen"/>
    <script src="http://meftunmede.github.io/javascripts/jquery-1.11.0.js" type="text/javascript"></script>
    <script src="http://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...

    3 yorum:

    1. 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. 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. 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

    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!

     
    • Meftun Apart

      Meftun Apart Fethiye

      Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

    • Meftun Mede Blogger

      MEDE Blogger Tema Yardım

      Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

    • Sitemap sayfası oluşturma

      Sitemap sayfası oluşturma

      Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

    • hit arttırma

      Sitenizin hitini arttırın!

      Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

    • internetten para kazan

      İnternetten para kazan !

      Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!