Şimdi Ara

HTML Yardım! Divleri ayıramıyorum

Sıcak Fırsatlarda Tıklananlar

Editörün Seçtiği Fırsatlar

Black + Decker HMSCT0001-XJ Evcil Hayvan Tüy Toplayıcı, Rulo, Köpek ve Kedi Tüylerini Toplar https://www.amazon.com.tr/dp/B0CYQ3ZJ9X?ref=ppx_yo2ov_dt_b_fed_asin_title dün paylaşıldı

Stanley Klasik Çelik Shot Bardak ve Matara Seti, Yeşil (Hammertone Green), 0.23 Litre https://www.amazon.com.tr/dp/B07PXKN13V 2 yıl önce paylaşıldı

Tık Hızı Kupon Kampanyası - n11 https://www.n11.com/kampanyalar/tik-hizinda-indirim 8 yıl önce paylaşıldı

Daha Fazla

Bu Konudaki Kullanıcılar: Daha Az

2 Misafir - 2 Masaüstü

5 sn

3
Cevap

0
Favori

164
Tıklama

Daha Fazla
İstatistik

Konu İstatistikleri Yükleniyor

Konuya Özel

Öne Çıkar

0 oy

Sayfa: 1

Giriş

Mesaj

Merhaba, bir şablon üzerinde çalışıyorum. Bir tür albüm kodu kullanacağım ama aynı şablon üzerinde birden fazla albüm. Yani butona tıklayınca albüm açılacak. A öğesi için A albümü B öğesi için B albümü gibi. Ortak script ve style dosyları var. Div, class, id isimlerini değiştiriyorum ancak ilk albüm için yüklediğim resimler diğer albümlerde de çıkıyor, sorunu çözemedim. Divleri ayırmak için ne yapabilirim. Yardımcı olursanız sevinirim.

Aşağıda bahsettiğim şablonun üzerinde oyanama yapılmamış halini atıyorum ikinci albümde resimler birinci albümünkü ile aynı ve kendi resimleri görünmüyor

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
html {
      box-sizing: border-box;
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }
    
    body {
      margin: 0;
    }
    
    .preview {
      width: 100%;
    }
    
    .row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    .row > .col {
      padding: 0 8px;
    }
    
    .col {
      float: left;
      width: 25%;
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
    }
    
    .modal-content {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: auto;
      padding: 0 0 0 0;
      width: 70%;
      max-width: 1200px;
    }
    
    .slide {
      display: none;
    }
    
    .image-slide {
    	width: 100%;
    }
    
    .modal-preview {
    	width: 100%;
    }
    
    .dots {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }
    
    img.preview, img.modal-preview {
      opacity: 0.6;
    }
    
    img.active,
    .preview:hover,
    .modal-preview:hover {
      opacity: 1;
    }
    
    img.hover-shadow {
      transition: 0.3s;
    }
    
    .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    } 
    
    .close {
      color: white;
      position: absolute;
      top: 90px;
      right: 25px;
      font-size: 45px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: #999;
      text-decoration: none;
      cursor: pointer;
    }
    
    .previous,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    .previous:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
</style>
</head>
<body>

<div class="row">
    <div class="col">
       <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." />
    </div>
  </div>

  <div id="Lightbox" class="modal">
  
    <span class="close pointer" onclick="closeLightbox()">&times;</span>
    <div class="modal-content">
      <div class="slide">
        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." />
      </div>
      <div class="slide">
        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." />
      </div>    
      <div class="slide">
        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." />
      </div>
      <div class="slide">
        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road.." />
      </div>
      <div class="slide">
        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad" />
      </div>
      <div class="slide">
        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." />
      </div>
    
      <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
      <a class="next" onclick="changeSlide(1)">&#10095;</a>
          
      
  </div>
  </div>
  
  
  <div class="row">
    <div class="col">
       <img src="https://trart.org/resim/images/2019/10/29/cars1.jpg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="cars1.jpg" />
    </div>
  </div>

  <div id="Lightbox" class="modal">
  
    <span class="close pointer" onclick="closeLightbox()">&times;</span>
    <div class="modal-content">
      <div class="slide">
        <img src="https://trart.org/resim/images/2019/10/29/ELDER_SCROLLS_fantasy_action_rpg_mmo_online_artwork_fighting_skyrim_h_2560x1440.jpg" class="image-slide" alt="ELDER_SCROLLS.jpg"/>
      </div>
      <div class="slide">
        <img src="https://trart.org/resim/images/2019/10/29/city_light_night_drawing_romance_artwork_building_vector_lights_stars_sky_bokeh_1920x1200.jpg" class="image-slide" alt="city_light_night_drawing.jpg"/>
      </div>    
      <div class="slide">
        <img src="https://trart.org/resim/images/2019/10/29/cars1.jpg" class="image-slide" alt="cars1.jpg"/>
      </div>
    
      <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
      <a class="next" onclick="changeSlide(1)">&#10095;</a>
          
      
  </div>
</div>

</body>
</html>
<script>
    let slideIndex = 1;
    showSlide(slideIndex);
    
    function openLightbox() {
      document.getElementById('Lightbox').style.display = 'block';
    };
    
    function closeLightbox() {
      document.getElementById('Lightbox').style.display = 'none';
    };
    
    function changeSlide(n) {
      showSlide(slideIndex += n);
    };
    
    function toSlide(n) {
      showSlide(slideIndex = n);
    };
    
    function showSlide(n) {
      const slides = document.getElementsByClassName('slide');
      let modalPreviews = document.getElementsByClassName('modal-preview');
    
      if (n > slides.length) {
        slideIndex = 1;	
      };
      
      if (n < 1) {
        slideIndex = slides.length;
      };
    
      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      };
      
      for (let i = 0; i < modalPreviews.length; i++) {
        modalPreviews[i].className = modalPreviews[i].className.replace(' active', '');
      };
      
      slides[slideIndex - 1].style.display = 'block';
      modalPreviews[slideIndex - 1].className += ' active';
    };
  </script>
</div>