I downloaded Inger's Lightbox Image Gallery to use with the Bootstrap 4 framework in Site Designer and have an odd issue. When I change the image reference in the element properties area, the thumbnail stays the same.

I can't find where to fix it within the program itself. After I export it, I can change it in the code and the thumbnail will update there, but I would rather be able to do it in Site Designer before exporting so that I can see how it will look at that stage.

The area in the code that I updated manually:
<source srcset="./images/tall-lighthouse.jpg" media="(min-width: 1200px)"><!--[if IE 9]></video><![endif]-->

Can anyone tell me where to find that in the program? I have checked everywhere that I can think of with no luck.
I would have messaged Inger directly, but didn't see a way to do that here.

Any help would be appreciated!

Hello Serena
I don't quite understand,
You have placed your new image in the images folder in the resources area?

You select an image on the canvas (one of Ingers) right-click and select 'edit image. from the dropdown?
'
It opens the resources, you then select your new image, and hit thr 'SELECT Button'nothing happens??

Well it would seem to me that you need delete Ingers Image and replace it with your desired image, in the images section of the resources area, you then have to change the href link in the images "element' tab to point to that new image.

PHEW sounds complicated to me, and it took me a little while to figure it out.
If you want a step by step demo I can do a quick one (will be silent movie) to show the process

Here it is anyway

https://youtu.be/pBet0L-GXXM

Maybe Inger or someone else has a better solution, and can chip in.

I do picture replacements as follows after putting the replacement images in Resources.

1. I ensure that the breakpoint slider is left of the earliest breakpoint.
2. On the canvas I click on the image to be changed and open the Element panel where
3. I click on the blue pencil icon (that opens Resources) and select the replacement image.

The Component Shop for that gallery shows in the first paragraph how to add pictures, and after doing that one can change the images simply as above.

Frank

The thing is that one has to make sure that in the tab 'Toggle Breakpoints 'Default Mode' is selected

Hi Frank I can't for the life of me see where it says 'How To add Images"

QUOTE from Lightbox Image Gallery-paragraph

Click on an image, and you will see an enlarged version of it. With this gallery it is easy to navigate from one enlarged image to the next. Creating it is easy, and if more or less images are needed, containers with the class name .picture-container can be duplicated or deleted until you have the number you want.

You may be curious about the hidden HTML element called .may-be-deleted. It is there purely to cause Site Designer to place all the necessary files where they are needed in the Project Resources. Once the component has been saved and put to use, you may choose to delete that hidden element.END -QUOTE

And then one still has to change the href link to the new image name to show that new image in the pop up (as per my video demo)

Here is another video demo this time with sound

it\s a bit slow uploading maybe 20 more minutes from time of this post

https://youtu.be/8lVKhUZgP6A

The breakpoints seem to be the issue! When I have it at the lower breakpoints, the correct thumbnail image shows up on the page. On a larger screen, past the final breakpoint, it defaults to the original thumbnail images. My pictures are in the system and the links and properties in the element panel are pointed to the correct thing.

It works fine on smaller screens but changes after 1200 px.
Do you know how to fix this? I really appreciate all of the help!

I solved it by adding a larger breakpoint and editing the elements again in that pane.
Since the breakpoint didn't exist before I made the original edits, they didn't apply to the larger screen.
I am still learning the software and really appreciate everyone's help.

Hi Wayan.

I think it's less confusing than it might seem at first glance.

In Toggle Breakpoints, 'Default Mode' isn't necessary for the things I mentioned. 'Disable All Breakpoints' is the same as being left of the earliest breakpoint (BootStrap 4 is mobile first). Had one set a particular breakpoint in the Toggle Breakpoints menu, it would be immediately clear that the setting should be changed as one could not move the slider left of the set breakpoint.

I had in mind the words "if more or less images are needed, containers with the class name .picture-container can be duplicated or deleted until you have the number you want." The last paragraph of my post shows how to complete the job: "after doing that one can change the images simply as above."

Frank