tengo esto en el html
para las miniaturas
Código HTML :
<main> <div class="container"> <div class="galeriaItem"><img src="img/foto_1.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_2.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_3.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_4.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_5.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_6.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_7.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_8.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_9.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_10.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_11.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_12.jpg" alt=""></div> <div class="galeriaItem"><img src="img/foto_13.jpg" alt=""></div> </div> </main>
para el modal
Código HTML :
<div class="modalGallery" id="objeto"> <div class="botons" onClick="anterior()" id="boton_1"> <img src="img/svg/back.svg" alt="back" width="20px"> </div> <div class="modalItem"> <img class="modalImg" src="" name="Diapositiva"> </div> <div class="botons" onClick="siguiente()" id="boton_2"> <img src="img/svg/next.svg" alt="next" width="20px"> </div> <div class="botons cerrar" onclick="cerrarModal()"> <span class="">x</span> </div> </div>
Quiero que al hacer click sobre cualquier imagen me lance la imagen en pantalla completa. Se me ocurre que puedo crear una variable que lea que numero de img fue seleccionado y que en el src me ponga la ruta que contenga. Pero no sé como hacer eso. ¿Qué deberia usar? o si como lo imagino no funciona ¿cómo puedo hacerlo?
Pd. la función que hace siguiente y anterior lo que hace es modificar el src pero desde la imagen 1 o 0 en este caso, porque en realidad navega desde un array.
Pd. No quiero usar jquery