How to use ColorBox effect on my website?
Last updated on May 11, 2011 at 05:30 pmThis example does not use ColorBox any more! Please use module JQuery Tools and Fancybox instead.
There is an easy way to add ColorBox effect on your website to display large images in the separate window. It is a JQuery plugin which supports photos, photo groups, ajax, inline, and iframed content. Here is the demonstration:
With this plugin you add thumbnails (small version) of images to the text. Full image is then displayed in ColorBox when you click on the thumbnail.
To add the effect on the entire site go to ColorBox project site and download the last version of the ColorBox. Extract the files to your local disk. You do need all the files donwloaded for the ColorBox effect on your website, only some of them.
Go to Content → File Manager and create a new folder named "colorbox". The folder appears in the list. Click on the folder to see its content. The folder is empty. Choose the tab "Upload files" and select the files from the local disk:
- example1/colorbox.css
- example1/colorbox-ie.css
- colorbox/jquery.colorbox-min.js
Press "OK" to upload the files. Now in File Manager create a new folder named images in the colorbox folder. Upload all pictures from example1/images into the newly created folder. The last step can be done with FileZilla as well.
In your main template add somewhere between the <head> tags:
<link type="text/css" media="screen" rel="stylesheet" href="/uploads/colorbox/colorbox.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="/uploads/colorbox/colorbox-ie.css" />
<![endif]-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="/uploads/colorbox/jquery.colorbox-min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox.settings.transition = "fade";
$.fn.colorbox.settings.bgOpacity = "0.8";
$.fn.colorbox.settings.contentCurrent = "({current}/{total})";
$(".cpModal").colorbox();
});
</script>
{/literal}
This will add colorbox effect to all images with CSS class="cpModal". Before adding first picture on the page you have to enable showing thumbnails in WYSIWYG-editor. In the admin panel go to Extensions → TinyMCE WYIWYG and check the box "Show thumbnail-files in lists:". Press "Update".
Then go to the Layout → Stylesheets, open your stylesheet and add:
a.cpModal{}
at the end of it. Save the stylesheet.
How to use ColorBox in TinyMCE?
First upload image to your webspace with Image Manager. Image Manager will automatically create a thumbnail for the uploaded image.
For each image you would like to display in ColorBox, edit the page where you are going to add the image. In WYSIWYG first select "Insert/edit image" icon in the tool bar. In the pop-up window click on "Browse" icon beside the field "Image URL". In the next screen choose the small version of the uploaded image (it starts with "thumb_") and press "Insert". The thumbnail is added to the page.
With the next step add link to the thumbnail. Click on thumbnail in the content area and select "Insert/edit link" icon in the TinyMCE tool bar. In the pop-up window click on "Browse" icon beside the field "Link URL" and choose the same image in original size to be displayed in ColorBox. Fill in the field "Title" with the caption of the image. It will be displayed in the ColorBox as well. Important! Select in the field "Class" the value cpModal and press "Insert".
Ready! You can use the colorbox in the same way on every page. See examples for more effects.
Comments to "How to use ColorBox effect on my website?"
My name is Sofia Hauschildt and I’am a tutor for web mastering and web development, consultant and programmer. 2000 I had graduated in Computer Science...
Thanks, very useful!
Thank you,
just to let people know, i use it on a friend site with CTLmodulemaker and needed to group image. For doing so, just add in the < a > tag the rel="group".