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

How to add the jquery video gallery with thumbnails to the existing .html page?

Jul 08, 2013

Q: I'd like to buy the Video LightBox but firstly want to make it work. How to paste it to my own page?

A: Please, see how you should install Video LightBox gallery on your own page:

1) Create your gallery in Video LightBox and publish it on a local drive in any test folder.
2) Open index.html file from the saved folder in any text editor
(you'll find 'engine' and 'data' folders in this saved folder also).

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

<head>
...
<!-- Start VideoLightBox.com HEAD section -->

		<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
		<script src="index_videolb/jquery.js" type="text/javascript"></script>
		<script src="index_videolb/swfobject.js" type="text/javascript"></script>

<!-- End VideoLightBox.com HEAD section -->

...
</head>



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

<body>
...
<!-- Start VideoLightBox.com BODY section -->

<div class="videogallery">
<a class="voverlay" href="http://www.youtube.com/v/31aWy9lcyJk?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="How to Add Video to Your Website with Video LightBox .com"><img src="index_videolb/thumbnails/0.png" alt="How to Add Video to Your Website with Video LightBox .com" /><span></span></a>
<a class="videolb" href="http://videolightbox.com">Embed YouTube Video  by VideoLightBox.com v2.1</a>
</div>
<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->

...
</body>



5) You should copy 'data' folder with thumbnails and 'engine' folder with .css and .js files
into the same folder with your own webpage.

Related