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:
<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>
  1. Open the Visual Site Designer page where you want the ColorBox to appear.
  2. Go to Edit > Edit Header.
  3. In the window that appears, paste the code into the Header HTML tab. 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.
  4. To use this effect, add the following code to the end of the code in the Header HTML tab. It 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(); $(".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" /> <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> 
  1. Click OK to close this window.
  2. Go to Edit > Add Files.
  3. With the {Root} folder selected, click Add files.
  4. Find the colorbox folder you unzipped earlier and double-click it.
  5. Double-click the folder containing the example you want to add to your page.
  6. 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.
  7. Select the {Root} folder again.
  8. Click New Folder and name it colorbox.
  9. Click Add files again.
  10. Find the colorbox folder you unzipped earlier and double-click it.
  11. Double-click the colorbox subfolder.
  12. Highlight both .js files (jquery.colorbox.js and jquery.colorbox-min.js).
  13. Click Open. This takes you back to the Add Files window.
  14. Again, select the {Root} folder.
  15. Click New Folder again, and name this one images.
  16. Click Add files.
  17. Find the images folder located in the example folder you want to use.
  18. Select all the images and subfolders and then click Open. This takes you back to the Add Files window.
  19. 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.

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

<a href="file.extrel="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>
  1. Select Edit > Add Files.
  2. Select the {Root} folder.
  3. Click Add files.
  4. Find the extra file(s) that you linked to (file.ext) in each HTML box.
  5. Click Open.
  6. Click OK.

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