CoffeeCup - HTML Editor, Flash & Web Design Software

If you've seen the cool ColorBox effect on Webpages like CoffeeCup's Theme Shop and want to add it to a Webpage created in Visual Site Designer, you're in luck! The process is a bit technical, but if you follow these steps, you'll be all set.

1. Download the ColorBox files from colorpowered.com. The files will be in .zip format.
2. Unzip the .zip file to any location on your hard drive. When extracted, it will contain examples as well as the actual ColorBox scripts.
3. View the HTML page in each sample folder to see which style and effect(s) you like best. (For more information about modifying the styles and effects, see the ColorBox documentation on colorpowered.com.)

4. View the source of the page you like best.
5. Find this code and copy it to your clipboard:



<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" /> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>

Note: Not all the samples have a separate style sheet for IE, so the part that starts with <!--[if IE]> and ends with <![endif]--> may not appear in your file. Also, you'll need to change the last script call just a bit. Remove ../ from the last line (it appears just before the word colorbox).

6. Open the Visual Site Designer page where you want the ColorBox to appear.
7. Go to Edit > Edit Header.
8. In the window that appears, paste the code into the Header HTML tab.

9. The following script tells the browser how to display the box when a link is clicked:

<script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".single").colorbox({}, function(){ alert('Howdy, this is an example callback.'); }); $(".colorbox").colorbox(); $(".youtube").colorbox({iframe:true, width:650, height:550}); $(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); $(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"}); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>

We're just going to use the basic effect (elastic transition). You can see that the "example#" lines correspond to the different effects on the example HTML pages (elastic, fade, etc). For a full explanation of each variable, read the instructions at colorpowered.com.

To use this effect, add the following code to the end of the code in the Header HTML tab:

<script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $(".colorbox").colorbox(); }); </script>

The code in the Header HTML tab should now look like this:

<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> <!--[if IE]> <link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" /> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $(".colorbox").colorbox(); }); </script>


10. Click OK to close this window.
11. Go to Settings > Add Files.
12. Click Browse.
13. Find the colorbox folder you unzipped earlier and double-click it.
14. Double-click the folder containing the example you want to add to your page.
15. Double-click the colorbox.css file inside that folder. (If there are two .css files, you can hold down the Shift key to select both.) This takes you back to the Add Files window.

16. Click the Add All button. This transfers the CSS file(s) to the list on the right-hand side of the window.
17. On the right, select the Root folder.
18. Click New Folder and name it colorbox.
19. Click Browse again.
20. Find the colorbox folder you unzipped earlier and double-click it.
21. Double-click the colorbox subfolder.
22. Highlight both .js files (jquery.colorbox.js and jquery.colorbox-min.js).
23. Click Open. This takes you back to the Add Files window.
24. With the colorbox folder on the right selected, click the Add button. This adds the two .js files under the colorbox folder in the right-hand pane.

25. Click New Folder again, and name this one images.
26. Click Browse.
27. Find the images folder located in the example folder you want to use.
28. Select all the images and then click Open. This takes you back to the Add Files window.
29. With the images folder on the right selected, click Add All. This transfers all the images to the right-hand pane, under the images folder.

30. Click OK.

All that rigmarole was just to let the browser know to use ColorBox when we need it, but we still have to tell the page where we want the ColorBox to be displayed. Here's how:

1. Click the HTML tool in the Toolbox on the left-hand side of the program.
2. Use your mouse to draw a box on the page. The box should be at least as big as the link you want to create. When you're done, a window will appear prompting you to add your HTML code.

Note: If you want to use an image as a link, the HTML box should be the size of your image.


3. Type ColorBox Link into the HTML Object field.
4. Add the following code to the Body HTML tab:



<a href="file.ext" rel="example1" title="Caption text">Link Text</a>

Replace file.ext with the name of the file you want to display inside the ColorBox. Leave the rel value (e.g. example1) alone. Any HTML objects that use the same rel value will share the ColorBox, and left/right navigation arrows will automatically be added just outside the contents of the ColorBox. The title value is is text you can use to describe what's being displayed in the ColorBox. It appears just outside the contents of the ColorBox.

Replace Link Text with your preferred link text or, if you prefer to use an image link, the HTML code for an image. Remember, each ColorBox link must have its own HTML box.



If you don't want the links to share the same box, you can use classes instead of the rel value. The class is always called colorbox:

<a href="file.ext" class="colorbox" title="Caption text">Link Text</a>

5. Select Settings > Add Files.
6. Select the Root folder.
7. Click Browse.
8. Find the extra file(s) that you linked to (file.ext) in each HTML box.
9. Click Open.
10. Click Add All.
11. Click OK.

Now you can preview the page to see your ColorBox in action.