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
- Lightbox'un en son sürümünü indirin ve açın. İNDİR
- İndirdikten sonra dosyaları çıkartın.
css,imgvejsklasörlerini sitenizde scripti kurmak istediğiniz yere atın. Jquery-1.11.0.jsvelightbox.jsbulmak ve bu dosyaların ikisinide yüklemek içinjsklasörünün içine bakın.Lightbox.cssstyle dosyasını bulmak ve yüklemek içincssklasörünün içine bakın.Close.png,loading.gif,prev.pngvenext.pngbulmak içinimgklasörünün içine bakın. Bu dosyalarılightbox.csskullanılır. Varsayılan olarak,lightbox.cssimgadında bir klasör bu görüntüler için arayacaktır.- 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.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
- Kulumu tamamladıktan sonra nasıl kullanacağımıza geçelim.
- 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