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

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here