"Uszczuplenie" kodu JavaScript - Galeria Zdjęć

Question

Witam,

Proszę o pomoc w "odchudzeniu" poniższego kodu:

document.addEventListener("DOMContentLoaded", function()
{

//---==LIGHTBOX_GALLERY==---//
	
var gall=["01", "02", "03", "04"];
var pic01=["01_01.jpg", "01_02.jpg", "01_03.jpg", "01_04.jpg"];
var lightbox=document.getElementById("lightbox");
var img=document.getElementById("img1");
var gallery=document.getElementsByClassName("gallery");
var lightbox_content=document.getElementsByClassName("lightbox_content")[0];
var small_pic=["min1", "min2", "min3", "min4"];
var bottom=document.getElementsByClassName("bottom_gallery")[0];


gallery[0].addEventListener("click",function(){
lightbox.style.display="block";
lightbox_content.addEventListener("click",closeBox);
img.innerHTML='<img src="img/gallery/'+gall[0]+'/main/'+pic01[0]+'" alt="" />';
mini(0);
});

gallery[1].addEventListener("click",function(){
lightbox.style.display="block";
lightbox_content.addEventListener("click",closeBox);
img.innerHTML='<img src="img/gallery/'+gall[1]+'/main/'+pic01[0]+'" alt="" />';
mini(1);
});

gallery[2].addEventListener("click",function(){
lightbox.style.display="block";
lightbox_content.addEventListener("click",closeBox);
img.innerHTML='<img src="img/gallery/'+gall[2]+'/main/'+pic01[0]+'" alt="" />';
mini(2);
});

gallery[3].addEventListener("click",function(){
lightbox.style.display="block";
lightbox_content.addEventListener("click",closeBox);
img.innerHTML='<img src="img/gallery/'+gall[3]+'/main/'+pic01[0]+'" alt="" />';
mini(3);
});
	
function mini(i)
{
	bottom.style.display="block";
	bottom.innerHTML='<div class="slide"><img src="img/gallery/'+gall[i]+'/min/'+small_pic[0]+'.jpg"></div><div class="slide"><img src="img/gallery/'+gall[i]+'/min/'+small_pic[1]+'.jpg"></div><div class="slide"><img src="img/gallery/'+gall[i]+'/min/'+small_pic[2]+'.jpg"></div><div class="slide"><img src="img/gallery/'+gall[i]+'/min/'+small_pic[3]+'.jpg"></div>';
	
	var slide=document.getElementsByClassName("slide");
	
	slide[0].addEventListener("click",function(){
		img.innerHTML='<img src="img/gallery/'+gall[i]+'/main/'+pic01[0]+'" alt="" />'
	});
	slide[1].addEventListener("click",function(){
		img.innerHTML='<img src="img/gallery/'+gall[i]+'/main/'+pic01[1]+'" alt="" />'
	});
	slide[2].addEventListener("click",function(){
		img.innerHTML='<img src="img/gallery/'+gall[i]+'/main/'+pic01[2]+'" alt="" />'
	});
	slide[3].addEventListener("click",function(){
		img.innerHTML='<img src="img/gallery/'+gall[i]+'/main/'+pic01[3]+'" alt="" />'
	});
}

function closeBox()
{
	lightbox.style.display="none";
}

})

Wszelkie propozycje mile widziane.

Z góry dziękuję.

Pozdrawiam.

Comments

pętle, pętle i jeszcze raz pętle

---

Doskonale to rozumiem, tylko ja jeszcze jestem "na początku drogi" i szczerze powiem chciałbym zobaczyc to właśnie na tym przykładzie - jak to jest zapisywane.

Spędziłem, sporo czasu żeby to zapętlić, ale gubie się gdzieś w logice tego wszystkiego i doszedłem do wniosku, że pora przeanalizować czyjeś rozwiązania.

Z góry dzięki.

Answer 1

document.addEventListener("DOMContentLoaded", function() {

  const gall = ["01", "02", "03", "04"];
  const pic01 = ["01_01.jpg", "01_02.jpg", "01_03.jpg", "01_04.jpg"];
  const lightbox = document.getElementById("lightbox");
  const img = document.getElementById("img1");
  const gallery = document.getElementsByClassName("gallery");
  const lightbox_content = document.getElementsByClassName(
    "lightbox_content"
  )[0];
  const small_pic = ["min1", "min2", "min3", "min4"];
  const bottom = document.getElementsByClassName("bottom_gallery")[0];

  gallery.forEach((el, idx) => {
    el.addEventListener("click", function() {
      lightbox.style.display = "block";
      lightbox_content.addEventListener("click", closeBox);
      img.innerHTML =
        '<img src="img/gallery/' +
        gall[idx] +
        "/main/" +
        pic01[idx] +
        '" alt="" />';
      mini(idx);
    });
  });

  function mini(i) {
    bottom.style.display = "block";
    const html = small_pic.map(
      smallPic =>
        `<div class="slide"><img src="img/gallery/${
          gall[i]
        }${smallPic}.jpg"></div>`
    );

    bottom.innerHTML = html.join("");
    const slide = document.getElementsByClassName("slide");

    slide.forEach((s, index) => {
      s.addEventListener("click", function() {
        img.innerHTML =
          '<img src="img/gallery/' +
          gall[i] +
          "/main/" +
          pic01[index] +
          '" alt="" />';
      });
    });
  }

  function closeBox() {
    lightbox.style.display = "none";
  }
});

tak na szybko cos takiego mozna zrobic.