Image in Fancybox do not adapt to the box size

Bluesman · Post by **Bluesman** » Wed Feb 19, 2025 7:20 pm

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

Post by **Pablo** » Wed Feb 19, 2025 8:38 pm

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

BaconFries · Post by **BaconFries** » Wed Feb 19, 2025 10:20 pm

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>

BaconFries · Post by **BaconFries** » 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>

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 9:26 am

Pablo wrote: ↑Wed Feb 19, 2025 8:38 pm 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

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

Bluesman · Post by **Bluesman** » 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...

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 9:44 am

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...

Post by **Pablo** » Thu Feb 20, 2025 10:02 am

Are all lightboxes still working for ver 20?

Yes, all lightboxes also work with ver 20

https://www.wysiwygwebbuilder.com/lightboxes.html

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 10:46 am

Pablo wrote: ↑Thu Feb 20, 2025 10:02 am
Are all lightboxes still working for ver 20?
Yes, all lightboxes also work with ver 20

https://www.wysiwygwebbuilder.com/lightboxes.html

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.

Post by **Pablo** » 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.

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 12:33 pm

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

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 12:48 pm

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

crispy68 · Post by **crispy68** » Thu Feb 20, 2025 1:21 pm

where is data-width, data-height coming from? shouldnt it just be:

Code: Select all

'width':'640px',
'height':'auto'

https://github.com/biati-digital/glightbox

Bluesman · Post by **Bluesman** » Thu Feb 20, 2025 1:38 pm

crispy68 wrote: ↑Thu Feb 20, 2025 1:21 pm where is data-width, data-height coming from? shouldnt it just be:
Code: Select all
'width':'640px',
'height':'auto'
https://github.com/biati-digital/glightbox

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.

www.wysiwygwebbuilder.com

Image in Fancybox do not adapt to the box size

Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size

Re: Image in Fancybox do not adapt to the box size