Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
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 3 days ago
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
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight!
There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form. And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS
Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS - Name …
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
Course of the Month9 days, 23 hours left to enroll
722 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.