A lot of websites on the internet use image code to fit multiple images on a page into a small space. The image code will make the smaller image, or thumbnail, grow to its full size in a box in the middle of the screen. This can be very useful as it allows a web designer to put more images on a page and create better proximity and make the page aesthetically pleasing. Image code is also compatible with pages and sites on mobile devices.
Steps to Successfully Implement Image Code
1. To be able to use image code on a website there are three files that must be downloaded. The first is Jquery, a free javascript file that has the code for the images, slimbox.css, and slimbox.js, the files that will style the box that holds the enlarged image. Eventually there is code from these files that have to be coded into the head section of your page.
2. After downloading these files, they must be placed in your root folder in their respective css or javascript folders. This will allow Dreamweaver easy access to these files and will create a fairly short file path to these files. This step is very important and essential because remote computers, meaning not your own, do not have access to your hard drive and wouldn’t be able to access the full file path.
3. Once the three files are in your root folder, you must place a few lines of code for these files in the head section of your page as mentioned at the end of step 1. The lines of code you will need to add are these:
<script type="text/javascript" src="PATH/jquery.js"></script>
<link rel="stylesheet" href="PATH/slimbox2.css" type="text/css" media="screen">
<script type="text/javascript" src="PATH/slimbox2.js"></script>
To make this code work and be able to access your root folder, you will need to change the word PATH to the name of your root folder, otherwise it will not be able to get to the files in your root folder that enable the image code.
4. Once the files are in your root folder and the code is written in the head section, you need to write the code for the specific image(s) that you want to use the image code on. This is the code that will you need:
<a href="PATH/FULLIMAGE" width="WFI" height="HFI" alt="content" rel="lightbox" title="my caption"> <img src="PATH/THUMBNAIL" width="WTN" height="HTN" alt="small" /></a>
After pasting this code within the image tag in your code, you just need to modify it a little bit. Firstly, you need to change the “PATH/FULLIMAGE” and "PATH/THUMBNAIL" with the right code for your images, such as images/dog_full and images/dog_thumbnail. The only other part of the code that you need to change is the WFI, HFI, WTN, and HTN. You have to change these to the width of the full image, height of the full image, and the width of the thumbnail, and the height of the thumbnail, respectively. After this the image code for your images should make it look like what I have above these steps.
5. Lastly, if you want to be able to navigate through the different images without closing the slimbox, you can add keywords that the names of your images have in common in the rel=”“ part of the code, such as rel=”lightbox-animals”. Keywords will allow you to group images together on your page.
After completing these 5 simple steps, you have learned how to improve your web pages by adding and using image code in Dreamweaver to allow more space for images and other content. Thank you, I hope you have learned from this HTML lesson! Above at the top of the page you can see how the image code should work by clicking on the image.
