Solved

How to cancel lightbox image re-sizing?

Posted on 2016-09-07
1
90 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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 …

860 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