How to insert html css image gallery

Q: Hi, I was wondering how to insert Visuallightbox gallery into my page? I can't upload .js files. Need some help.

A: See how should you 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 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>


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

Notice, that if you want to install galleries in Blogger posts and other pages which are
not on your FTP server/domain name and there is no opportunity to upload .js files and images you should upload 'engine' and 'data' folders on your server and use absolute paths for all Visual LightBox files, for example:

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


That's all.

Recent Questions »

Related