🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ImagesPreview is an extremely lightweight jQuery image viewer/enlarger/zoomer plugin that displays the large version of an image in a responsive lightbox-like popup window.

image-zoom image-viewer Responsive

Documentation

Galería de imágenes con jQuery muy facil de usar.

DEMO ONLINE

Resumen

  • 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.

Screens


Instalacion y archivos importantes

  • 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


You May Also Like