Lightboxes

Hey Levi, that should work as expected. But let me know if you come across problems :)

@Jan - I could use some help on this too. How should the attributes be assigned in webflow?

Hey, sure. What Lightboxes are you using? And can you give me the Webflow preview link? :)

So I'm using the webflow default lightbox. I have it primarily working, only webflow seems to want to control building the images list. I end up with an empty object in my lightbox 'items' array

{% for image in product.images %}
<div id="w-node-_6bbe0bdc-f74f-ec8e-a120-dc1b1b874b36-c6666a99" class="product-header2_modal-item">
<a href="#" class="product-header2_modal-lightbox-link w-inline-block w-lightbox">
<div class="product-header2_modal-image-wrapper-small">
<img
li-object:src="image.src | img_url: 'master'"
loading="lazy"
alt=""
src="{{ image.src | img_url: 'master' }}"
class="product-header2_modal-image-small"
>
</div>
<script type="application/json" class="w-json">
{
"items": [],
"group": "Product-Images"
}
</script>
</a>
</div>
{% endfor %}

jjason

Well, I found a workaround which is to replace the webflow lightbox link component entirely with a custom embed

JJan

We mostly use PhotoSwipe (https://photoswipe.com/) for image Lightboxes and F'insweet Modals (https://finsweet.com/attributes/modal) for other Lightbox Content, where you can use the forloop.index as the number.

LLevi Benton

This is awesome @jason and @Jan.

LLevi Benton

@jason did you add the attrtibute setting to the Lightbox element or the element within the lightbox? Just curious on the Webflow end.

jjason

I had to remove the webflow lightbox component and instead add my own code embed, like this:

<a
href="#"
class="product-header2_modal-lightbox-link w-inline-block w-lightbox"
>
<div class="product-header2_modal-main-image-wrapper">
<img
li-object:src="product.featured_image | img_url: 'master'"
loading="lazy"
alt=""
src="{{ product.featured_image | img_url: 'master' }}"
class="product-header2_modal-main-image"
>
</div>
<script type="application/json" class="w-json">
{
"items": [
{
"_id": "{{ product.featured_image.id }}",
"origFileName": "{{ product.featured_image.src }}",
"fileName": "{{ product.featured_image.src }}",
"height": "100%",
"url": "{{ product.featured_image.src | img_url: 'master' }}",
"type": "image"
}
],
"group": "Product-Images"
}
</script>
</a>

jjason

and an li-for:inside = image in product.images on the div that holds the images

jjonas.halbstark

Hi @Levi Benton and @jason, webflow lightbox is currently not available with liquify attributes. As jan has mentioned you can build your own.

jjason

Yep, basically what I did, but using my own code element, I was still able to use liquify attributes and make it work.

Welcome to the Liquify Community

Lightboxes