Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 25, 2024 at 8:18 pm #1432073
    Dunckley_Design

    I have a series of web page mockups that are set up in a gallery. Everything is working as it should, but due to the proportions 1500px x 2951px, the image displays fairly small and loses its impact. My question is, would it be possible to modify lightbox to display the full width if screen size allows and have the lower portion of the image viewable via scroll within lightbox? I would appreciate anyone insight on how I could make this work.

    January 28, 2024 at 12:50 am #1432250
    Mike

    Hey Dunckley_Design,
    Thank you for your patience, you could try this css to open the magnificPopup full width, adjust to suit for your screen size.

    img.mfp-img {
  width: 1200px !important; 
  max-width: 1200px !important;  
  height: 1976px !important;
  max-height: 1976px !important;
}

    If this doesn’t help please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    February 21, 2024 at 6:32 pm #1435057
    Dunckley_Design

    Hello Mike, thanks for the help. Unfortunately, this isn’t working as expected, and the image is distorted. Maybe I didn’t describe what I wanted to achieve properly. My site has many different sizes of images that will open in Lightbox. I’m looking to allow images to display up to 1200px in width or 100% width of the image if smaller than 1200px. On height, I would like the image to display 100% of the image height and force it into scroll if the image height is greater than the window size. The goal is to display larger images without distortion.

    February 22, 2024 at 12:55 pm #1435125
    Mike

    Hi,
    Please adjust the css snippent above to match your image size.

    Best regards,
    Mike

    February 24, 2024 at 10:37 pm #1435323
    Dunckley_Design

    Unfortunately, that will change things globally, and all my other images will end up distorted.

    February 24, 2024 at 11:00 pm #1435325
    Mike

    Hi,
    You can add the page ID to the css so it will only work on the one page, like this for example:

    .postid-4308 img.mfp-img {
  width: 1200px !important; 
  max-width: 1200px !important;  
  height: 1976px !important;
  max-height: 1976px !important;
}

    Best regards,
    Mike

    February 26, 2024 at 5:05 pm #1435465
    Dunckley_Design

    Thanks Mike, that’s a step in the right direction. Is there a way to add an image ID so you can have varying sizes on the same post?

    February 26, 2024 at 5:57 pm #1435478
    Mike

    Hi,
    Unfortunately I don’t see a image ID added to the lightbox classes. Perhaps a different lightbox will give you better control, you and try out some of the lightbox plugins and disable the built-in lightbox at Enfold Theme Options ▸ Lightbox Modal Window

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.