Я делаю галерею на сайте.
Есть 7 картинок.
При клике нужно чтобы она увеличилась.
Вот что у меня получилось.
JS
function gal(){
var vp = document.getElementById('vp');
var nz = document.getElementById('nz');
var fon = document.getElementById('fon');
var zakr = document.getElementById('zakr');
var conteiner_2 = document.getElementById('conteiner_2');
x.style.display = "block";
vp.style.display = "block";
nz.style.display = "block";
fon.style.display = "block";
zakr.style.display = "block";
conteiner_2.style.display = "block";
}
HTML
<div onclick="x = document.getElementById('x1'); gal(); "><img src="img\g1.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x2'); gal(); "><img src="img\g2.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x3'); gal();"><img src="img\g3.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x4'); gal();"><img src="img\g4.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x5'); gal();"><img src="img\g5.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x6'); gal();"><img src="img\g6.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x7'); gal();"><img src="img\g7.jpg" width="115px" height="108px" align="left" / ></div>
Я понимаю что код глупый,но он работает
Мне нужно сделать так чтобы картинки можно было листать,как это лучше всего сделать?Без jquery,и уже готовый скриптов?
Я думал что нужно отталкиваться от id картинок(x1 x2 x3),Можно как то сделать что при клике на стрелочку,id картинки изменится на следующий.(нажал на стрелочку,x1 изменилось на x2 и открылась картинка с x2)
Первый раз обращаюсь,простите если тчо не так)