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

How do I know embed the lightbox flash video into a section of my site?

Dec 02, 2011

Q: I am testing out your Video LightBox gallery and I am having difficulty embedding the gallery in my website.
I have uploaded to my site FTP folder, and after this is where I am confused.
How do I know embed the gallery into a section of my site?

A: You can install Video Gallery on your own web page in 2 ways:

I. Manually:

See how should you install Video LightBox on your own web page:

1) Create your slideshow using Video LightBox.
2) Publish it on a local drive in any test folder:

- open 'Publish' tab;
- select 'Publish to folder', click 'Browse' button and select any local folder
- click 'Publish' button

3) Open index.html file from the saved folder in any text editor (Notepad for example)
or you can:

- open index.html page in any browser
- right click on the page
- select view source of the page.

You'll find 'engine' and 'data' folders in this saved folder also.

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

<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/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
...
</head>



If your CMS doesn't allow you to edit head section, you can add Video LightBox head
section into body section of your page before Video LightBox body section.

5) 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 -->

...
<!-- End VideoLightBox.com BODY section -->
...
</body>



6) Notice, you should copy 'data' folder with images and thumbnails and
'engine' folder with .css and .js files into the same folder with your own webpage
using ftp manager you always use.

7) Preview your website in the browser.

II. Using 'Insert to page' option

- create your gallery;
- open 'Publish' tab;
- select 'Insert to Page';
- click 'open HTML page' and select the page, where you want to install
the gallery;
- click inside the page to select where you want the gallery to appear
and press "Insert Before";
- click 'Publish'.

Try this.

Related