How to insert image gallery lightbox in iweb

Q: I am having a lot of trouble implementing my gallery into my iWeb site. Do you have a tutorial, step by step to show a simple way how to install it?

A: See how to install VisualLightBox on your own page:

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 HEAD and BODY sections and paste it inside html snippet in the place where you want to have a gallery, for example:



...
<!-- 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 -->
<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
...
</div>
<!-- End VisualLightBox.com BODY section -->



5)You should upload "index_files" folder with into the same folder with your own webpage.

That's all.

Recent Questions »

Related