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" 
data-type="iframe" data-about="City" /></a>
</div>

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" 
data-type="iframe" data-about="City" />
</div>

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" 
alt="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
	jpmx.ini({
		'container':'popup-container4',
		'style' :'background-color:rgba(0, 0, 0, 0.85);width:100%;z-index:5',
		'gallery':{
			'animation':'slide',
			'container':'.gallery2',
			'thumbnav':'off',
			'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>';
				jpmx.fullScreen(item.html);
			}
		}
	}); 

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. 👌😜

Comments

Post a Comment

Popular posts from this blog

Build 6 is here

Enjoy! Many improvements: error handling.... slow loading connection discovery and handling due to packet loss, due to ISP backbone problems etc  https://github.com/zavistmedia/jpmpopup/blob/main/pop6.js http://www.jpmalloy.com Please report any problem in comments.
Read more

An example of chaining jQuery Ajax request callbacks

Chaining is a great way to separate your Ajax request callbacks' code and run multiple commands/functions on one element in a row. The fail callback function is a must for finding out if anything goes wrong with the HTTP request. I recommend the below code for alerting your user of anything going wrong with a request. You can have the error posted to any notification system you have. For demo purposes, I am using the vanilla alert function. As a bonus, I have added comments to the code for explanation. $.ajax({     // request information goes here }).done(function(data,textStatus,jqXHR){     // handling of successful requests goes here      // please note this will not fire if there is a failed request, use the always chain for that }).fail(function(jqXHR, exception) {     // handling of bad requests goes here     if (jqXHR.status === 0) {         alert('Could not connect to the s...
Read more

Free Pop-up / Overlay Script

I created a cool little script to help you create custom pop-up screens for your website. For example: http://jpmalloy.com/popup.html All you need to do is add the JavaScript at the bottom of your webpage's source code, before the closing </body> and create a div container like below. Also, don't forget the CSS. There is an ability to create new instances of popups via the JavaScript mode too. View the source code for the example at  view-source:http://jpmalloy.com/popup.html or download the JavaScript file here: http://jpmalloy.com/popup.js Feel free to modify the script and use however you want, but leave credit intact. Thanks.  <div id="popup-container2" data-header="Example 2" data-style="background-color:lightblue;width:80%;margin-top:40px;z-index:2" style="display:none">     <div style="padding:0px 20px 20px 20px;">     content goes here     </div> </div>  If I update the script, I will let ...
Read more