responsive images - lightboxes

12 replies · opened Feb 7, 2021

SstookyFeb 7, 2021

hello semicolon

is there a solution to handle the image sizes in lightboxes in order to reduce the pageload cross devices?

e.g. ...
canvas 6, Lightbox Single Image, http://themes.semicolonweb.com/html/canvas/lightbox.html lines 1542-1552

[
    
        
![attachment](images/portfolio/4/1.jpg)

        
            
                
            
            
        
    
](images/portfolio/4/1.jpg)

in the img tag I use srcset thats fine, state of the art and works cross devices
but in the a tag ``
what solution do you suggest for the href="images/portfolio/4/1.jpg" to have different image sizes respecting the devices/screenwidths?

rgds
stooky

SSemicolon WebSTAFFFeb 8, 2021

Hello,

Unfortunately, this is currently not supported out of the box at the moment and the Lightbox Plugin does not support srcset at the moment for the Lightbox Image Content. However, you can consider using the Lightbox for Inline Content which can display Images with the srcset. Example:
[ch_pre]Open Image

attachment

[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyFeb 9, 2021

thats really a pitty
I haven't looked at the modal yet, will do
but am afraid it will not look like the lightbox

magnificpoupu with some kind of srcset would be really a great
any chance to implement sth like that ... I would even sponsor it if it is not too expensive

rgds
guido

SstookyFeb 9, 2021

sorry just checked the modal code you sent me, and looks not so bad.

is there a chance to have multiple images and a previous/next function in the modal/lightbox, so I can achieve the same look alike as with a normal lightbox?

than I could adapt the code for a carousell of images, and when clicking the image in the carousel have control over the data-src of the images in the modal.

please find attached some screenshots, but I think you already now where my problem is ...

img_1 -> a carousel of images.
img_2 -> the lightbox with previous/next navigation

and I need control over the sizes of the images in the lightbox on different devices.

any chance to get this done with default-canvas functionality/options?

rgds,
guido

SstookyFeb 17, 2021

dear semicolon

sorry to be a pest. I haven't heard from you for 8 days on this request.
canvas is awesome, I have stated it many times and cannot stop to thank your product and the perfect spupport you offer.

responsiveness is a must have of cause for any modern size.
but pageload and code size, are sth. really important too.
not only for the user on his mobile pricing plans bat also for e.g. google page rank the image sizes are sth really important and last not least to become philosophical it is a small contribution to climate change too if we all decrease the traffic the web causes.

I would be really thankful for any solution you could provide to have control over the image srcset for the lightbox images.

you already mentioned the ability of modal images, which is exactly the way to go.
the only problem is the ability to have multiple images like in a lightbox and be able to scroll through the images in the modal.

I have no doubt that it is not the easiest thing to implement this, but on the other hand ... who if not you genies will find a solution for that?

thx, rgds and stay healthy
guido

SSemicolon WebSTAFFFeb 18, 2021

Hello,

We Really Really Apologize for the Delay in replying to your Support Query. We had completely missed and skipped this Ticket by mistake. :/

Currently with the setup we have provided you with using the Inline Lightbox, Galleries are not supported. But we will definitely work on the Main Plugin and try incorporating the srcset option to be available readily. We will release this in an Update soon and will send you a Notification once it is available. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFFeb 18, 2021

Hello,

We have worked on this and appears to be working fine for us. Use the updated js/plugins.min.js File attached. Simply add data-srcset and data-sizes to the data-lightbox Element with your values.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyFeb 18, 2021

you are amazing !!!!!!!!!!!!!!!!

I will test it and come back with feedback.
please live the ticket open, so I can report.

thx a lot
guido

SSemicolon WebSTAFFFeb 18, 2021

Hello,

Very Happy to Help! :)

Yes, please do let us know if you are facing any issues.

Take Care.

SstookyMar 2, 2021

hello semicolon

sorry for the late reply .. corona hit my family as well now :-( ... but wife and parents are quite ok, no hospitalisation needed by now.

I tested the plugins.min.js and as usual when you provide a fix, it works like a charm.
thx a lot, I cannot stop to mention how great your support is !!!

now I did not want to bother you and tried to merge somehow the
plugins-linkscroll-fix you provided
http://support.semicolonweb.com/forums/topic/data-animations/page/2/
into the fix of this thread ... but I did not succeed :-(

ccould you pelase check how to merge these two fixes into one plugins.min.js file?

sorry to be a pest
rgds
guido

SSemicolon WebSTAFFMar 3, 2021

Hello,

Sad to hear about your Family got hit by Covid. We wish for the speediest recoveries for your Wife and Parents.

Very Happy to Help!

The JS File we have provided you with already has both the Plugins already merged. Have you tested the codes on your end? We have just tested this out and appears to be working fine for us. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SstookyMar 3, 2021

oh my god, sorry
the linkscroöö is on one project and the lightbox srcset on the other one
so I did test both on their respective roject and did not recognize that it was already merged ... but I could have imagined that yu guys with your awesome support already took care

will test it on both projects

thx and rgds
guido

SSemicolon WebSTAFFMar 3, 2021

Hello,

No Problem at all!

Please let us know if you are facing any further issues with this.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard