Fotorama

Name: Fotorama
Brand: Jose Aguilar
SKU: joseaguilarblog-3347
Availability: InStock
Rating: 5 (8 reviews)

Fotoramajs es un plugin jQuery que nos permite tener una galería de imágenes con vistas miniaturas y con la característica principal que funciona en navegadores de escritorio y en los de dispositivos móviles.

Principales características:

Galería de imágenes vistosa, dinámica y con vistas de miniaturas.
Utiliza tecnología estándar para desarrollo web y la biblioteca jQuery.
Funciona en navegadores de escritorio y móviles.
Posee varias opciones para personalizar el comportamiento y la visualización.
Es muy sencilla de agregarla en cualquier desarrollo web.
Es gratis para uso en sitios personales.

Disponer de esta fantástica galería en tu Web es tan sencillo como añadir en el <head> de tu página los estilos, plugin y librería jQuery:

<script src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="../fotorama.css">
<script src="../fotorama.js"></script>

Y en nuestro <body>:

<div class="fotorama" data-width="499" data-height="333">
    <a href="i/01.jpg"><img src="i/thumbs/01.jpg"></a>
    <a href="i/02.jpg"><img src="i/thumbs/02.jpg"></a>
    <a href="i/03.jpg"><img src="i/thumbs/03.jpg"></a>
    <a href="i/04.jpg"><img src="i/thumbs/04.jpg"></a>
    <a href="i/05.jpg"><img src="i/thumbs/05.jpg"></a>
    <a href="i/06.jpg"><img src="i/thumbs/06.jpg"></a>
    <a href="i/07.jpg"><img src="i/thumbs/07.jpg"></a>
    <a href="i/08.jpg"><img src="i/thumbs/08.jpg"></a>
    <a href="i/09.jpg"><img src="i/thumbs/09.jpg"></a>
    <a href="i/10.jpg"><img src="i/thumbs/10.jpg"></a>
</div>

Simplemente son links con imágenes en miniatura dentro de un contenedor con class=»fotorama» que al hacer click se obtiene y se muestra en la imagen grande la imagen original o ampliada.

Puedes visitar página oficial para ver más documentación y descargarte el script.

Ver ejemplos en funcionamiento

Ver módulo para Prestashop