Javascript Gallery Tutorial
- 1). Place the imageflow.js and imageflow.css in a web accessible directory. For example you could place them directly in the document root, or an "includes" subfolder.
- 2). Copy the paste the following line of code into the head of the html document:
<link rel="stylesheet" href="/links/?u=imageflow.css" type="text/css" /> - 3). Change the href attribute to point to where you placed "imageflow.css" file in the first step. If you placed it in the root directly, you don't need to change anything.
- 4). Copy and paste the following lines of code into the bottom of the page you want to include a gallery on, just before the ending body tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="imageflow.js" type="text/javascript"></script> - 5). Change the "src" attribute from the second line, to point where you placed the imageflow.js file in the first step. If you placed it in the root directly, you don't need to change anything.
- 6). Copy and paste the following code into the body of your html document:
<div>
<img src="path/to/image1.jpg" longdesc="url" alt="Caption" />
<img src="path/to/image2.jpg" longdesc="url" alt="Caption" />
</div> - 7). Add all the pictures you want inside the gallery div from the step above. If you want the user to be taken to an alternate url when they click the image (like a link), then fill in the "longdesc" attribute with a url, otherwise the image tag doesn't need that attribute. Width and height are required to make the gallery work in Internet Explorer.
- 8). Copy and paste the following code into your html document, below the code from Step 4, but before the ending body tag:
<script type="text/javascript">
domReady(function()
{
var gallery = new ImageFlow();
gallery.init({ ImageFlowID: 'galleryId' });
});
</script> - 9). Open your html page in a browser to see your gallery working.
Source...