Hackett Irish Soccer 2009
Hackett Irish Soccer
Cottage pictures
Adding colorbox flash content to VSD
<a class='example5' href="myccwebvideoplayer.html" title="My Flash Movie">My flash movie</a>
Text link
Step 1 Make your video in CC's Web Video Player. Make your video with no skin.
Step 2 Add the needed files to VSD
The easiest way to get this done is to use the flash tool on the left hand panel of VSD. Just add the flash to the page as if your going to embed it then delete the html box created by the add flash tool. The files for the video should be retained. You will have to add the flash video html file generated by the web video player by hand. Just click on the root in the add files and browse to the flash video html file.
After you unzip the files add the colorbox.css file in the example 5 folder to the Root folder in VSD.
Now add a folder to VSD and name it images. Now browse to the colorbox files you downloaded and add all the files inside the images folder that were with example 5.
Add a file to VSD called colorbox and browse to the files that you downloaded and inside the folder called colorbox should be two files add them both. jquery.colorbox-min.js and jquery.colorbox.js
Step 3 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 "myccwebvideoplayer" for the actual name of your flash video. Now you can adjust the tile and the text to you liking.
Step 4 Add the folowing code to the head of your page by clicking on "edit" then "Edit Header".
<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.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
$(".example5").colorbox();
});
</script>
Picture link
<a class='example5' href="myccwebvideoplayer.html" style="border: none;" title="My Flash Movie"><img src="soccerball.jpg" width="80" height="80" alt="This is my movie" 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 video.
Download the needed files from colorbox
Here's an example using the same technic to embed Coffeecup Photo gallery.
Back to Progrower.coffeecup.com