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.
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.
|
1 2 3 4 5 6 7 8 |
<!--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.
|
1 2 3 4 5 6 7 |
<!--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.
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 6 7 |
<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.. 🙂
çok teşekkürler.
Test eden kullanan ve sıkıntı yaşayan oldu mu?
resimi büyütünce, resimi sayfanın en altına atıyor uğraştım düzeltemedim .s