2013-02-04 20:09:25 -05:00
<!DOCTYPE html>
< html >
< head >
< meta charset = 'utf-8' / >
2015-12-30 08:53:02 -05:00
< title > Colorbox Examples< / title >
2013-02-04 20:09:25 -05:00
< style >
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
< / style >
< link rel = "stylesheet" href = "colorbox.css" / >
2015-12-30 08:53:02 -05:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > < / script >
2013-02-04 20:09:25 -05:00
< script src = "../jquery.colorbox.js" > < / script >
< script >
$(document).ready(function(){
2015-12-30 08:53:02 -05:00
//Examples of how to assign the Colorbox event to elements
2013-02-04 20:09:25 -05:00
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
2015-12-30 08:53:02 -05:00
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
2013-02-04 20:09:25 -05:00
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
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'); }
});
2015-12-30 08:53:02 -05:00
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
2013-02-04 20:09:25 -05:00
//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 >
< / head >
< body >
2015-12-30 08:53:02 -05:00
< h1 > Colorbox Demonstration< / h1 >
2013-02-04 20:09:25 -05:00
< h2 > Elastic Transition< / h2 >
< p > < a class = "group1" href = "../content/ohoopee1.jpg" title = "Me and my grandfather on the Ohoopee." > Grouped Photo 1< / a > < / p >
< p > < a class = "group1" href = "../content/ohoopee2.jpg" title = "On the Ohoopee as a child" > Grouped Photo 2< / a > < / p >
< p > < a class = "group1" href = "../content/ohoopee3.jpg" title = "On the Ohoopee as an adult" > Grouped Photo 3< / a > < / p >
< h2 > Fade Transition< / h2 >
< p > < a class = "group2" href = "../content/ohoopee1.jpg" title = "Me and my grandfather on the Ohoopee" > Grouped Photo 1< / a > < / p >
< p > < a class = "group2" href = "../content/ohoopee2.jpg" title = "On the Ohoopee as a child" > Grouped Photo 2< / a > < / p >
< p > < a class = "group2" href = "../content/ohoopee3.jpg" title = "On the Ohoopee as an adult" > Grouped Photo 3< / a > < / p >
< h2 > No Transition + fixed width and height (75% of screen size)< / h2 >
< p > < a class = "group3" href = "../content/ohoopee1.jpg" title = "Me and my grandfather on the Ohoopee." > Grouped Photo 1< / a > < / p >
< p > < a class = "group3" href = "../content/ohoopee2.jpg" title = "On the Ohoopee as a child" > Grouped Photo 2< / a > < / p >
< p > < a class = "group3" href = "../content/ohoopee3.jpg" title = "On the Ohoopee as an adult" > Grouped Photo 3< / a > < / p >
< h2 > Slideshow< / h2 >
< p > < a class = "group4" href = "../content/ohoopee1.jpg" title = "Me and my grandfather on the Ohoopee." > Grouped Photo 1< / a > < / p >
< p > < a class = "group4" href = "../content/ohoopee2.jpg" title = "On the Ohoopee as a child" > Grouped Photo 2< / a > < / p >
< p > < a class = "group4" href = "../content/ohoopee3.jpg" title = "On the Ohoopee as an adult" > Grouped Photo 3< / a > < / p >
< h2 > Other Content Types< / h2 >
< p > < a class = 'ajax' href = "../content/ajax.html" title = "Homer Defined" > Outside HTML (Ajax)< / a > < / p >
2015-12-30 08:53:02 -05:00
< p > < a class = 'youtube' href = "http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent" > Flash / Video (Iframe/Direct Link To YouTube)< / a > < / p >
2013-02-04 20:09:25 -05:00
< p > < a class = 'vimeo' href = "http://player.vimeo.com/video/2285902" title = "Röyksopp: Remind Me" > Flash / Video (Iframe/Direct Link To Vimeo)< / a > < / p >
< p > < a class = 'iframe' href = "http://wikipedia.com" > Outside Webpage (Iframe)< / a > < / p >
< p > < a class = 'inline' href = "#inline_content" > Inline HTML< / a > < / p >
< h2 > Demonstration of using callbacks< / h2 >
< p > < a class = 'callbacks' href = "../content/marylou.jpg" title = "Marylou on Cumberland Island" > Example with alerts< / a > . Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.< / p >
2015-12-30 08:53:02 -05:00
< h2 > Retina Images< / h2 >
< p > < a class = "retina" href = "../content/daisy.jpg" title = "Retina" > Retina< / a > < / p >
< p > < a class = "non-retina" href = "../content/daisy.jpg" title = "Non-Retina" > Non-Retina< / a > < / p >
2013-02-04 20:09:25 -05:00
<!-- This contains the hidden content for inline calls -->
< div style = 'display:none' >
< div id = 'inline_content' style = 'padding:10px; background:#fff;' >
< p > < strong > This content comes from a hidden element on this page.< / strong > < / p >
< p > The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.< / p >
< p > < a id = "click" href = "#" style = 'padding:5px; background:#ccc;' > Click me, it will be preserved!< / a > < / p >
2015-12-30 08:53:02 -05:00
< p > < strong > If you try to open a new Colorbox while it is already open, it will update itself with the new content.< / strong > < / p >
2013-02-04 20:09:25 -05:00
< p > Updating Content Example:< br / >
< a class = "ajax" href = "../content/ajax.html" > Click here to load new content< / a > < / p >
< / div >
< / div >
< / body >
< / html >
