Responsive Image in Popup or Modal or Lightbox

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
LJLachance
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Responsive Image in Popup or Modal or Lightbox

Post by 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
User avatar
Pablo
 
Posts: 23450
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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???
User avatar
Pablo
 
Posts: 23450
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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.
User avatar
Pablo
 
Posts: 23450
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by Pablo »

You can set a different lightbox for the image via the 'Settings' button in the Link properties of the image.
LJLachance
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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?
User avatar
crispy68
 
 
Posts: 3056
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by crispy68 »

your test project wont load for me.
User avatar
Pablo
 
Posts: 23450
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by Pablo »

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

Related tutorial:
http://www.wysiwygwebbuilder.com/global_lightbox.html
LJLachance
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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.
User avatar
Pablo
 
Posts: 23450
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by 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
 
 
Posts: 128
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Responsive Image in Popup or Modal or Lightbox

Post by LJLachance »

Thanks, that clears up my confusion, much appreciated
Post Reply