Colorbox Example

Colorbox Example

by ramsunvtech

HTML

<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example2/colorbox.css">
<p><a class="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>

<p><a class="group2" href="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>

JavaScript

$(document).ready(function(){
    $(".group1").colorbox({rel:'group1'});
    
    $(document).bind('cbox_load', function() { 
      alert('colorbox is loading');
    });
    
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    
    $('a').colorbox({
     href: $('a'),
	 onOpen:function(){ alert('onOpen: colorbox is about to open'); },
	 onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
	 onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
	 onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
	 onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
	 });
});