Lightbox Pictures

Lighbox is a really pretty and professional way to view images. When a image is clicked, it'll pop up in the same window, shadowing the rest of the site.

1. Download the script here.

2. Unzip it, and upload the files to your directory in a file you call lightbox.

3. Paste this code in your < head > tag, and upload to your directory:

<link rel="stylesheet" href="http://yourdomain.com/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

4. Find lightbox.css in your lightbox files, and find this part, and change the urls to where those pictures (prevlabel.gif and nextlabel.gif) are uploaded on your site:

#prevLink:hover, #prevLink:visited:hover { background:
url(http://yourdomain.com/lightbox/images/prevlabel.gif)
left 15% no-repeat; } #nextLink:hover,
#nextLink:visited:hover { background:
url(http://yourdomain.com/lightbox/images/nextlabel.gif)
right 15% no-repeat; }

5. Open up lightbox.js, find this, and change the urls to where ,loading.gif and closelabel.gif are uploaded on your site, then upload these lightbox.css and .js:

fileLoadingImage:
'http://yourdomain.com/lightbox/images/loading.gif',
fileBottomNavCloseImage:
'http://yourdomain.com/lightbox/images/closelabel.gif',

6. Where you want your picture shown, just add this link:

<a href="images/blah.jpg" rel="lightbox">image</a>

When you have a set of images, just add this code and include the category name in square brackets:

<a href="images/blah.jpg" rel="lightbox[hello]" title="caption">image</a>
<a href="images/blah2.jpg" rel="lightbox[hello]" title="caption">image2</a>
<a href="images/blah3.jpg" rel="lightbox[hello]" title="caption">image3</a>
<a href="images/blah4.jpg" rel="lightbox[hello]" title="caption">image4</a>

Or of you want a caption under the image:

<a href="images/blah.jpg" rel="lightbox"
title="caption">image</a>
Warning: include() [function.include]: http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/blackst/public_html/tutorials/lightboxpictures.php on line 49

Warning: include(http://black-stripes.net/footer.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/blackst/public_html/tutorials/lightboxpictures.php on line 49

Warning: include() [function.include]: Failed opening 'http://black-stripes.net/footer.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/blackst/public_html/tutorials/lightboxpictures.php on line 49