Ana Sayfa Programlama Css Resimlerde Lightbox Kullanımı

Resimlerde Lightbox Kullanımı

3345
0

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

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz