Combining components for displaying images

Wappler General
#1

I have a detail page showing a single record filtered by a URL parameter. Each record might have a number of related images; I’m showing these in a swiper component, with the filenames populated from a query from a second server action file. The large image is determined by a variable which is initially set using this second server action file too. Clicking on the swiper images changes the large image by setting the variable to the current filename (the folders for thumbnail and large images are not set dynamically; they’re included in the image source path). All this works well and was quite straightfoward to set up.

What I would like to do is add an option to click on the one of the large images and open that image in a lightbox, with arrows to show the other images (ie in an image group).

I haven’t used the lightbox component before. I think the normal way to do this would be to click on a thumbnail (ie one of the swiper images), but this won’t work in this case. Is there a way to do this? It may be that the way I’ve set things up so far is not the best solution.

I would be grateful for any suggestions. I’m sorry if this sounds slightly complicated. It’s probably quite a common feature which this screenshot might help explain:

image
image.jpg665×700 243 KB

#2

Hi Tom,
In order to be able to to open a lightbox, you need to wrap your images with a tags. Here’s the docs explaining how to setup the lightbox: Using Lightbox
It’s the same with dynamic links, just assign dynamic href to your a tags.

#3

Thanks Teodor,
I had wrapped the images with a tags, but was getting an error message when I clicked on the image. I was obviously doing something wrong and have made some progress: I can get a clicked image to appear in a light box. But how do I get all of the images to appear, in a group? Eg if I choose ‘imagegroup’ here:

image

Do I have to add ‘imagegroup’ anywhere else? Or is the problem that I’m clicking on a single image, not a group of thumbnails? Is it possible to display all the images in a lightbox group in this case?

#4

If the same group is applied to all your images (a tags), then you will be able to scroll through them using previous/next buttons in the lighbox.
If it’s just a single image on the page, there’s no way to use group (as the image is only one).

#5

In this case, there is a single image being clicked on to show the lightbox:

image

Is there any way - perhaps using a different component (slideshow, another swiper), that I can have a feature where I have two ways of viewing images: to click on the small thumbnail to show the larger image, and to click on the larger image to show a lightbox (showing all the related images)?

#6

(I’ve just noticed your last comment. I didn’t see it earlier.)

#7

Well, not exactly but this is a workaround - you can add your “big” images, using the same group name on your page. Show just one of them and hide the rest, using display:none;.
This will trigger the group by clicking the visible one.

#8

I imagine that will mean downloading the images, even if they’re not displayed - which will add extra ‘weight’ to the page.

I’ll probably have to rethink the way I’m using variables to pass the correct filename from the thumbnails to the larger images. I’ll experiment. Thanks a lot for your help.

#9

@TomD

TomD, could you post the code for the swiper? I’m particularly interested in how you got the large photo to appear when swiping. As you stated: “Clicking on the swiper images changes the large image by setting the variable to the current filename” I cannot seem to get this to work.

Thanks.

#10

Hi @samrich, I’m sorry not to have got back to before. Here’s an example.

The large image:
<img dmx-bind:src="'img-detail/jpegs/' + img_filename" dmx-hide="img_filename != var_current_img.value ? 1: 0" dmx-bind:alt="sc_detail.data.qry_item.title" class="img-fluid">

The thumbnail image in the Swiper:
<div class="swiper-slide"><img dmx-bind:src="'img-small/jpegs/' + img_filename" dmx-on:click="var_current_img.setValue(img_filename)" class="img-fluid" dmx-bind:alt="sc_detail.data.qry_item.title"></div>