Spotlight Theme - Lightbox stretches images to fullscreen

[cicada17]

Clicking on an image stretches it to the width of the screen. I would like to keep images in their native resolution.

Adding this:

<style>
.product-media-modal{
max-width: 800px;
margin: auto;
}
</style>

Makes the images the correct size, but it is not centered and the "X" button to close the lightbox is in the wrong place.

[Spac-es]

I don't have access to your store, and I don't know what exactly you want. If you are trying to add a lightbox to your store, this code can serve as a reference considering the problems you supposedly have:

<div class="product-media-modal" id="lightbox">
  <span class="close-button" onclick="closeLightbox()">&times;</span>
  <img src="" id="lightbox-image">
</div>

<img src="image1.jpg" onclick="openLightbox('image1.jpg')" />
<img src="image2.jpg" onclick="openLightbox('image2.jpg')" />

<style>
/* Style for the lightbox */
.product-media-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  overflow: auto;
  text-align: center;
}

/* Style for the image inside the lightbox */
.product-media-modal img {
  max-width: 100%; /* Ensure the image doesn't exceed its original size */
  max-height: 80vh; /* Limit the height to 80% of the viewport height */
  margin-top: 20px; /* Adjust as needed for spacing */
}

/* Style for the close button */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
</style>

<script>
// JavaScript functions to open and close the lightbox
function openLightbox(imageSrc) {
  var lightbox = document.getElementById('lightbox');
  var image = document.getElementById('lightbox-image');
  image.src=imageSrc;
  lightbox.style.display = 'block';
}

function closeLightbox() {
  var lightbox = document.getElementById('lightbox');
  lightbox.style.display = 'none';
}
</script>

[cicada17]

Clicking on an image stretches it to the width of the screen, I want the image to keep it's original size (800 x 800)

[Spac-es]

Try this code:

<style>
.product-media-modal {
  max-width: 800px;
  max-height: 800px;
  margin: auto;
  width: auto;
  height: auto;
}
</style>

[cicada17]

 

Thanks, that works, but the images aren't centered and the button to close the lightbox is all the way in the upper right corner.

[Spac-es]

It's been very difficult for me to tell you exactly what code to use; There are many CSS styles to take into account in addition to knowing how your HTML is structured... But you can try the following code:

<style>
.product-media-modal {
max-width: 800px;
max-height: 800px;
margin: self;
width: self;
height: self;
display: flex;
justify-content: center;
align-items: center;
}
</style>

[cicada17]

I'm using the default Spotlight theme. I've made no changes to the CSS or HTML other than what I'm trying to do here. 

[PageFly-Richard · Accepted solution]

Hi @cicada17 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (min-width: 767px){
.product-media-modal__content {
max-width: 800px;
    max-height: 800px;
    margin: 0 auto;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[cicada17]

That worked, thank you. What do I need to edit to move the close(X) button to the center as well?

[PageFly-Richard]

Hi @cicada17 

Please help me to replace the code above with this one : 

<style>
@media screen and (min-width: 767px){
.product-media-modal__content {
max-width: 800px;
    max-height: 800px;
    margin: 0 auto;
}
.product-media-modal__toggle {
    right: 31rem;
}
}
</style>