Html, Css ve JQuery ile Sekmeli Galeri Yapımı (Tab Gallery)

Çoğu zaman web sayfalarımıza tab gallery yani sekmeli galeriler eklemek istediğimizde hazır eklentiler bulmaya çalışırız. Aslında bu konuda çok güzel eklentiler olsada birçoğu bir galeri için gereğinden fazla büyük boyutta dosyalar içeriyor.

İster istemez bunlar da web sayfanızın açılış hızını olumsuz yönde etkiliyor. Bunun önüne geçmek adına bu yazımda Html, Css ve Jquery kodlarıyla sekmeli galerilerin yapımını anlatacağım.

Sekmeli galerilerin yapımı düşünüldüğü kadar zor bir hadise değildir. Yazacağımız kodları kendi bilgisayarınızda uygulayıp bazı yerlerini değiştirerek tarayıcıdaki değişimleri incelemeye çalışın. Böylece kodları çok daha hızlı kavramış olursunuz. 

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

tab-gallery

 Not :  Resimlerin boyutunu 400×300 px olarak ayarladım.

Gördüğünüz gibi E-Ticaret sitelerinin ürün detay sayfalarında bulunan sekmeli galerinin aynısını yapacağız.

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Konuyu daha fazla uzatmadan sekmeli galerilerin yapımına geçelim. 

Tab Gallery Html Kodları 

 ⇒  img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.

Tab Gallery Css Kodları 

Tab Gallery Jquery Kodları 

Html, Css ve Jquery kodları yazarak sekmeli galerilerin yapımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Responsive Menü Yapımı

Yeni bir yazımda görüşmek üzere.

Kaynaklar

https://www.w3schools.com/

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link