Created
April 28, 2013 17:28
-
-
Save psdtohtml5/5477621 to your computer and use it in GitHub Desktop.
jQuery : Multiple Videos In Lightbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"> | |
| |
</a> | |
</div> | |
<div id="overlay2" class="overlay" style="background-image:url('white.png')"> | |
<a id="player" href="video.mp4"> | |
| |
</a> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment