Skip to content

Instantly share code, notes, and snippets.

@psdtohtml5
Created April 28, 2013 17:28
Show Gist options
  • Save psdtohtml5/5477621 to your computer and use it in GitHub Desktop.
Save psdtohtml5/5477621 to your computer and use it in GitHub Desktop.
jQuery : Multiple Videos In Lightbox
Multiple videos in Lightbox / Overlay
Dependencies:
http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js
http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js
The CSS
<style>
.overlay {
background:url(white.png) no-repeat;
padding:40px;
width:576px;
display:none;
}
.close {
background:url(close.png) no-repeat;
position:absolute;
top:2px;
display:block;
right:5px;
width:35px;
height:35px;
cursor:pointer;
}
a.player {
display:block;
height:450px;
}
</style>
The JavaScript
<script>
jQuery(document).ready(function($) {
$(function() {
//setup overlay actions to anchors
$("a[rel]").overlay({
onLoad: function(content) {
// find the player contained inside this overlay and load it
this.getOverlay().find("a.player").flowplayer(0).load();
},
onClose: function(content) {
$f().unload();
}
});
// install flowplayers
$("a.player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
});
});
</script>
The HTML
<a rel="overlay1" href="#">
<img src="image1.png" />
</a>
<a rel="overlay2" href="#">
<img src="image2.png"/>
</a>
<div id="overlay1" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
&nbsp;
</a>
</div>
<div id="overlay2" class="overlay" style="background-image:url('white.png')">
<a id="player" href="video.mp4">
&nbsp;
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment