Solved

How to cancel lightbox image re-sizing?

Posted on 2016-09-07
1
83 Views
Last Modified: 2016-09-12
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:

<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>

Open in new window


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
0
Comment
Question by:Member_2_7970041
1 Comment
 
LVL 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 41793992
Hi,

I don't know with version you are using.

You can edit css
#lightbox-container-image img { width:auto; max-height:520px; }

Open in new window

change the value to what you need.

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.
0

Featured Post

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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…
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 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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question