| [4621] | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|---|
| 5 | <title>ColorBox Examples</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;} |
|---|
| 8 | a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} |
|---|
| 9 | h2{font-size:13px; margin:15px 0 0 0;} |
|---|
| 10 | </style> |
|---|
| 11 | <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> |
|---|
| 12 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
|---|
| 13 | <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script> |
|---|
| 14 | <script type="text/javascript"> |
|---|
| 15 | $(document).ready(function(){ |
|---|
| 16 | //Examples of how to assign the ColorBox event to elements |
|---|
| 17 | $("a[rel='example1']").colorbox(); |
|---|
| 18 | $("a[rel='example2']").colorbox({transition:"fade"}); |
|---|
| 19 | $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); |
|---|
| 20 | $("a[rel='example4']").colorbox({slideshow:true}); |
|---|
| 21 | $(".example5").colorbox(); |
|---|
| 22 | $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); |
|---|
| 23 | $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); |
|---|
| 24 | $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); |
|---|
| 25 | $(".example9").colorbox({ |
|---|
| 26 | onOpen:function(){ alert('onOpen: colorbox is about to open'); }, |
|---|
| 27 | onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, |
|---|
| 28 | onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, |
|---|
| 29 | onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, |
|---|
| 30 | onClosed:function(){ alert('onClosed: colorbox has completely closed'); } |
|---|
| 31 | }); |
|---|
| 32 | |
|---|
| 33 | //Example of preserving a JavaScript event for inline calls. |
|---|
| 34 | $("#click").click(function(){ |
|---|
| 35 | $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); |
|---|
| 36 | return false; |
|---|
| 37 | }); |
|---|
| 38 | }); |
|---|
| 39 | </script> |
|---|
| 40 | </head> |
|---|
| 41 | <body> |
|---|
| 42 | <h1>ColorBox Demonstration</h1> |
|---|
| 43 | <h2>Elastic Transition</h2> |
|---|
| 44 | <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
|---|
| 45 | <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
|---|
| 46 | <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
|---|
| 47 | |
|---|
| 48 | <h2>Fade Transition</h2> |
|---|
| 49 | <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p> |
|---|
| 50 | <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
|---|
| 51 | <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
|---|
| 52 | |
|---|
| 53 | <h2>No Transition + fixed width and height (75% of screen size)</h2> |
|---|
| 54 | <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
|---|
| 55 | <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
|---|
| 56 | <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
|---|
| 57 | |
|---|
| 58 | <h2>Slideshow</h2> |
|---|
| 59 | <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
|---|
| 60 | <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
|---|
| 61 | <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
|---|
| 62 | |
|---|
| 63 | <h2>Other Content Types</h2> |
|---|
| 64 | <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
|---|
| 65 | <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> |
|---|
| 66 | <p><a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
|---|
| 67 | <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p> |
|---|
| 68 | <p><a class='example8' href="#">Inline HTML</a></p> |
|---|
| 69 | |
|---|
| 70 | <h2>Demonstration of using callbacks</h2> |
|---|
| 71 | <p><a class='example9' 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> |
|---|
| 72 | |
|---|
| 73 | <!-- This contains the hidden content for inline calls --> |
|---|
| 74 | <div style='display:none'> |
|---|
| 75 | <div id='inline_example1' style='padding:10px; background:#fff;'> |
|---|
| 76 | <p><strong>This content comes from a hidden element on this page.</strong></p> |
|---|
| 77 | <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br /> |
|---|
| 78 | <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p> |
|---|
| 79 | |
|---|
| 80 | <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> |
|---|
| 81 | <p>Updating Content Example:<br /> |
|---|
| 82 | <a class="example5" href="../content/flash.html">Click here to load new content</a></p> |
|---|
| 83 | </div> |
|---|
| 84 | </div> |
|---|
| 85 | </body> |
|---|
| 86 | </html> |
|---|
