1 | <!DOCTYPE html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <meta charset=utf-8 /> |
---|
5 | <title>ColorBox Examples</title> |
---|
6 | <style type="text/css"> |
---|
7 | body{font:12px/1.2 Verdana, sans-serif; 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 media="screen" rel="stylesheet" href="colorbox.css" /> |
---|
12 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> |
---|
13 | <script src="../colorbox/jquery.colorbox.js"></script> |
---|
14 | <script> |
---|
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 | |
---|
44 | <h2>Elastic Transition</h2> |
---|
45 | <p><a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
---|
46 | <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
---|
47 | <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
---|
48 | |
---|
49 | <h2>Fade Transition</h2> |
---|
50 | <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p> |
---|
51 | <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
---|
52 | <p><a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
---|
53 | |
---|
54 | <h2>No Transition + fixed width and height (75% of screen size)</h2> |
---|
55 | <p><a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
---|
56 | <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
---|
57 | <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
---|
58 | |
---|
59 | <h2>Slideshow</h2> |
---|
60 | <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p> |
---|
61 | <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p> |
---|
62 | <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p> |
---|
63 | |
---|
64 | <h2>Other Content Types</h2> |
---|
65 | <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p> |
---|
66 | <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p> |
---|
67 | <p><a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p> |
---|
68 | <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p> |
---|
69 | <p><a class='example8' href="#">Inline HTML</a></p> |
---|
70 | |
---|
71 | <h2>Demonstration of using callbacks</h2> |
---|
72 | <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> |
---|
73 | |
---|
74 | <!-- This contains the hidden content for inline calls --> |
---|
75 | <div style='display:none'> |
---|
76 | <div id='inline_example1' style='padding:10px; background:#fff;'> |
---|
77 | <p><strong>This content comes from a hidden element on this page.</strong></p> |
---|
78 | <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 /> |
---|
79 | <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p> |
---|
80 | |
---|
81 | <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> |
---|
82 | <p>Updating Content Example:<br /> |
---|
83 | <a class="example5" href="../content/flash.html">Click here to load new content</a></p> |
---|
84 | </div> |
---|
85 | </div> |
---|
86 | </body> |
---|
87 | </html> |
---|