Galería de imágenes con jQuery muy facil de usar.
- Archivos importantes que debémos indexar:
js /
jquery.imagespreview.js : Archivo que contiene nuestro plugin.css /
imagespreview.css : Archivo que contiene los estilos de nuestro plugin.img /
close_window.png : Icono para cerrar la ventana del popup.img /
repead_jque_img.png : Imagen que crea la parte negra del popup.- Uso
<span class="jq_Impreview" data-loadimgjpreview="img/images/img1.jpg">
<img src=" img/image_1.jpg " alt="img">
</span>
data-loadimgjpreview es la URL de la imagen que querémos cargar.
-
Lo primero que requerímos para usar el plug-in es jQuery, así que lo añadirémos antes del final de la etiqueta
"aquí" /body<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -
Ya instalado jQuery en nuestro index; podémos en ese caso instalar nuestra Galería añadíendo los siguientes archivos
js /jquery.imagespreview.js: Archivo que contiene nuestro plugin.
css /imagespreview.css: Archivo que contiene los estilos de nuestro plugin.
img /close_window.png: Icono para cerrar la ventana del popup.
img /repead_jque_img.png: Imagen que crea la parte negra del popup. -
Una vez instalado todo, se debería ver el HTML de la siguiente forma (Leér los comentários del HTML):
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>jQuery Images Preview</title> <link rel="stylesheet" type="text/css" href="css/imagespreview.css"> /*CSS del plug-in*/ </head> <body> <script src="js/jquery.min.js"></script> /*jQuery requerido*/ <script src="js/jquery.imagespreview.js"></script> /*Plug-in requerido*/ </body> </html> -
Ahora solo nos queda implementar la galería con los enlaces de la siguiente forma:
<span class="jq_Impreview" data-loadimgjpreview="img/images/img1.jpg"> <img src=" img/image_1.jpg " alt="img"> </span>
Lo interesante es que lo único que tenemos que hacer es modificar ésta linea => data-loadimgjpreview="img/images/img1.jpg" en la cual se escribe la URL del archivo, puede ser cualquier URL de una imagen, no importa el formato.
y con respecto a la imagen img src="img/image_1.jpg " alt="img" : Es solo un preview para no sobre cargar nuestra pagina web y estámos listos para usarlo.
Por Klooid.com