How to add jquery gallery download into .shtml, .php, and .asp pages

Q: When you choose to put the code directly in a web page it only will pick up .htm and .html pages. It needs to also pick up .shtml, .php, and .asp pages plus maybe more. I use a lot of .php pages full of standard html code because I can mix in php code when I need it.

A: It's possible to insert VisualLightBox into these pages 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">
...
</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