Efecto Zoom con Zoomify



Efecto Zoom con Zoomify, es un plugin que muestra imágenes con un efecto único, debido a que este plugin muestra el efecto zoom que sin duda es algo atractivo al
usuario final, puedes ver un ejemplo para que tengas una idea clara de como funciona: http://indrimuska.github.io/zoomify/ en este mismo enlace te puedes encontrar varios ejemplos de imágenes que al presionarlos te muestran la imagen en zoom.

Implementar el plugin es muy sencillo ya que lo que el plugin requiere es crear referencias y utilizarlas, podemos ver en la siguiente explicación como integrarlo.

Paso 1.- Integra las referencias a los archivos css


<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">

Paso 2.- Crear las etiquetas, pueden ser etiquetas img o divs.

<img src="http://yourshot.nationalgeographic.com/u/ss/fQYSUbVfts-T7Ehj8_lPSALDyndvMSNW9paJ9-zKyhc9WOHwTz_HJZV1PUjKLmZxxfsKxzFlKTfmZvJDie7bugKZJhz0j4GfrgatGr1FIhSZBX_3kPYK3nG_dcxSuosO98066GwetCM2h6dHQzncc5rh_NLVATYunSKedq1kLzVM/" class="img-responsive img-thumbnail zoomify" style="transform: scale(1) translate(0px, 0px);">

Paso 3.- Crear el script que convertirá a todas las imágenes.

$('img.myImage1').zoomify(); // Default settings

Puedes configurar tambien otras opciones que estan disponibles en este plugin, como por ejemplo zoomIn y zoomOut, ademas de esas opciones hay eventos que el plugin maneja: zoom-in.zoomify, zoom-in-complete.zoomify, zoom-out.zoomify, zoom-out-complete.zoomify

http://indrimuska.github.io/zoomify/

You may also like...