r2545 - photoviewer: added resize option, including demo
Author: joern.zaefferer
Date: Wed May 13 03:06:28 2009
New Revision: 2545
Added:
branches/photoviewer/demos/photoviewer/photos/IMG_2474-thumb.JPG
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2474.JPG (contents,
props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2480-thumb.JPG
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2480.JPG (contents,
props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2487-thumb.JPG
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2487.JPG (contents,
props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2498-thumb.JPG
(contents, props changed)
branches/photoviewer/demos/photoviewer/photos/IMG_2498.JPG (contents,
props changed)
branches/photoviewer/demos/photoviewer/resizing.html (contents, props
changed)
Modified:
branches/photoviewer/demos/photoviewer/index.html
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: added resize option, including demo
Modified: branches/photoviewer/demos/photoviewer/index.html
==============================================================================
--- branches/photoviewer/demos/photoviewer/index.html (original)
+++ branches/photoviewer/demos/photoviewer/index.html Wed May 13 03:06:28
2009
@@ -10,6 +10,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ <li><a href="resizing.html">Reizing photos</a></li>
</ul>
</div>
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2474-thumb.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2474.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2480-thumb.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2480.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2487-thumb.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2487.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2498-thumb.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/photos/IMG_2498.JPG
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/demos/photoviewer/resizing.html
==============================================================================
--- (empty file)
+++ branches/photoviewer/demos/photoviewer/resizing.html Wed May 13
03:06:28 2009
@@ -0,0 +1,66 @@
+<!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({
+ resize: true
+ });
+ }, $.browser.safari ? 100 : 0);
+ });
+ </script>
+ <style>
+ a img {
+ border: none;
+ }
+ </style>
+</head>
+<body>
+<div class="demo">
+
+ <div id="photos">
+ <a href="photos/IMG_2474.jpg">
+ <img src="photos/IMG_2474-thumb.jpg" />
+ </a>
+ <a href="photos/IMG_2480.jpg">
+ <img src="photos/IMG_2480-thumb.jpg" />
+ </a>
+ <a href="photos/IMG_2487.jpg">
+ <img src="photos/IMG_2487-thumb.jpg" />
+ </a>
+ <a href="photos/IMG_2498.jpg">
+ <img src="photos/IMG_2498-thumb.jpg" />
+ </a>
+ </div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+ Non-thumb photos are in 1600x1200, the viewer tries to resize to fit into
the window.
+
+
+</div><!-- End demo-description -->
+
+<div style="height:1200px; visibility: hidden">big div to make page
scroll</div>
+
+</body>
+</html>
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/photoviewer/ui/ui.photoviewer.js Wed May 13 03:06:28 2009
@@ -21,8 +21,10 @@
self._display(this);
return false;
});
- $(document).click(function() {
- self.close();
+ $(document).click(function(event) {
+ // ignore right click
+ if (event.button == 0)
+ self.close();
}).keydown(function(event) {
if (!self.currentAnchor)
return;
@@ -65,14 +67,28 @@
_display: function(anchor, direction) {
if (!anchor)
return;
- var visible = this._viewer().is(":visible");
+ var self = this,
+ visible = this._viewer().is(":visible");
this.currentAnchor = anchor;
this._overlay().fadeIn();
function show() {
+ // TODO refactor
$(this).attr("src", anchor.href).one("load", function() {
+ $(this).css("width", "").css("height", "");
+ if (self.options.resize) {
+ var currentWidth = $(this).outerWidth(),
+ currentHeight = $(this).outerHeight(),
+ borderWidth = currentWidth - $(this).width(),
+ borderHeight = currentHeight - $(this).height(),
+ r = Math.min(Math.min($(window).width() - 36, currentWidth) /
currentWidth, Math.min($(window).height() - 60, currentHeight) /
currentHeight);
+ $(this).css({
+ width: Math.round(r * currentWidth - borderWidth),
+ height: Math.round(r * currentHeight, - borderHeight)
+ });
+ }
$(this).css({
- left: $(window).width() / 2 - $(this).width() / 2,
- top: $(window).height() / 2 - $(this).height() / 2
+ left: $(window).width() / 2 - $(this).outerWidth() / 2,
+ top: $(window).height() / 2 - $(this).outerHeight() / 2
});
if (visible) {
$(this).effect("drop", {
@@ -129,8 +145,10 @@
},
_overlay: function() {
+ if (!this.options.overlay)
+ return $([]);
if (!this.overlayElement) {
- this.overlayElement =
$("<img/>").addClass("ui-widget-overlay").css("opacity",
0.8).hide().appendTo(document.body);
+ this.overlayElement =
$("<div/>").addClass("ui-widget-overlay").css("opacity",
0.8).hide().appendTo(document.body);
}
return this.overlayElement;
}
@@ -138,7 +156,9 @@
$.extend($.ui.photoviewer, {
defaults: {
- loop: true
+ loop: true,
+ overlay: true,
+ resize: false
}
});