Image & Iframe Gallery Lightbox In Vanilla JavaScript – Scpop

Scpop is an easy-to-use JavaScript library that enables you to display images and/or iframe content in a responsive gallery popup.

How to use it:

1. Import the stylesheet Scpop.css and JavaScript Scpop.js.

<link rel="stylesheet" href="scpop.css" />
<script src="scpop.js"></script>

2. Add images and iframes to the page. For iframes, don’t forget to add the class="scpopiframe" to the <a> link.

<div class="myGallery">
  <a href="https://www.youtube.com/watch?v=7UAQ-qOd-Fc" class="scpopiframe">
    Youtube Video
  </a>
  <a href="https://www.google.com" class="scpopiframe" target="_blank">
    Website Example
  </a>
  <a href="1.jpg" title="image 1" target="_blank">
    Image Link
  </a>
  <a href="2.jpg" target="_blank">
    <img src="2.jpg"/>
  </a>
</div>

3. Initialize the Scpop on the top container. That’s it.

window.addEventListener('load', function(){
  scpopLoad('.myGallery');
});

Changelog:

03/14/2023

• v1.0.8: more accessibility

03/09/2023

• v1.0.7: small fixes

03/09/2023

• v1.0.6: added accessibility features

11/15/2022

• v1.0.5: added keyboard control

11/10/2022

• v1.0.4: added support for DOM objects

11/03/2022

• v1.0.3: added close feature when clicking on the image

09/27/2022

• v1.0.2: support for vimeo embeds