We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
8 days, 9 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to cancel lightbox image re-sizing?
Posted on 2016-09-07
Hello!
I've got a scanned document image on my test Joomla 3.6.2 site. Here it's URL:
idevsky.com
As you can see, on the right side there I've got a lightbox module (it's actually a Custom HTML module) that has this code in it:
My screen resolution is 1366x768. Full image size is W 583px H 800px. When I click on its icon, it opens up, but it's still like 50% smaller, than it's full original size. I made a printscreen image, that I will be attaching here. From what I was told, people who has Full HD monitors (1920x1080) they see the image in its fullness. So it's probably responsive, depending on the monitor's size. Anyhow, I wish to cancel the responsiveness and re-sizing at all. So on every screen resolution (I'm not talking about mobiles here) one would get a full size image after clicking on its icon.
1.jpg
I've got a scanned document image on my test Joomla 3.6.2 site. Here it's URL:
idevsky.com
As you can see, on the right side there I've got a lightbox module (it's actually a Custom HTML module) that has this code in it:
<p><a class="spotlight" href="images/document2.jpg" data-lightbox="on" data-demo="group:mygroup1" data-spotlight="on"> <img src="images/document2.jpg" alt="demo" width="98" border="0" /></a></p>
My screen resolution is 1366x768. Full image size is W 583px H 800px. When I click on its icon, it opens up, but it's still like 50% smaller, than it's full original size. I made a printscreen image, that I will be attaching here. From what I was told, people who has Full HD monitors (1920x1080) they see the image in its fullness. So it's probably responsive, depending on the monitor's size. Anyhow, I wish to cancel the responsiveness and re-sizing at all. So on every screen resolution (I'm not talking about mobiles here) one would get a full size image after clicking on its icon.
1.jpg
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
1 Comment
Active today
Hi,
I don't know with version you are using.
You can edit css
Just set max-height or max-width but not both!
if you set fixed size in CSS (width, height), all the image will need the same dimension otherwise the image will not resized correctly.
As I can see the page, just inspect the code with chrome (right click) then check the CSS values and do some tests with new values.
I don't know with version you are using.
You can edit css
#lightbox-container-image img { width:auto; max-height:520px; }
Just set max-height or max-width but not both!
if you set fixed size in CSS (width, height), all the image will need the same dimension otherwise the image will not resized correctly.
As I can see the page, just inspect the code with chrome (right click) then check the CSS values and do some tests with new values.
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes. All it takes is a little knowledge of CSS and the possibilities are endless.
First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS.
Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.
Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month8 days, 9 hours left to enroll
734 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.