Ç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.
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="tab-gallery"> <div class="tab-container"> <img id="expanded-img" src="tab-image-gallery-1.jpg" /> </div> <div class="columns"> <div class="column"> <img id="tab-1" src="tab-image-gallery-1.jpg"/> </div> <div class="column"> <img id="tab-2" src="tab-image-gallery-2.jpg"/> </div> <div class="column"> <img id="tab-3" src="tab-image-gallery-3.jpg"/> </div> <div class="column"> <img id="tab-4" src="tab-image-gallery-4.jpg"/> </div> </div> </div> |
⇒ img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.
Tab Gallery Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<style> #tab-gallery { width: 400px; height: 390px; border: 1px solid black; } #tab-gallery .columns .column { float: left; width: 25%; } #tab-gallery .columns .column img { opacity: 0.8; cursor: pointer; width: 90px; height: 70px; padding-left: 5px; padding-right: 5px; } #tab-gallery .columns .column img:hover { opacity: 1; } #tab-gallery .columns::after { content: ""; display: table; clear: both; } #tab-gallery .tab-container { position: relative; margin-bottom: 20px; } #tab-gallery .tab-container #expanded-img { width: 100%; } </style> |
Tab Gallery Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> function tabGallery(src) { $("#expanded-img").attr("src", src); } $("#tab-1").click(function() { tabGallery($(this).attr("src")); }); $("#tab-2").click(function() { tabGallery($(this).attr("src")); }); $("#tab-3").click(function() { tabGallery($(this).attr("src")); }); $("#tab-4").click(function() { tabGallery($(this).attr("src")); }); </script> |
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.
Yeni bir yazımda görüşmek üzere.
){kind=link}