zoomm sobre imagen lightroom

___________________________________________

En este tutorial, he incluido dos métodos que puedes usar para agregar opciones de
zoom al sitio de tu cliente:

jQuery Zoom,
Vanilla JavaScript Zoom
Asegúrate de usar solo una de estas opciones, pero no ambas. Estos son dos
tutoriales separados, así que elige el que prefieras. Comencemos.

1. Opciones de zoom a través de jQuery

He optado por una opción vieja, pero buena: jQuery Zoom por Jack Moore. Actualmente
utilizamos este complemento para ampliar las imágenes de productos en el tema
gratuito de Shopify, Debut. Este complemento de zoom no tiene prácticamente ningún
estilo (por lo que puedes personalizarlo tú mismo) y es fácil de implementar. Lo
que más me gusta de este complemento es que tiene un registro de cambios claro y
mucha gente lo utiliza online.

Este complemento es compatible con jQuery 1.7+ en Chrome, Firefox, Safari, Opera e
Internet Explorer 7+.

Si actualmente tienes un nodo configurado para la personalización de temas, puedes

instalar este complemento a través de npm (en inglés) al ejecutar:

npm install jquery-zoom

O puedes descargar el complemento jQuery Zoom.

Para obtener más herramientas, consulta nuestra lista de complementos para Sublime
text favoritos.

1) Agrega jQuery si tu tema no lo tiene todavía

La mayoría de los temas ya tiene una versión de jQuery ejecutándose, y para que
este complemento funcione, necesitas una versión de 1.7+ como mínimo. Esto
significa que con la mayoría de los temas de Shopify probablemente no necesitarás
agregar jQuery, a menos que estés creando el tema desde cero. Si estás creando una
aplicación y usas jQuery, lee la documentación sobre cómo usar jQuery de manera
responsable (en inglés), para evitar conflictos con los temas que ya la incluyen.

Puedes verificar tu tema para ver si ya se ha cargado jQuery, ya sea buscando el

script o yendo a la pestaña Console en tu inspector y ejecutando jQuery.fn.jquery,
que mostrará la versión de jQuery que se está ejecutando el sitio web.

Alternativamente, puedes verificar theme.liquid para ver si se está cargando o si

ya está cargado en un archivo vendor.js dentro del directorio scripts/. Nunca
cargues más de una versión de jQueryon en un sitio web a la vez, ya que aumentará
el tiempo de carga de las páginas y causará una gran cantidad de problemas de
JavaScript en el sitio de tu cliente.

Si necesitas agregar jQuery a tu tema, simplemente agrega la siguiente línea al

encabezado de tu html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"
defer=”defer”></script>
2) Agrega el archivo de complemento zoom.min.js a tu tema
Desde la carpeta del complemento que descargaste, agrega el complemento minificado
jQuery Zoom (jquery.zoom.min.js) a tu carpeta Assets (Recursos). Luego, en tu
archivo theme.liquid que está después de donde se está cargando jQuery, enlaza el
archivo de complemento a tu tema utilizando el siguiente código de Liquid.
Considera agregar una casilla de verificación para incluirlo solo en las páginas de
producto, en vez de en todas las páginas (especialmente si solo se usa en las
páginas de producto):

{% if template contains 'product' %}

<script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}"
defer=”defer”>
{% endif %}
Alternativamente, también puedes agregar el código minificado al final de un
archivo vendor.js si ya tienes un tema que usa uno, para evitar la solicitud
adicional.

3) Edita product.liquid para apuntar a la imagen ampliada

Para que el complemento de zoom funcione, éste agrega HTML dentro del elemento al
que fue asignado. Por lo tanto, el elemento al que está asignado debe aceptar html;
la etiqueta <img> no puede contener otros elementos HTML, por lo que necesitas un
elemento contenedor o de envoltura.

Una de las formas más fáciles de hacer esto es agregar un contenedor alrededor de
la imagen principal de tu producto con JavaScript. En tu plantilla product.liquid,
o si estás usando secciones, agrega las clases image-zoom y data-zoom a la imagen
principal de tu sección de producto. Ten en cuenta que la featured_image (imagen
destacada) de tu producto podría llamarse de otra manera, según el tema que estés
utilizando.

<div class=”image-container”>
<img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}”
alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024',
scale: 2 }}>
<div class="image-details"></div>
</div>
view rawimage-zoom-add-markup.liquid hosted with ❤ by GitHub
También querrás usar Liquid para generar la URL de tu imagen grande (que será tu
imagen ampliada) como un atributo de datos. En este caso lo he llamado data-zoom.
Podremos usar esto más adelante en la inicialización, lo que te permitirá pasar la
URL al método .zoom () como una propiedad de la URL, especificando una versión más
grande de la imagen (en lugar de cargar una grande y reducirla).

También te puede interesar: ¿Qué es la mejora progresiva y por qué debería

importarte? (disponible en inglés)

4) Inicializa el complemento de zoom de manera dinámica

Debido a que hay muchos temas diferentes con una amplia variedad de CSS que podrían
aplicarse a los elementos, el código que está a continuación se activa mediante la
clase image-zoom agregada a la imagen principal del producto. Se agregará un
contenedor <span> con jQuery al que el complemento de zoom agregará el HTML
adicional, lo que crea el efecto de zoom. Esto evitará cualquier problema causado
por los diseños CSS u otros estilos que puedan afectar un contenedor creado
manualmente.

<script>
$(document).ready(function(){
$('.image-zoom')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
 .zoom({
url: $(this).find('img').attr('data-zoom')
});
});
</script>
view rawjquery-image-zoom-code-triggered-by-image-zoom-class.html hosted with ❤ by
GitHub