Bonjour,
je viens demander un petit coup de pouce pour finaliser mon intégration de Lightbox2 sur Shopify, avec le Thème Debut. C'est le code qui correspond le mieux à ce que je recherche en terme de design pour pouvoir afficher les images produit en grand lorsqu'on clic dessus, et pouvoir les faire défiler en mode galerie. J'ai réussi l'intégration à 95%, avec persévérance malgré le fait que je n'ai pas de grande notion de code (seulement un peu de html/css il y a des années).
Tout fonctionne comme je le souhaites sur les fiches produit à l'exception d'un détail. C'est toujours la première et même image qui s'affiche lorsqu'on clic pour agrandir l'image du produit, peut importe la photo/variante sélectionnée. J'ai beau chercher, je ne trouve pas de solution.
Mon souhait est de garder le fonctionnement de base de Shopify en thème Debut. C’est à dire lorsqu’on clic sur les petites vignettes supplémentaires du produit, elle apparaissent sur l’emplacement principal un peu plus grand. Puis lorsqu’on clic sur cette image principale plus grande que les vignettes, c’est là qu’intervient Lightbox2 et affiche l’image en plein écran avec le fond assombri. Sauf que pour le moment ça affiche en grand toujours la première et même image de base du produit.
Voici mon code :
Dans Layout\theme.liquid, entre les balise <head> et </head> :
{{ "lightbox.css" | asset_url | stylesheet_tag }}Avant la balise </body> :
{{ "lightbox-plus-jquery.js" | asset_url | script_tag }}Dans Sections\product-template.liquid pour l’image featured :
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<!-- START ZOOM PHOTO MAISON 1/2 -->
<a href="{{ featured_image | img_url: 'master'}}" data-lightbox="gallery">
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}">
</a>
<!-- END ZOOM PHOTO MAISON 1/2-->
</div>
</div>Pour les images thumbnails :
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for image in product.images %}
<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
<!-- START ZOOM PHOTO MAISON 2/2 -->
<a href="{{ image.src | img_url: 'master'}}" data-lightbox="gallery"></a>
<!-- END ZOOM PHOTO MAISON 2/2 -->
<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
Si vous avez une idée du code manquant pour régler ce problème, je suis très volontier preneur.
Merci d'avance.
Loïc
