aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default/js/plugins/colorbox/style1/index.html
diff options
context:
space:
mode:
authorplegall <plg@piwigo.org>2011-08-17 19:56:07 +0000
committerplegall <plg@piwigo.org>2011-08-17 19:56:07 +0000
commit64ba898944da2aaf0a7f5ebe07d96036b88dea68 (patch)
treeb6f462879a4f8187fb7084b8bdf5ec9bd459c231 /themes/default/js/plugins/colorbox/style1/index.html
parente255cd8c2f0a920b033b76045f417f9c416c27b8 (diff)
feature 2406 added: if the user wants a new album in the upload form, the album
is created before the start of the upload. The ergonomy is now simpler, the page is smaller and cleaner. bug 2373 fixed: now that album is created before upload, uploadify.php gets the category_id and the level: as soon as it is uploaded (function add_uploaded_file) the photo gets its final privacy level and is directly associated to the album. This way, we can have an error on a photo without making orphan all photos of the same upload group. feature 2405 added: as soon as a photo is uploaded, its thumbnail is displayed in the "Uploaded Photos" fieldset, without waiting for other photos to be uploaded. The latest photos comes first. I have slighlty changed the integration of colorbox in core. Now we have 2 styles available and by default, we use style2 (overlay in black, title and control icons outside the popup). It is also used for zooming on bulk manager in unit mode. display change: on each uploading photos, instead of showing the transfer speed, we display the transfer progression in % bug fixed: the color of the "Start Upload" button was not correct because the button was not a submit button but a simple type=button. language: "Upload" button becomes "Start Upload" button. git-svn-id: http://piwigo.org/svn/trunk@11962 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--themes/default/js/plugins/colorbox/style1/index.html87
1 files changed, 87 insertions, 0 deletions
diff --git a/themes/default/js/plugins/colorbox/style1/index.html b/themes/default/js/plugins/colorbox/style1/index.html
new file mode 100644
index 000000000..abf749c3c
--- /dev/null
+++ b/themes/default/js/plugins/colorbox/style1/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset=utf-8 />
+ <title>ColorBox Examples</title>
+ <style type="text/css">
+ 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 media="screen" rel="stylesheet" href="colorbox.css" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+ <script src="../colorbox/jquery.colorbox.js"></script>
+ <script>
+ $(document).ready(function(){
+ //Examples of how to assign the ColorBox event to elements
+ $("a[rel='example1']").colorbox();
+ $("a[rel='example2']").colorbox({transition:"fade"});
+ $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
+ $("a[rel='example4']").colorbox({slideshow:true});
+ $(".example5").colorbox();
+ $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
+ $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
+ $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
+ $(".example9").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'); }
+ });
+
+ //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 href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+ <p><a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+ <p><a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+ <h2>Fade Transition</h2>
+ <p><a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+ <p><a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+ <p><a href="../content/ohoopee3.jpg" rel="example2" 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 href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+ <p><a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+ <p><a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+ <h2>Slideshow</h2>
+ <p><a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+ <p><a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+ <p><a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+ <h2>Other Content Types</h2>
+ <p><a class='example5' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
+ <p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
+ <p><a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&amp;wmode=transparent" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
+ <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
+ <p><a class='example8' href="#">Inline HTML</a></p>
+
+ <h2>Demonstration of using callbacks</h2>
+ <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>
+
+ <!-- This contains the hidden content for inline calls -->
+ <div style='display:none'>
+ <div id='inline_example1' 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.<br />
+ <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="example5" href="../content/flash.html">Click here to load new content</a></p>
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file