English  Italiano  Français  Español  Dansk  Deutsch  Deutsch  Português  Suomi 
Video Lightbox

How can I add video gallery in jquery on page?

Jul 15, 2013

Q: How can I add video on my page? Have you any tutorial?

A: To install the Video LightBox into your html page:

1) open the page in your program
2) open html source code of the page
3) add several rows of code:

Copy code for the HEAD section and paste it inside the HEAD section of you own webpage,
for example:

<head>
...
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/videolightbox.css" type="text/css" />
<style type="text/css">#videogallery a#videolb{display:none}</style>
<link rel="stylesheet" type="text/css" href="engine/css/overlay-minimal.css"/>
<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="engine/js/swfobject.js" type="text/javascript"></script>
<!-- make all links with the 'rel' attribute open overlays -->
<script src="engine/js/videogallery.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
...
</head>



Copy code for the BODY section and paste it inside the Body section of you own webpage in the place where you want to have a gallery, for example:

<body>
...
<!-- Start VideoLightBox.com BODY section -->
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/n9-8UsJ-cpc?autoplay=1" title="Manchester United vs Chelsea Penalty shootout 2008">
<img src="data/thumbnails/0.png" alt="Manchester United vs Chelsea Penalty shootout 2008"/><span></span></a><a id="videolb"
href="http://videolightbox.com">Video In A Lightbox by VideoLightBox.com v1.6</a>
</div>
<!-- End VideoLightBox.com BODY section -->
...
</body>



Copy 'data' folder with images and video files and 'engine' folder with .css and .js files into the same folder with your own webpage.

That's all.

Related