How can I insert jquery image gallery lightbox in iWeb site?

Q: I have downloaded a free version of VisualLightBox and created a simple gallery to test the product. It plays great on my computer.
I then made a simple page in iWeb. But I cannot seem to be able to add VisualLightBox gallery into this page, no matter what I try.
Can this be done or am I wasting my time on the impossible. Looking forward to your reply.

A: You can use VisualLightBox as standard javascript files.
Please see how should you insert a galley on your own page:

1) Create your slideshow using VisualLightBox.
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 of VisualLightBox 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>
<!-- End VisualLightBox.com HEAD section -->

<!-- Start VisualLightBox.com BODY section id=1 -->
...
<!-- End VisualLightBox.com BODY section -->
...


5) 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.
6) Preview your website in the browser.

That's all.

Recent Questions »

Related