Download the (Free) Colorbox Files, Including Examples

COLORBOX DOCUMENTATION (as of April 2010)

Link: http://colorpowered.com/colorbox/

Download the (free) colorbox files, including examples.

Example 6 links to a YouTube video, which is what colorbox is being used for in this website.

The files have to be manually added to the website folders; there is no DW extension for them.

Select the example that you want to use. Copy and paste the files into your website. I copied the colorbox folder containing the js files into the root directory, the colorbox images within a colorbox folder within the images sub-folder, and then the colorbox.css style sheet into the css sub-folder.

Using the example, insert the links to the js files and css files, but change the paths to accurately point to the files. You may have to do this in the template. The good news is once you do this, all of the pages associated with that template can receive a video link in the editable regions.

Change any links in the colorbox.css to point to the correct colorbox image location.

Then, in the editable region, insert the code from the example into the page, but change the link (for YouTube, you have to use the link that’s contained within the embed code, NOT the URL to the YouTube page). Be sure that the class in the inline js is within the code.

You may tweak the colorbox.css to enhance or change the look of the box, or adjust the default js to change the amount of background fade. I had to add styling to the colorbox.css to drop the title beneath the video.

Be sure to upload all of the files: css, js, and images. If there’s a problem, it’s probably because a link is incorrect or files haven’t been uploaded.

Js code within the page can be moved to an external file:

Just remove <script type="text/javascript"> & </script> and the call the file which contain the script: <script type="text/javascript" src="js/functions.js"</script>

To allow the video to automatically play when the colorbox is opened, do the following:

Add the string &autoplay=1 to the end of the url (YouTube)

Also, make sure the default setting isn’t High Def, but rather regular. Review the string and make sure that right before &autoplay=1 the setting is &hd=0, not &hd=1.

Example: Before (Link contained within embed code available on YouTube)

http://www.youtube.com/v/ZMJnCEW-QlY&hl=en_US&fs=1&rel=0&hd=1

Example: After you’ve adjusted the code to regular and autoplay:

http://www.youtube.com/v/ZMJnCEW-QlY&hl=en_US&fs=1&rel=0&hd=0&autoplay=1

Popup video box height and width not right? Adjust the code in the class to change those dimensions. I had to put different dimensions in the code located in the testimonials template.