| Server IP : 20.75.53.88 / Your IP : 216.73.217.72 [ Web Server : Apache System : Linux VMRALP-3 4.4.0-256-generic #290~14.04.1-Ubuntu SMP Thu Jun 20 09:24:50 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29+esm15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Domains : 3 Domains MySQL : ON | cURL : OFF | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/site/obidos-Old/colorbox/example4/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function () {
//Examples of how to assign the Colorbox event to elements
$(".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();
$(".youtube").colorbox({iframe: true, innerWidth: 640, innerHeight: 390});
$(".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');
}
});
$('.non-retina').colorbox({rel: 'group5', transition: 'none'})
$('.retina').colorbox({rel: 'group5', transition: 'none', retinaImage: true, retinaUrl: true});
//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>
<h1>Colorbox Demonstration</h1>
<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>
<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>
<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>
<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>
<!-- 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>
<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>
<p>Updating Content Example:<br/>
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
</div>
</div>
</body>
</html>