Bu yazımda news gallery yani haber sitelerini açtığımızda manşet haberlerin bir resim galerisi olarak gösterildiği alanın nasıl yapıldığını anlatacağım.
Haber galerisi yapımı düşünüldüğü kadar zor bir hadise değildir. Web sayfalarımıza haber galerisi eklemek için eklenti aramamıza hiç gerek yok. Html, Css ve Jquery kodları yazarak kendimiz de yapabiliriz.
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 800×300 px olarak ayarladım.
Gördüğünüz gibi haber sitelerinde manşet haberlerin gösterildiği galerinin aynısını yapacağız.
⇒ Galerinin sol üst köşesinde toplam kaç haber olduğunu ve o an aktif olan haberin kaçıncı haber olduğunu görebiliyoruz.
⇒ Galerinin sağında ve solunda olan ok işaretleriyle önceki ve sonraki haberlere geçebiliyoruz.
⇒ Aktif olan resmin hemen altında ilgili haberin başlığını yazabiliyoruz.
⇒ Son olarak tüm haberlerin resimlerini en altta daha küçük boyutta görebiliyoruz.
Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.
Konuyu daha fazla uzatmadan haber galerilerinin yapımına geçelim.
News Gallery Html 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!--news gallery start--> <div class="news-gallery-container"> <div class="myNewsSlides"> <div class="numbertext">1/6</div> <img src="news-gallery-1.jpg" /> </div> <div class="myNewsSlides"> <div class="numbertext">2/6</div> <img src="news-gallery-2.jpg" /> </div> <div class="myNewsSlides"> <div class="numbertext">3/6</div> <img src="news-gallery-3.jpg" /> </div> <div class="myNewsSlides"> <div class="numbertext">4/6</div> <img src="news-gallery-4.jpg" /> </div> <div class="myNewsSlides"> <div class="numbertext">5/6</div> <img src="news-gallery-5.jpg" /> </div> <div class="myNewsSlides"> <div class="numbertext">6/6</div> <img src="news-gallery-6.jpg" /> </div> <!--next and previous buttons--> <a class="prev-news">❮</a> <a class="next-news">❯</a> <!--images text--> <div class="caption-container"> <span id="caption"></span> </div> <!--thumbnail images--> <div class="thumbnail-news"> <div class="column-news"> <img class="demo cursor news-1" src="news-gallery-1.jpg"/> </div> <div class="column-news"> <img class="demo cursor news-2" src="news-gallery-2.jpg"/> </div> <div class="column-news"> <img class="demo cursor news-3" src="news-gallery-3.jpg"/> </div> <div class="column-news"> <img class="demo cursor news-4" src="news-gallery-4.jpg"/> </div> <div class="column-news"> <img class="demo cursor news-5" src="news-gallery-5.jpg"/> </div> <div class="column-news"> <img class="demo cursor news-6" src="news-gallery-6.jpg"/> </div> </div> </div> <!--news gallery end--> |
⇒ img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.
News 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<style> .news-gallery-container { position: relative; max-width: 800px; margin: auto; } .news-gallery-container .myNewsSlides { display: none; } .news-gallery-container .myNewsSlides .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0px; } .news-gallery-container .myNewsSlides img { width: 100%; } .news-gallery-container .thumbnail-news .column-news { float: left; width: 16.66%; } .news-gallery-container .thumbnail-news .column-news .cursor { cursor: pointer; } .news-gallery-container .thumbnail-news .column-news .demo { opacity: 0.6; } .news-gallery-container .thumbnail-news .column-news .demo:hover { opacity: 1; } .news-gallery-container .thumbnail-news .column-news img { width: 134px; height: 70px; } .news-gallery-container .thumbnail-news::after { content: ""; display: table; clear: both; } .news-gallery-container .caption-container { text-align: center; background-color: #222; padding: 15px 16px; color: #fff; } .news-gallery-container .prev-news, .news-gallery-container .next-news { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: #fff; font-weight: bold; font-size: 20px; border-radius: 0px 3px 3px 0px; user-select: none; } .news-gallery-container .prev-news:hover, .news-gallery-container .next-news:hover { background-color: rgba(0, 0, 0, 0.8); } .news-gallery-container .next-news { right: 0px; border-radius: 3px 0px 0px 3px; } .news-gallery-container .active { opacity: 1; } </style> |
News 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> //news Gallery start var newIndex = 1; showNews(newIndex); //next-previous controls $(".prev-news").click(function() { plusNews(-1); }); $(".next-news").click(function() { plusNews(1); }); function plusNews(n) { showNews(newIndex += n); } //thumbnail image controls $(".news-1").click(function() { currentNews(1); }); $(".news-2").click(function() { currentNews(2); }); $(".news-3").click(function() { currentNews(3); }); $(".news-4").click(function() { currentNews(4); }); $(".news-5").click(function() { currentNews(5); }); $(".news-6").click(function() { currentNews(6); }); function currentNews(n) { showNews(newIndex = n); } function showNews(n) { var i; var news = $(".myNewsSlides"); var dots = $(".demo"); if (n > news.length) { newIndex = 1; } if (n < 1) { newIndex = news.length; } for (var i = 0; i < news.length; i++) { news[i].style.display = "none"; } for (var i = 0; i < dots.length; i++) { //dots[i].className.replace("active", ""); dots[i].classList.remove("active"); } news[newIndex - 1].style.display = "block"; dots[newIndex - 1].className += " active"; $("#caption").html(dots[newIndex - 1].alt); } //news Gallery end </script> |
Html, Css ve Jquery kodları yazarak haber galerilerinin yapımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma
Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma
Yeni bir yazımda görüşmek üzere.
){kind=link}