Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to cancel lightbox image re-sizing?

Posted on 2016-09-07
1
Medium Priority
?
161 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 27

Accepted Solution

by:
lenamtl earned 2000 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

Industry Leaders: We Want Your Opinion!

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!

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

916 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