How to get the lightbox alternative HTML code to put into my website?

Q: Can you explain to me how to get the HTML code to put into my website?
I saved the file, but cannot find the HTML code to put into my website.

A: Please see how should you install VisualLightBox on your own page manually:

1) Create your gallery using VisualLightBox application
2) Publish it on a local drive in any test folder:

- open Gallery->Properties->Publish or click 'Publish' button on the main menu panel;
- 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
(in the same way as you add any other html code on the page), for example:

<head>
...
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
...
</head>



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>
...
<div align="center">
<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/2.jpg" title="2"><img src="data/thumbnails1/2.jpg" alt="2"/></a>
<a class="vlightbox1" href="data/images1/3.jpg" title="3"><img src="data/thumbnails1/3.jpg" alt="3"/>
</a><a class="vlb" style="display:none" href="http://visuallightbox.com">Photo Gallery Creator by VisualLightBox.com v4.8.</a>
</div>
<!-- End VisualLightBox.com BODY section -->
</div>
...
</body>



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

That's all.

Recent Questions »

Related