diff options
| -rw-r--r-- | core/helpers/core_menu.php | 9 | ||||
| -rw-r--r-- | core/helpers/core_theme.php | 10 | ||||
| -rw-r--r-- | core/images/ico-close.png | bin | 0 -> 1309 bytes | |||
| -rw-r--r-- | core/js/fullsize.js | 57 |
4 files changed, 73 insertions, 3 deletions
diff --git a/core/helpers/core_menu.php b/core/helpers/core_menu.php index 1564e4d4..247fd215 100644 --- a/core/helpers/core_menu.php +++ b/core/helpers/core_menu.php @@ -87,12 +87,15 @@ class core_menu_Core { } static function photo($menu, $theme) { - $menu - ->append(Menu::factory("link") + if (access::can("view_full", $theme->item())) { + $menu + ->append(Menu::factory("link") ->id("fullsize") ->label(t("View full size")) ->url("#") - ->css_id("gFullsizeLink")) + ->css_id("gFullsizeLink")); + } + $menu ->append(Menu::factory("link") ->id("album") ->label(t("Return to album")) diff --git a/core/helpers/core_theme.php b/core/helpers/core_theme.php index 57664b48..2ac7d327 100644 --- a/core/helpers/core_theme.php +++ b/core/helpers/core_theme.php @@ -29,6 +29,16 @@ class core_theme_Core { url::file("core/css/quick.css") . "\" />"; $buf .= html::script("core/js/quick.js"); } + if ($theme->page_type == "photo" && access::can("view_full", $theme->item())) { + $buf .= "<script type=\"text/javascript\" >" . + " var fullsize_detail = { " . + " close: \"" . url::file("core/images/ico-close.png") . "\", " . + " url: \"" . $theme->item()->file_url() . "\", " . + " width: " . $theme->item()->width . ", " . + " height: " . $theme->item()->height . "};" . + "</script>"; + $buf .= html::script("core/js/fullsize.js"); + } return $buf; } diff --git a/core/images/ico-close.png b/core/images/ico-close.png Binary files differnew file mode 100644 index 00000000..444f4872 --- /dev/null +++ b/core/images/ico-close.png diff --git a/core/js/fullsize.js b/core/js/fullsize.js new file mode 100644 index 00000000..91e43529 --- /dev/null +++ b/core/js/fullsize.js @@ -0,0 +1,57 @@ +$(document).ready(function() { + $("#gFullsizeLink").click(function() { + var width = $(document).width(); + var height = $(document).height(); + + $("body").append('<div id="gFullsizeOverlay" class="ui-dialog-overlay" ' + + 'style="border-width: 0px; margin: 0px; padding: 0px; background: black ' + + 'none repeat scroll 0% 0%; position: absolute; top: 0px; left: 0px; ' + + 'width: ' + width + 'px; height: ' + height + 'px; opacity: 0.7; ' + + '-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; ' + + '-moz-background-inline-policy: -moz-initial; z-index: 1001;"> </div>'); + + var image_size = _auto_fit(fullsize_detail.width, fullsize_detail.height); + + $("body").append("<div id='gFullsize' class='ui-dialog ui-widget' " + + "style='overflow: hidden; display: block; " + + "position: absolute; z-index: 1002; outline-color: -moz-use-text-color; " + + "outline-style: none; outline-width: 0px; " + + "height: " + image_size.height + "px; " + + "width: " + image_size.width + "px; " + + "top: " + image_size.top + "px; left: " + image_size.left + "px;'>" + + "<img id='gFullSizeImage' src='" + fullsize_detail.url + "'" + + "height='" + image_size.height + "' width='" + image_size.width + "'/></div"); + + $("#gFullsize").append("<div id='gFullsizeClose' style='z-index: 1003; position: absolute; right: 1em; top: 1em;'><img src='" + fullsize_detail.close + "' /></div>"); + $("#gFullsizeClose").click(function() { + $("#gFullsizeOverlay*").remove(); + $("#gFullsize").remove(); + }); + }); +}); + +/* + * Calculate the size of the image panel based on the size of the image and the size of the + * window. Scale the image so the entire panel fits in the view port. + */ +function _auto_fit(imageWidth, imageHeight) { + // ui-dialog gives a padding of 2 pixels + var windowWidth = $(window).width() - 10; + var windowHeight = $(window).height() - 10; + + /* If the width is greater then scale the image width first */ + if (imageWidth > windowWidth) { + var ratio = windowWidth / imageWidth; + imageWidth *= ratio; + imageHeight *= ratio; + } + /* after scaling the width, check that the height fits */ + if (imageHeight > windowHeight) { + var ratio = windowHeight / imageHeight; + imageWidth *= ratio; + imageHeight *= ratio; + } + + return {top: (windowHeight - imageHeight) / 2, left: (windowWidth - imageWidth) / 2, + width: imageWidth, height: imageHeight}; +} |
