Responsive Image in Popup or Modal or Lightbox

[LJLachance]

First question: Is it possible, using "lightbox", to use one image (example: image 1) on a page that, when clicked, opens a different image (example: image 2)? If this is possible it solves all of my issues. It appears that lightbox will only open the same image as the one that is clicked (example: image 1). If this is possible, where would I put the setting to tell lightbox to open a different image than one that is clicked on? Simply linking the second image does not seem to work.

Second: I'm trying, and looking for "best method", to make the following work.

I have an image on a page intended to be a clickable link. I want to be able to click on (link) the image and bring up (in some type of pop-up, modal, lightbox, or other method) a second, different, image that would then be responsive with the breakpoints I have set. As I have made it work using a couple of different methods, the problem is, the pop up image does not resize (or pop-up responsively) based on the viewport/breakpoint settings.

I have lightbox enabled for the page and have other images on the same page already using lightbox which may effect how I can get my "other image" pop up to work. I've considered simply using a separate page for the second image but that seems to be the hard way around.

I'd be happy with any suggestions that might help me to accomplish this.

Thanks

[Pablo]

Is it possible, using "lightbox", to use one image (example: image 1) on a page that, when clicked, opens a different image (example: image 2)?

1. Insert a standard image
2. Set the link to another image
3. Set the target of the link to 'open in a lightbox'

I have an image on a page intended to be a clickable link. I want to be able to click on (link) the image and bring up (in some type of pop-up, modal, lightbox, or other method) a second, different, image that would then be responsive with the breakpoints I have set. As I have made it work using a couple of different methods, the problem is, the pop up image does not resize (or pop-up responsively) based on the viewport/breakpoint settings.

There are several lightbox add-ons which are responsive.
You can also use events to trigger a dialog or modal layer.

[LJLachance]

1. Insert a standard image
2. Set the link to another image
3. Set the target of the link to 'open in a lightbox'

This is exactly what I've tried several times. Actually, I tried it again after you replied and it worked, once, but without any settings it opened in the wrong size. Once I put in the settings it went back to opening the image I'm using to create the link. I'm using "fancybox" as my lightbox of choice but I've tried the others as well. I've also tried using a "modal" layer - bootstrap and JQueryUI - but the image is not responsive and won't work below a a screen size of 1024.

Checking the page html "inspect" this is what I see...

<div id="wb_Image5">
<a href="images/oak_pagedr_sm.jpg" data-rel="lightbox-fancybox" target="_self" rel="lightbox-fancybox"><img src="images/oak_pagedr_sm.jpg" id="Image5" alt="Page Drive - Satellite Image (from 2019)"></a>
</div>


BUT, in the link I have specified the href to be oak_pagedr_full.jpg and for some reason, it's not getting written to the html???

[Pablo]

If you need assistance then please share a demo project so I can see what you have done.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

Note that fancybox is not responsive.

[LJLachance]

thanks for that - I'm out of time for today but I'll share it as soon as I can. However, if FancyBox is not responsive AND I use it for other items on the same page, how would I use any of the other lightbox types when "fancybox" is set in the page properties. Thanks for the prompt reply.

[Pablo]

You can set a different lightbox for the image via the 'Settings' button in the Link properties of the image.

[LJLachance]

Whether I did it right or not, I don't know BUT, I created a new project and uploaded it to my test server. It is exactly as I have the div in the page I'm having trouble with and it's doing the same thing. One image for the link, and linked to a second image. see it here: http://216.22.21.82/~userlachance/index.html. The wbs file is named test.wbs and was uploaded as well. Did I do this right?

[crispy68]

your test project wont load for me.

[Pablo]

When using the lightbox this was you cannot display another image.

Related tutorial:
http://www.wysiwygwebbuilder.com/global_lightbox.html

[LJLachance]

Thanks for looking at it Pablo. I need to confirm that I understand... IF I use one image on a page and want to display another, different image, by linking the first image and trying to display in a lightbox, I cannot do it?

I think I'm just going to put the image I want on a separate page and link to that - it will be much simpler and avoid me taking so much time in the forum. Thanks for the help, greatly appreciated.

[Pablo]

IF I use one image on a page and want to display another, different image, by linking the first image and trying to display in a lightbox, I cannot do it?

It works, but only when using the default (page) lightbox. The global lightbox (as documented in the tutorial) was designed to use the same image.

[LJLachance]

Thanks, that clears up my confusion, much appreciated