scrolling for tall vertical image, control of width

  • hi. I’ve been working on this problem over days without success.
    I’ve been trying to make it work with “WF Magnific Lightbox” but the question is valid for any lightbox plugin–and I’ve tried 7 or 8 of them and have the same problem with all.

    I am looking for a way to view very tall images without them being resized to fit the screen, but I want to control the width. These are scans of newspaper articles, for example 1700px wide, 7200px tall. I want the lightbox to pop up with a specified width (say 700px or 50% or whatever) but either the lightbox height has to be the full image height (e.g. 7200px) or if it’s less then it should be a viewport onto the full image height; there should be a vertical scrollbar.

    The current problem is that the image is always 100% of the screen width. Vertical scrolling is possible, which is good, but I cannot get any control of the width. I’ve tried modifying magnific-popup.css (and ran my css through csslint.net to check for errors). I tried to constrain the width by adding both a “width” and “max-width” property on nearly every css selector but the lightbox image I see always appears to be 100% wide. I tried playing with padding but then the image suddenly appeared without the lightbox, just as a plain jpg in a browser window, no site context around it.

    I have seen this: https://github.com/dimsemenov/Magnific-Popup/issues/792
    but it doesn’t solve my problem.

    If there’s a way of doing this with another plug-in or any other way I’m open to suggestions.

    This is my first post so I hope I did it correctly.

Viewing 1 replies (of 1 total)
  • Thread Starter tightywritey

    (@tightywritey)

    I see that if I open the page with the link to the image I want to appear in the lightbox and change the live page’s html/css I can easily get the lightbox image to _not_ fill the whole width of the screen. I can just add a style=”max-width:50%;” to narrow it down. Apparently changes in width properties in magnific-popup.css do not propagate to the lightbox that’s shown on the actual web page. Is there some way of forcing that they do, or somewhere else to change the properties that will work? (I did try adding the !important modifier on the changes I made in magnific-popup.css).

Viewing 1 replies (of 1 total)
  • The topic ‘scrolling for tall vertical image, control of width’ is closed to new replies.