Overlay Version 2 is here with key events and iframe support

The Demo: http://jpmalloy.com/pop3/

Download: http://jpmalloy.com/jpmpop.zip

Esc event added! : ))

Note: I may in the future add non JavaScript support with link fallback. For example,

<div class="item">
    <a href="city.mp4"><img src="city.png" alt="City" data-file="city.mp4" data-id="video-1" 
="iframe" data-about="City" /></a>

Version 1 had swipe and drag events already.

Also, I have added iframe type support. Just add the data-type="iframe" with your data-file="iframe src" and you got your new iframe pop-up!

for example,

<div class="item">
    <img src="city.png" alt="City" data-file="city.mp4" data-id="video-1" 
="iframe" data-about="City" />

Now with new data width, height, and allow for youtube videos. 

These work just for iframes right now, but I will add them for video
and image elements soon.

<img src="https://i.ytimg.com/vi/bBaqSID9VP8/hqdefault.jpg" 
Aerosmith - Crazy" data-file="https://www.youtube.com/embed/bBaqSID9VP8"
data-id="YT-1" data-type="iframe" data-about="Aerosmith - Crazy"
data-allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" data-width="560px"
data-height="315px" /> 
// New ini interface
'style' :'background-color:rgba(0, 0, 0, 0.85);width:100%;z-index:5',
'onclick': function(item) {

        // a thumbnail was clicked, do something
        // use ajax here to pull/get some comments about the image or video etc
// item.id contains the id of the thumbnail clicked

item.data = '<div style="padding:20px"><h2>Comments for item '+(item.index + 1)+'</h2><p>comment interface can go here</p></div>';
item.html = '<div class="wrap-container"><div class="left-column" id="left-column"></div><div id="right-column" class="right-column">'+item.data+'</div>';

Next update I will be condensing the code, like getElementById and adding a new loading function for all types that will be more robust.

Note: version 1 had a small bug that interfered with the video controls, because of the arrow navigation div layer. You can change this with a simple CSS change. This is now fixed for version 2.

Share with others. 👌😜


Popular posts from this blog

Free Pop-up / Overlay Script

Version 3 is here... new configuration