r2537 - photoviewer: moving to a branch
Author: joern.zaefferer
Date: Tue May 12 10:35:40 2009
New Revision: 2537
Added:
branches/photoviewer/demos/photoviewer/
branches/photoviewer/demos/photoviewer/default.html (contents, props
changed)
branches/photoviewer/demos/photoviewer/index.html (contents, props
changed)
branches/photoviewer/demos/photoviewer/photos/
branches/photoviewer/demos/photoviewer/photos/earth-thumb.jpg
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/earth.jpg (contents,
props changed)
branches/photoviewer/demos/photoviewer/photos/flight-thumb.jpg
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/flight.jpg (contents,
props changed)
branches/photoviewer/demos/photoviewer/photos/rocket-thumb.jpg
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/rocket.jpg (contents,
props changed)
branches/photoviewer/external/jquery.mousewheel-3.0.2.js
branches/photoviewer/themes/base/ui.photoviewer.css (contents, props
changed)
branches/photoviewer/ui/ui.photoviewer.js
Modified:
branches/photoviewer/demos/index.html
branches/photoviewer/themes/base/ui.base.css
Log:
photoviewer: moving to a branch
Modified: branches/photoviewer/demos/index.html
==============================================================================
--- branches/photoviewer/demos/index.html (original)
+++ branches/photoviewer/demos/index.html Tue May 12 10:35:40 2009
@@ -7,6 +7,7 @@
<link type="text/css" href="demos.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript"
src="../external/bgiframe/jquery.bgiframe.js"></script>
+ <script type="text/javascript"
src="../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.accordion.js"></script>
<script type="text/javascript" src="../ui/ui.datepicker.js"></script>
@@ -15,6 +16,7 @@
<script type="text/javascript" src="../ui/ui.droppable.js"></script>
<script type="text/javascript" src="../ui/ui.progressbar.js"></script>
<script type="text/javascript" src="../ui/ui.resizable.js"></script>
+ <script type="text/javascript" src="../ui/ui.photoviewer.js"></script>
<script type="text/javascript" src="../ui/ui.selectable.js"></script>
<script type="text/javascript" src="../ui/ui.slider.js"></script>
<script type="text/javascript" src="../ui/ui.sortable.js"></script>
@@ -248,6 +250,7 @@
<dd><a href="accordion/index.html">Accordion</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
+ <dd><a href="photoviewer/index.html">Photoviewer</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd>
Added: branches/photoviewer/demos/photoviewer/default.html
==============================================================================
--- (empty file)
+++ branches/photoviewer/demos/photoviewer/default.html Tue May 12 10:35:40
2009
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Photoviewer - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css" media="screen">
+ <link rel="stylesheet" href="../../source/ui.photoviewer.css"
type="text/css" media="screen">
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../external/jquery.mousewheel-3.0.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/effects.core.js"></script>
+ <script type="text/javascript" src="../../ui/effects.drop.js"></script>
+ <script type="text/javascript" src="../../ui/ui.photoviewer.js"></script>
+
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <script type="text/javascript">
+ $(function() {
+ var html = $('#demo-frame div.wrapper').html();
+ $('#demo-frame div.wrapper').parent().append(html).end().remove();
+
+ //You don't need this timeout in your pages - Safari has stupid issues
with our demo system
+ window.setTimeout(function() {
+ $("#photos").photoviewer();
+ $("#prev, #next").click(function() {
+ $("#photos").photoviewer(this.id);
+ return false;
+ })
+ }, $.browser.safari ? 100 : 0);
+ });
+ </script>
+ <style>
+ a img {
+ border: none;
+ }
+ </style>
+</head>
+<body>
+<div class="demo">
+
+ <div id="photos">
+ <div style="float:left; width: 258px;">
+ <a href="photos/flight.jpg">
+ <img src="photos/flight-thumb.jpg" />
+ </a>
+ </div>
+ <div style="float:left; width: 92px;">
+ <a href="photos/earth.jpg">
+ <img src="photos/earth-thumb.jpg" />
+ </a>
+ <a href="photos/rocket.jpg">
+ <img src="photos/rocket-thumb.jpg" />
+ </a>
+ </div>
+ </div>
+ <button id="prev">Previous</button>
+ <button id="next">Next</button>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+ Click any of the thumbnails to open the photoviewer. Use the cursor keys,
mousewheel or next/prev buttons above
+ to navigate. Click anywhere else or press escape to close the photoviewer.
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/photoviewer/demos/photoviewer/index.html
==============================================================================
--- (empty file)
+++ branches/photoviewer/demos/photoviewer/index.html Tue May 12 10:35:40
2009
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Photoviewer Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
Added: branches/photoviewer/demos/photoviewer/photos/earth-thumb.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/earth.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/flight-thumb.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/flight.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/rocket-thumb.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/rocket.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/external/jquery.mousewheel-3.0.2.js
==============================================================================
--- (empty file)
+++ branches/photoviewer/external/jquery.mousewheel-3.0.2.js Tue May 12
10:35:40 2009
@@ -0,0 +1,60 @@
+/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT
(http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener )
+ for ( var i=types.length; i; )
+ this.addEventListener( types[--i], handler, false );
+ else
+ this.onmousewheel = handler;
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener )
+ for ( var i=types.length; i; )
+ this.removeEventListener( types[--i], handler, false );
+ else
+ this.onmousewheel = null;
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
+
+ event = $.event.fix(event || window.event);
+ event.type = "mousewheel";
+
+ if ( event.wheelDelta ) delta = event.wheelDelta/120;
+ if ( event.detail ) delta = -event.detail/3;
+
+ // Add events and delta to the front of the arguments
+ args.unshift(event, delta);
+
+ return $.event.handle.apply(this, args);
+}
+
+})(jQuery);
\ No newline at end of file
Modified: branches/photoviewer/themes/base/ui.base.css
==============================================================================
--- branches/photoviewer/themes/base/ui.base.css (original)
+++ branches/photoviewer/themes/base/ui.base.css Tue May 12 10:35:40 2009
@@ -6,4 +6,5 @@
@import url("ui.progressbar.css");
@import url("ui.resizable.css");
@import url("ui.slider.css");
+@import url("ui.photoviewer.css");
@import url("ui.tabs.css");
Added: branches/photoviewer/themes/base/ui.photoviewer.css
==============================================================================
--- (empty file)
+++ branches/photoviewer/themes/base/ui.photoviewer.css Tue May 12 10:35:40
2009
@@ -0,0 +1,3 @@
+/* Accordion
+----------------------------------*/
+.ui-photoviewer { position: absolute; }
Added: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- (empty file)
+++ branches/photoviewer/ui/ui.photoviewer.js Tue May 12 10:35:40 2009
@@ -0,0 +1,118 @@
+/*
+ * jQuery UI Photoviewer @VERSION
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * Depends:
+ * ui.core.js
+ * effects.core.js
+ * effects.drop.js
+ * jquery.mousewheel.js (optional)
+ */
+(function($) {
+
+ $.widget('ui.photoviewer', {
+ _init: function() {
+ var self = this;
+ this.anchors =
this.element.find("a[href]:has(img[src])").click(function(event) {
+ self._display(this);
+ return false;
+ });
+ $(document).click(function() {
+ self.close();
+ }).keydown(function(event) {
+ switch(event.keyCode) {
+ case $.ui.keyCode.ESCAPE:
+ self.close();
+ break;
+ case $.ui.keyCode.LEFT:
+ case $.ui.keyCode.UP:
+ self.prev();
+ break;
+ case $.ui.keyCode.RIGHT:
+ case $.ui.keyCode.DOWN:
+ self.next();
+ break;
+ }
+ });
+ if ($.fn.mousewheel) {
+ $(document).mousewheel(function(event, delta) {
+ if (!self.currentAnchor)
+ return;
+ if (delta < 0) {
+ self.next();
+ }
+ if (delta > 0) {
+ self.prev();
+ }
+ return false;
+ });
+ }
+ },
+
+ _display: function(anchor, direction) {
+ if (!anchor)
+ return;
+ var visible = this._viewer().is(":visible");
+ this.currentAnchor = anchor;
+ function show() {
+ $(this).attr("src", anchor.href).one("load", function() {
+ $(this).css({
+ left: $(window).width() / 2 - $(this).width() / 2,
+ top: $(window).height() / 2 - $(this).height() / 2
+ });
+ if (visible) {
+ $(this).effect("drop", {
+ direction: direction == "up" ? "down" : "up",
+ mode: "show"
+ });
+ } else {
+ $(this).fadeIn();
+ }
+ })
+ }
+ if (!direction) {
+ this._viewer().each(show);
+ } else {
+ this._viewer().effect("drop", {
+ direction: direction
+ }, "normal", show);
+ }
+
+ },
+
+ close: function() {
+ if (!this.currentAnchor)
+ return;
+ this.currentAnchor = null;
+ this._viewer().fadeOut();
+ },
+
+ next: function() {
+ if (!this.currentAnchor)
+ return;
+ this._display(this.anchors.filter(":gt(" +
this.anchors.index(this.currentAnchor) + "):first")[0], "down");
+ },
+
+ prev: function() {
+ if (!this.currentAnchor)
+ return;
+ this._display(this.anchors.filter(":lt(" +
this.anchors.index(this.currentAnchor) + "):last")[0], "up");
+ },
+
+ _viewer: function() {
+ if (!this.viewerElement) {
+ this.viewerElement =
$("<img/>").addClass("ui-photoviewer").hide().appendTo(document.body);
+ }
+ return this.viewerElement;
+ }
+ });
+
+ $.extend($.ui.photoviewer, {
+ defaults: {
+ }
+ });
+
+})(jQuery);