Solved

How to cancel lightbox image re-sizing?

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery slideToggle one div at a time instead of all independently 33 84
html5 1 44
CSS question 16 62
CSS - display the same fonts throughout website. 4 24
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

732 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