Tıklayınca büyüyen fotoğraf / lightbox | Web bulutu

Tıklayınca büyüyen fotoğraf / lightbox

tıklayınca büyüyen fotoğraf light box

Birçok web sitesinde kullanılan, “Fotoğrafa tıklayınca büyüyen fotoğraf” eklentisini kullanmasını anlatacağım. Bununla alakalı bir çok eklenti var fakat işin içine responsive (mobil uyum) olayını da katmak gerek ve kullanacağımız eklentinin responsive uyumlu olmasına dikkat etmemiz gerek.

İlk olarak BURAYA   tıklayarak eklentimizi indiriyoruz.

Dağıtımın yapıldığı siteyi ve dökümanları incelemek isteyenler de  buraya  tıklasın.

 

Dosyayı indirdikten sonra  masa  üstüne  alıyoruz ve zipten çıkarıyoruz. Karşımıza  aşağıdaki gibi bir ekren gelecek.

lightbox-anlatim1


Burada  kullanmadığımız  öğeler  olacaktır, en azından ben kullanacaklarımı bırakıp, geri kalanını sileceğim.

Şunlar haricinde  diğerlerini temizliyoruz ve examples klasoru içinden index.html dosyasını açarak hala  çalışıp çalışmadığını kontrol ediyoruz. Bende güzel bir şekilde  çalışmaya devam ediyor.

“Scripti sitemize ekledikten sonra examples klasorunu de  silebilirsiniz, boşa yer kaplamasın ve  google boş yere  indexlemesin.


Sıra geldi scriptimizi web sitemizde  kullanmaya 🙂

Web sitemizin en üstüne  “head” etiketleri arasına  alttaki kodları ekliyoruz.

<!--lightbox-->
<link rel="stylesheet" type="text/css" href="js/lightbox/dist/css/lightbox.css">
<script src="js/lightbox/dist/js/lightbox.min.js"></script>
<!--lightbox-->

Dosya yollarında değişiklik yaptıysanız veya yapmadıysanız bile kontrol edin, doğru olmazsa çalışmaz.


Web sitemizin en altına gelip , body etiketinin bitimine şu kodu ekliyoruz.

<!--lightbox-->
<script src="js/lightbox/dist/js/lightbox-plus-jquery.min.js"></script>
<!--lightbox-->

Buraya kadar tamamsak sıra geldi fotoğraflara uygulamaya…

Fotoğrafı a etiketi içine alıyoruz ve bağlantı adresine yine fotoğrafın yolunu yazıyoruz. Son olarak img etiketine scriptin class’ını girdikten sonra olayı bitirmiş oluyoruz ve bunu her fotoğraf için uyguluyoruz.

En başta sitenin döküman adresini vermiştim, orada kontrol ederseniz eğer 2 çeşit kullanma yöntemi var, birisi tek fotoğraf için işlem yapıyor diğeri ise slider şeklinde çalışan bir sistem. Ben slider şeklinde olanını kullandım ve örnek kodlar aşağıdadır.

<a class="example-image-link" href="img/foto-galeri/1.jpg" data-lightbox="example-set" data-title="caption açıklaması"><img src="img/foto-galeri/1.jpg" class="example-image" width="500" height="500"></a>

Bu da tek tek kullanım şeklidir. Dikkat ettiyseniz çoklu kullanımda \ data-lightbox=”example-set” / olarak kullanılırken, tekli kullanımda \ data-lightbox=”example-1″, data-lightbox=”example-2″ / şeklinde 1,2,3,4 diye kaç tane fotoğrafa ekleyecekseniz düzenliyorsunuz.

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="resim açıklama"></a>
 
<a class="example-image-link" href="images/image-2.jpg" data-lightbox="example-2"><img class="example-image" src="images/thumb-2.jpg" alt="resim açıklama"></a>

Bir başka blog yazımda görüşmek dileğiyle.. 🙂

Bir önceki yazımız olan İnput veya formlarda otomatik tamamlamayı devre dışı bırakma başlıklı makalemizde html5 ve İnput hakkında bilgiler verilmektedir.

2 Comments

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir