¿Estás buscando una herramienta sencilla y efectiva para poder visualizar las miniaturas de tus imágenes de forma rápida y eficiente? ¡Tenemos la solución perfecta para ti! En este artículo te presentamos un Visor de miniaturas de imágenes de JavaScript simple, que te permitirá tener una vista previa de todas tus imágenes en un solo lugar. Ya no tendrás que preocuparte por tener que abrir cada imagen individualmente para saber cuál es la que buscas. ¡Acompáñanos y descubre esta increíble herramienta!
Si realiza una búsqueda en Internet utilizando cualquier motor de búsqueda, encontrará una infinidad de Galerías de imágenes Javascript/jQuery que están disponibles para que los uses en tus proyectos web. Sin embargo, la mayoría de ellos pueden ser más de lo que realmente necesita.
Pueden incluir controles deslizantes elegantes, ventanas emergentes windowsy otras características geniales. En este tutorial, vamos a cubrir cómo construir un visor de miniaturas simple usando JavaScript. No vamos a incluir muchas campanas y silbatos. Este diseño simple está destinado a ser utilizado para proyectos que requieren una solución simple.
Código HTML, CSS y JavaScript
La imagen en la “ventana de vista previa” se puede cambiar a medida que se mueve el mouse sobre las imágenes en miniatura. Si prefiere que la imagen de vista previa se actualice cuando se hace clic con el mouse, simplemente cambie el onmouseover evento a onclick. Así por ejemplo, onmouseover="preview(this)" será cambiado a onclick="preview(this)".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style>
.preview {
width:640px;
height:360px;
}
.thumb {
width:205px;
margin-right:3px;
}
.normal {
border:3px solid #000000;
}
.selected {
border:3px solid #ff0000;
}
</style>
</head>
<body>
<img id="0" class="preview normal" src="" alt="preview" /><br />
<img id="1" class="thumb normal" src="images/mountains.jpg" alt="mountains" onmouseover="preview(this)"/>
<img id="2" class="thumb normal" src="images/desert.jpg" alt="desert" onmouseover="preview(this)"/>
<img id="3" class="thumb normal" src="images/highway.jpg" alt="highway" onmouseover="preview(this)"/>
<script>
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
</script>
</body>
</html>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
