Page 1 of 1
Image in Fancybox do not adapt to the box size
Posted: Wed Feb 19, 2025 7:20 pm
by Bluesman
Hi wwb proos. I'm setting up a shoping page and using cards for the product presentation and Paypal order functions. The product pic is linked and opened through a Fancybox lightbox. I have modified some settings that works good but can not find out how to get the image adapt to the Fancybox size so it shrinks and enlages when the screen changes in size.
See the testpage I'm working on. It's the first product "KSCSA CAP". if you click it it opens in the Fancybox but the image does not adapt to the frame and down in sizes it get worse. Someone has a script or idea to fix this
https://www.kscsa.com.au/testsite_2024/merchandise.html
Re: Image in Fancybox do not adapt to the box size
Posted: Wed Feb 19, 2025 8:38 pm
by Pablo
I don't think Fancybox supports this functionality.
So, it may be better to use one of the other lightboxes.
https://www.wysiwygwebbuilder.com/lightboxes.html
Re: Image in Fancybox do not adapt to the box size
Posted: Wed Feb 19, 2025 10:20 pm
by BaconFries
Try the following by inserting Between the <head></head> tags* in Page HTML. Note not tested!.
Code: Select all
<style>
/* Add this to your custom CSS file or modify the existing one */
.fancybox-wrap {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.fancybox-content {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.fancybox-title {
word-wrap: break-word;
white-space: normal;
}
</style>
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 2:21 am
by BaconFries
Just another possible way. As before add to Page HTML Between <head></head> tags* Change the *Media Queries* to your own the current are set to 768px and 480px If you need more it can be added.
Code: Select all
<style>
/* Responsive Fancybox Styles */
/* Overriding the Fancybox defaults - VERY IMPORTANT */
.fancybox-wrap {
width: auto !important;
height: auto !important;
}
.fancybox-inner {
width: auto !important;
height: auto !important;
max-width: 90%; /* Adjust as needed */
max-height: 90%; /* Adjust as needed */
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
display: block;
}
/* Media Queries */
@media (max-width: 768px) {
.fancybox-inner {
max-width: 95%;
max-height: 95%;
}
}
@media (max-width: 480px) {
.fancybox-inner {
max-width: 98%;
max-height: 98%;
}
}
/* ... more responsive styles as needed ... */
</style>
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 9:26 am
by Bluesman
Hi Pablo tnx for rapid response. Just wonder... Are all lightboxes still working for ver 20? I had all installed since earlier versions of WWB, but now just the 4 preinstalled was there? Thought because they were deprecated they was gone?
Thanks for your "outstanding" support
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 9:29 am
by Bluesman
BaconFries wrote: Thu Feb 20, 2025 2:21 am
Just another possible way. As before add to Page HTML Between <head></head> tags* Change the *Media Queries* to your own the current are set to 768px and 480px If you need more it can be added.
Code: Select all
<style>
/* Responsive Fancybox Styles */
/* Overriding the Fancybox defaults - VERY IMPORTANT */
.fancybox-wrap {
width: auto !important;
height: auto !important;
}
.fancybox-inner {
width: auto !important;
height: auto !important;
max-width: 90%; /* Adjust as needed */
max-height: 90%; /* Adjust as needed */
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
display: block;
}
/* Media Queries */
@media (max-width: 768px) {
.fancybox-inner {
max-width: 95%;
max-height: 95%;
}
}
@media (max-width: 480px) {
.fancybox-inner {
max-width: 98%;
max-height: 98%;
}
}
/* ... more responsive styles as needed ... */
</style>
Hi Bacon
, tnx for your suggestions. I will try them, because I like the "Fancybox" lightbox. I will report the outcome...
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 9:44 am
by Bluesman
Bluesman wrote: Thu Feb 20, 2025 9:29 am
BaconFries wrote: Thu Feb 20, 2025 2:21 am
Just another possible way. As before add to Page HTML Between <head></head> tags* Change the *Media Queries* to your own the current are set to 768px and 480px If you need more it can be added.
Code: Select all
<style>
/* Responsive Fancybox Styles */
/* Overriding the Fancybox defaults - VERY IMPORTANT */
.fancybox-wrap {
width: auto !important;
height: auto !important;
}
.fancybox-inner {
width: auto !important;
height: auto !important;
max-width: 90%; /* Adjust as needed */
max-height: 90%; /* Adjust as needed */
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
display: block;
}
/* Media Queries */
@media (max-width: 768px) {
.fancybox-inner {
max-width: 95%;
max-height: 95%;
}
}
@media (max-width: 480px) {
.fancybox-inner {
max-width: 98%;
max-height: 98%;
}
}
/* ... more responsive styles as needed ... */
</style>
Hi Bacon
, tnx for your suggestions. I will try them, because I like the "Fancybox" lightbox. I will report the outcome...
Tested both examples... without any luck
but I'm not so good in coding, but saw one error... The second querie was also max-width, should be max-hight I guess so I changed...
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 10:02 am
by Pablo
Are all lightboxes still working for ver 20?
Yes, all lightboxes also work with ver 20
https://www.wysiwygwebbuilder.com/lightboxes.html
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 10:46 am
by Bluesman
Got it Pablo... I installed all lightboxes, but not all appears when setting the lightbox in Page properties, but when adding a Photo Gallery they all appear, so I can see just a few work for my specific usage.
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 11:11 am
by Pablo
but not all appears when setting the lightbox in Page properties
Yes, this is expected behavior. See the note in the tutorial about this.
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 12:33 pm
by Bluesman
Pablo wrote: Thu Feb 20, 2025 11:11 am
but not all appears when setting the lightbox in Page properties
Yes, this is expected behavior. See the note in the tutorial about this.
Thanks Pablo... I shall try to remember
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 12:48 pm
by Bluesman
So... now I chosen the lightbox that I think works best for my purpose "GLightbox"
https://github.com/biati-digital/glight ... md?plain=1
Trying to modify so the lightbox opens in 640 pxl width and auto hight. I use the model that I used for "Fancybox" for the extra settings:
Code: Select all
'data-width':'640px',
'data-height':'auto',
'data-zoomable':'true'
Nothing happens. Shall I use another method for this lightbox? Anyone have an idea
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 1:21 pm
by crispy68
where is data-width, data-height coming from? shouldnt it just be:
https://github.com/biati-digital/glightbox
Re: Image in Fancybox do not adapt to the box size
Posted: Thu Feb 20, 2025 1:38 pm
by Bluesman
Hi crispy, tnx for dropping in. Yes tried that first but not working, so I checked in the codes on the link I had in my post.