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
Become 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
Creating a CSS block that only applies to printing
By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever. You can, however, add CSS that only applies under certai…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS
Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month5 days, 12 hours left to enroll
627 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.