Flag On Roof
Old Barn
Flag On Roof
Old Barn
Adding colorbox pictures to VSD
<a class='example1' href="Flagonroof.jpg" title="Flag On Roof">Flag On Roof</a>
Text link
Paste the code below to the head of the page that you want the colorbox to appear on. (Crtl + Alt + H) or by clicking on "edit" then "Edit Header".
Download the files and unzip the images file.
Add a folder to the
Root of your site and call it colorbox.
Click on the
colorbox folder and click on add files at the bottom of the window. Then browse to the colorbox.css and the jquery.colorbox.js file you just saved and add select both of them.
Click on the
colorbox folder again then click add folder and add new folder inside the colorbox folder and call it images. Click on this new folder then click on add files and browse to the images folder that you unzipped and add the files in it to the images folder you just created in VSD.
Now in the page that you want the colorbox to be on paste the code below into the body html of a HTML box in VSD. Adjust the "Flagonroof.jpg" for the actual name of your picture format and the href for the actual folder that your images are in. Now you can adjust the tile and the text to you liking.
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link media="screen" rel="stylesheet" href="colorbox/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".example1").colorbox();
});
</script>
Picture link
<a class='example1' href="pictures/oldbarn.jpg" style="border: none;" title="This old barn was built in 1909"><img src="pictures/oldbarntn.jpg" width="120" height="80" alt="Old Barn" title="" border="0" /></a>
To use the picture link you will need to add the image to VSD with the add files tool. The code above will make the image appear and be linked to the picture.
Download the needed files by right click save as or save link as.
colorbox.css
jquery.colorbox.js
images
Back to Progrower.coffeecup.com
Step 2
You will have to adjust the href and src according to where you add the folders in VSD.
<a class='example1' href="Flagonroof.jpg" rel="example1" title="Flag On Roof">Flag On Roof</a>
Text link
Picture link
<a class='example1' href="pictures/oldbarn.jpg" rel="example1" style="border: none;" title="Old Barn"><img src="pictures/oldbarntn.jpg" width="120" height="80" alt="Old Barn" title="" border="0" /></a>
To use the picture link you will need to add the image to VSD with the add files tool. The code above will make the image appear and be linked to the picture.
You will have to adjust the href and src according to where you add the folders in VSD.
These two examples will popup individually. Each link needs to be clicked to view the next image.
These two examples will popup individually but are linked to view each image without closing the popup box.
Step 1
Step 3
Step 4
If your looking for a slideshow check this out.