Resimlerde Lightbox Kullanımı
Resimlere verilen linklerin sayfa içerisinde arkası gölgeli şekilde açılmasını sağlamak için aşağıdaki işlemleri uygulayabilirsiniz.
Öncelikle buradan ilgili css ve js dosyalarını buradan indirelim.
<head></head> etiketleri arasına ;
<link href=“css/lightbox.css” rel=“stylesheet”>
<script src=“js/lightbox.js”></script>
satırlarını ekleyelim. Bu arada sayfanızda eğer jquery kullanmıyorsanız aşağıdaki satırı da eklemelisiniz.
<script src=“lightbox-plus-jquery.js“></script>
Gerisi html kodlarına kalıyor. Burada 2 örneğimiz var. Birincisinde her link ayrı ayrı açılıyor. İkincisinde ise herhangi bir resme tıkladığınızda resimler arasında ileri geri gidebileceğiniz bir formatta açılıyor.
Birinci Örneğimiz;
<a href="images/Resim1.jpg" data-lightbox="r1" data-title="Başlığımız"><img src="images/Resim1.jpg"></a>
İkinci Örneğimiz;
<a href="images/Resim1.jpg" data-lightbox="Galeri1"><img src="images/Resim1.jpg"></a>
<a href="images/Resim2.jpg" data-lightbox="Galeri1"><img src="images/Resim2.jpg"></a>
data-lightbox Galeri1 olarak verilen tüm resimler tek bir galeri olarak gözükmektedir.
Birden fazla galeri oluşturabilirsiniz.kolay gelsin.
Detaylı bilgi için buradan
