First and foremost, if you do not know what light box is, then I can only assume that you have been living in the dark ages. A lot of sites incorporate this technique to view full sized photos inside of the browser.
Secondly I am going to have to add that this article is about implementing light box. Not creating a light box like plug in.
The first thing that is required for us is to get light box. Where do you get light box. Well the Internet probably has some light box. lets go there.
This is the site that has what we need. If you would like to click that link, upload to the server you will be working on we can get started.
When working with lightbox you will need to include four lines of code into your header. Once added, your header will look like this.
1 2 3 4 | <script src="prototype.js" type="text/javascript"><!--mce:0--></script> <script src="scriptaculous.js?load=effects,builder" type="text/javascript"><!--mce:1--></script> <script src="lightbox.js" type="text/javascript"><!--mce:2--></script> <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" /> |
The next part to using this script requires us to link to an image using it. This can be done by using a rel path.
1 | <a title="Title" rel="lightbox" href="demo-image.jpg">First Image</a> |
Note: There are some things that can go wrong when working with lightbox. The first thing that you need to check is that everything is being properly linked to. There are files from the css that can cause lightbox to not function properly.
Also, if you do not see an image or lightbox appear then you may have to check the JavaScript within the body tag. You may have to modify the on load.