[Lightbox] - szybkie dodawanie wielu zdjęć w HTML

Question

Witam Informatyczną Brać 

koduję w HTML, CSS a teraz zaczynam z JS, ale do rzeczy...

Umieściłem na swojej stronie galerię zdjęć opartą na "Lightbox" . Wszystko działa, w galerii chcę zrobić 3 albumy.

Obecnie fragment bezpośrednio związany z galerią w HTML wygląda tak:

 <a href="img/k1.jpg" rel="kitchen"><img src="img/k1m.jpg"></a> 
				
<a href="img/k3.jpg" rel="playroom"><img src="img/k3m.jpg"></a> 
				
<a href="img/k2.jpg" rel="bedroom"><img src="img/k2m.jpg"></a> 

Teraz pojawia się pytanie - jak sprawić by przy dodaniu np. 100 zdjęć nie musieć wklejać stu rekordów kodu ze ścieżką do zjdęcia?

Answer 1

za pomocą zwykłej pętli takie cuś się raczej robi ;p

function myFunction(){
  var element = document.querySelectorAll('a');
  var number = 1;
  for(var i=0; i<element.length; i++){
    var img = document.createElement('img');
    img.src = 'img/k'+number+'m.jpg';
    number++;
    element[i].appendChild(img);
  }
};
myFunction();

w tym wypadku nie potrzebujesz znacznika img, bo pobrałam wszystkie elementy <a> i do każdego z nich wstawiłam nowy element <img>. Tyle, że jakbyś musiał w alt coś wstawić to jednak ręcznie te <img> lepiej wstawić do HTML.

Comments

Dzięki za odpowiedź ;) ale zależało mi na tym by zrobić to w HTML, z pomocą przyszedł plugin - Emmet

---

Ciekawe