Highlighted

image size issue & retina display.

Enthusiast ,
Feb 17, 2018

Copy link to clipboard

Copied

The touch-touch lightbox gallery is what I am using to display images. I have been making images @2x for the retina display and adjusting the quality to make as low as possible. This is working well, and no real hold up on image loading time.

Here is my dilemma... for example, many pieces have a width of 2300px. And when they display, render smaller than that within the gallery it so appears. I am happy with them.

I now have a more horizontal piece that I have tried time and time again to no avail, even as low as 1536px for width & 1024 for height, but the lightbox seems to automatically pull it wider so you cannot see the fwd and next controls unless you maximize the screen. I intentionally want this image smaller and well within those controls, yet crisp for retina display.  - Why is this specific image just not working? How can I control them to be 'small' and still @2x display?

Thanks for any pointers.

Don't use pixel dimensions, use srcset and vh/vw to control which image is used and the dimensions of the image.

Views

232

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

image size issue & retina display.

Enthusiast ,
Feb 17, 2018

Copy link to clipboard

Copied

The touch-touch lightbox gallery is what I am using to display images. I have been making images @2x for the retina display and adjusting the quality to make as low as possible. This is working well, and no real hold up on image loading time.

Here is my dilemma... for example, many pieces have a width of 2300px. And when they display, render smaller than that within the gallery it so appears. I am happy with them.

I now have a more horizontal piece that I have tried time and time again to no avail, even as low as 1536px for width & 1024 for height, but the lightbox seems to automatically pull it wider so you cannot see the fwd and next controls unless you maximize the screen. I intentionally want this image smaller and well within those controls, yet crisp for retina display.  - Why is this specific image just not working? How can I control them to be 'small' and still @2x display?

Thanks for any pointers.

Don't use pixel dimensions, use srcset and vh/vw to control which image is used and the dimensions of the image.

Views

233

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 17, 2018 0
Adobe Community Professional ,
Feb 17, 2018

Copy link to clipboard

Copied

The plugin you're using was made in 2012 with jQuery 1.7.  The current jQuery core library is 3.2.  So it's not exactly up to date.  

The demo landscape images are all 640 x 425 which is a 4:3 aspect ratio.   To maintain the same aspect ratio, your image would need to be 1536 x 1020; not 1024.  Since I have no experience with Touch Touch, I can't tell you why it behaves as does.  I think for answers to that, you should contact the plugin developer.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 17, 2018 1
LEGEND ,
Feb 18, 2018

Copy link to clipboard

Copied

Don't use pixel dimensions, use srcset and vh/vw to control which image is used and the dimensions of the image.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 18, 2018 1