How to customize the fullscreen view

Sirv Media Viewer uses the popular fullscreen effect of filling the viewport when the user clicks to enlarge an image. However, you might prefer to use a modal lightbox effect, whereby part of the page can be seen around the edges of the lightbox. That's also possible with Sirv Media Viewer.

To show a lightbox-style modal popup effect, just add some CSS to your page. As it's CSS, you have full control over the modal style - the amount of padding, the color, opacity and so on.

Try this lightbox modal style by clicking an image to enlarge this demo:

Add a lightbox effect to Sirv Media Viewer

You can achieve that lightbox-style modal effect with CSS below. Simply copy and paste the following CSS styles into your HTML page, to customize the fullscreen view:

.smv-fullscreen-box {
  padding: 3%;
  background: rgb(0 0 0 / 65%);
}

.smv-fullscreen-box .smv {
  background: white;
}

.smv-fullscreen-box .smv .smv-slides-box .smv-component {
  scale: .97;
}

.smv-fullscreen-box .smv .smv-slides-box .smv-component:has(.sirv-zoom) {
  scale: none;
}

Here it is as a fully styled gallery - the HTML, JavaScript and CSS:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/demo/snug/teal-b-throw.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/snug/teal.spin"></div>
  <div data-src="https://demo.sirv.com/demo/snug/sofa-build.mp4"></div>
  <div data-src="https://demo.sirv.com/demo/snug/unpacked.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/snug/teal-shadow.jpg" data-type="zoom"></div>
</div>
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

<style>
.smv-fullscreen-box {
  padding: 3%;
  background: rgb(0 0 0 / 65%);
}
.smv-fullscreen-box .smv {
  background: white;
}
.smv-fullscreen-box .smv .smv-slides-box .smv-component {
  scale: .97;
}
.smv-fullscreen-box .smv .smv-slides-box .smv-component:has(.sirv-zoom) {
  scale: none;
}
</style>

More ways to customize your Sirv gallery

You can customize your gallery in many ways, including modifying the colors, layouts, icons and other settings to suit your style and requirements. Try the Sirv Media Viewer generator to easily apply and preview different customization options (no coding skills required).

Help from Sirv

If you need help configuring a lightbox style modal gallery, please contact the Sirv support team.