resimlerin animasyonlu açılması – İNTERNET ALEMİ https://www.internetalemi.net İnternet, Bilişim, Yazılım Haber ve Günlüğü Mon, 15 May 2017 10:11:43 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 https://www.internetalemi.net/wp-content/uploads/2017/01/cropped-internet-alemi-logo-32x32.png resimlerin animasyonlu açılması – İNTERNET ALEMİ https://www.internetalemi.net 32 32 Resimlerde Lightbox Kullanımı https://www.internetalemi.net/resimlerde-lightbox-kullanimi/ https://www.internetalemi.net/resimlerde-lightbox-kullanimi/#respond Tue, 18 Apr 2017 05:42:39 +0000 http://www.internetalemi.net/?p=3472 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 […]

Resimlerde Lightbox Kullanımı yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> 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

Resimlerde Lightbox Kullanımı yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/resimlerde-lightbox-kullanimi/feed/ 0