r2532 - photoviewer: basic functionality
Author: joern.zaefferer
Date: Tue May 12 09:42:44 2009
New Revision: 2532
Added:
branches/labs/showcase/source/ui.photoviewer.css (contents, props
changed)
Modified:
branches/labs/showcase/demos/index.html
branches/labs/showcase/demos/photoviewer/default.html (contents, props
changed)
branches/labs/showcase/demos/photoviewer/index.html (props changed)
branches/labs/showcase/source/ui.photoviewer.js
Log:
photoviewer: basic functionality
Modified: branches/labs/showcase/demos/index.html
==============================================================================
--- branches/labs/showcase/demos/index.html (original)
+++ branches/labs/showcase/demos/index.html Tue May 12 09:42:44 2009
@@ -5,6 +5,7 @@
<title>jQuery UI Labs</title>
<link type="text/css" href="demos.css" rel="stylesheet" />
<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 src="../jquery-1.3.2.js" type="text/javascript"></script>
<script src="../ui/ui.core.js" type="text/javascript"></script>
Modified: branches/labs/showcase/demos/photoviewer/default.html
==============================================================================
--- branches/labs/showcase/demos/photoviewer/default.html (original)
+++ branches/labs/showcase/demos/photoviewer/default.html Tue May 12
09:42:44 2009
@@ -2,6 +2,8 @@
<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="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>
@@ -21,32 +23,28 @@
}, $.browser.safari ? 100 : 0);
});
</script>
+ <style>
+ a img {
+ border: none;
+ }
+ </style>
</head>
<body>
<div class="demo">
- <div class="wrapper">
- <div id="coverflow">
- <img src="icons/1.png" />
- <img src="icons/2.png" />
- <img src="icons/3.png" />
- <img src="icons/4.png" />
- <img src="icons/5.png" />
- <img src="icons/6.png" />
- <img src="icons/7.png" />
- <img src="icons/8.png" />
- <img src="icons/9.png" />
- <img src="icons/10.png" />
- <img src="icons/1.png" />
- <img src="icons/2.png" />
- <img src="icons/3.png" />
- <img src="icons/4.png" />
- <img src="icons/5.png" />
- <img src="icons/6.png" />
- <img src="icons/7.png" />
- <img src="icons/8.png" />
- <img src="icons/9.png" />
- <img src="icons/10.png" />
+ <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>
Added: branches/labs/showcase/source/ui.photoviewer.css
==============================================================================
--- (empty file)
+++ branches/labs/showcase/source/ui.photoviewer.css Tue May 12 09:42:44
2009
@@ -0,0 +1,3 @@
+/* Accordion
+----------------------------------*/
+.ui-photoviewer { position: absolute; }
Modified: branches/labs/showcase/source/ui.photoviewer.js
==============================================================================
--- branches/labs/showcase/source/ui.photoviewer.js (original)
+++ branches/labs/showcase/source/ui.photoviewer.js Tue May 12 09:42:44 2009
@@ -11,11 +11,63 @@
* effects.drop.js
*/
(function($) {
-
+
$.widget('ui.photoviewer', {
_init: function() {
var self = this;
-
+ this.anchors =
this.element.find("a[href]:has(img[src])").click(function(event) {
+ event.preventDefault();
+ self._display(this);
+ });
+ $(document).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;
+ }
+ });
+ },
+
+ _display: function(anchor) {
+ if (!anchor)
+ return;
+ this.currentAnchor = anchor;
+ this._viewer().attr("src", anchor.href).show();
+ this._updateViewerPosition();
+ },
+
+ close: function() {
+ this._viewer().hide();
+ },
+
+ next: function() {
+ this._display(this.anchors.filter(":gt(" +
this.anchors.index(this.currentAnchor) + "):first")[0]);
+ },
+
+ prev: function() {
+ this._display(this.anchors.filter(":lt(" +
this.anchors.index(this.currentAnchor) + "):last")[0]);
+ },
+
+ _viewer: function() {
+ if (!this.viewerElement) {
+ this.viewerElement =
$("<img/>").addClass("ui-photoviewer").appendTo(document.body);
+ }
+ return this.viewerElement;
+ },
+
+ _updateViewerPosition: function() {
+ this._viewer().css({
+ left: 100,
+ top: 100
+ });
}
});