Hola, quisiera saber como se puede hacer una galería de fotos o vídeos con html-kit. Mi objetivo es que cuando pinches en la foto te salga la foto y puedas ir pasandola 1 a 1 con flechas, es decir, una galería. Por ejemplo, en una galería de 20 fotos que pinches una y te salga en grande y con las flechas puedas ir pasando las 20. Gracias, un saludo.
// Inicio de la configuración de diapositivas.
// Declaración de variables.
var Fotos; // Lugar donde se almacenara la ruta de la imagen.
var V_max; // Longitud máxima del vector "Fotos".
var aux; // Auxiliar para configuración.
var aux_2; // Auxiliar para programación.
// Inicio de variables.
Fotos = new Array(); // Crea el vector para las fotos.
aux_2 = 0; // Inicia la variable auxiliar de programación con valor 0.
// Rutas de imagenes.
Fotos [0] = "url de la imagen"
Fotos [1] = "url de la imagen"
Fotos [2] = "url de la imagen"
Fotos [3] = "url de la imagen"
Fotos [4] = "url de la imagen"
Fotos [5] = "url de la imagen"
Fotos [6] = "url de la imagen"
// Para mas imagenes solo añadir mas valores "Fotos [] = "url de la imagen"
V_max = Fotos.length; // Obtiene la longitud del vector.
V_max = V_max-1; // Diminuye uno su valor dado que V_max coge un valor a más.
// Fin de la configuración de diapositivas.
// Inicio de la programación de diapositivas.
// Pasar a la siguiente imagen.
function siguiente () {
if (aux_2 == V_max){
aux_2 = 0;
}
else{
aux_2 = aux_2+1;
}
document.images."nombre del name que tengas en la etiqueta img(sin comillas)".src = Fotos[aux_2];
document.href."nombre del name que tengas en la etiqueta img(sin comillas)" = Fotos[aux_2];
}
// Pasar a la siguiente imagen.
function anterior () {
if (aux_2 == 0){
aux_2 = V_max;
}
else{
aux_2 = aux_2-1;
}
document.images."nombre del name que tengas en la etiqueta img(sin comillas)".src = Fotos[aux_2];
}
// Fin de la programación de diapositivas.Este código te permite pasar la imagen despues de apretar el boton que tengas creado.
<div id="boton">
<span onClick="anterior()" class="boton">Anterior</span>
<span onClick="siguiente()" class="boton">Siguiente</span>
</div>
<img src="imagenes/animacion_1.jpg" name="Diapositiva">Asi tengo yo el código dentro de mi html. Si te fijas Tengo dos funciones, una para cada boton y las llamo con el comando "onClick"
Para que amplie la imagen eso lo puedes hacer con HTML y CSS. Si no tambien tienes la opcion de javascript. Lo dejo en tus manos y no perdona no serte de mas ayuda.