image viewer plugin

diff --git a/apps/files_imageviewer/appinfo/app.php b/apps/files_imageviewer/appinfo/app.php
new file mode 100644 (file)
index 0000000..bc0059b
--- /dev/null
+++ b/apps/files_imageviewer/appinfo/app.php
@@ -0,0 +1,6 @@
+<?php
+
+OC_UTIL::addScript( 'files_imageviewer', 'lightbox' );
+OC_UTIL::addStyle( 'files_imageviewer', 'lightbox' );
+
+?>

diff --git a/apps/files_imageviewer/appinfo/info.xml b/apps/files_imageviewer/appinfo/info.xml
new file mode 100644 (file)
index 0000000..f658409
--- /dev/null
+++ b/apps/files_imageviewer/appinfo/info.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<info>
+       <id>files_imageview</id>
+       <name>Imageviewer</name>
+       <description>Simple image viewer for owncloud</description>
+       <version>1.0</version>
+       <licence>AGPL</licence>
+       <author>Robin Appelman</author>
+       <require>2</require>
+</info>
\ No newline at end of file

diff --git a/apps/files_imageviewer/css/lightbox.css b/apps/files_imageviewer/css/lightbox.css
new file mode 100644 (file)
index 0000000..225b11f
--- /dev/null
+++ b/apps/files_imageviewer/css/lightbox.css
@@ -0,0 +1,21 @@
+#lightbox_overlay{
+       position:absolute;
+       height:100%;
+       width:100%;
+       top:0px;
+       left:0px;
+       opacity:0.5;
+       filter: alpha(opacity = 50);
+       background-color:black;
+       z-index:9999;
+}
+
+#lightbox{
+       position:absolute;
+       max-height:90%;
+       max-width:90%;
+       top:10px;
+       margin-left:auto;
+       margin-right:auto;
+       z-index:9999;
+}
\ No newline at end of file

diff --git a/apps/files_imageviewer/js/lightbox.js b/apps/files_imageviewer/js/lightbox.js
new file mode 100644 (file)
index 0000000..dd091aa
--- /dev/null
+++ b/apps/files_imageviewer/js/lightbox.js
@@ -0,0 +1,46 @@
+$(document).ready(function() {
+       images={};//image cache
+       FileActions.register('image','View',function(filename){
+               var location='ajax/download.php?files='+filename+'&dir='+$('#dir').val();
+               var overlay=$('<div id="lightbox_overlay"/>');
+               $( 'body' ).append(overlay);
+               var container=$('<div id="lightbox"/>');
+               $( 'body' ).append(container);
+               if(!images[location]){
+                       var img = new Image();
+                       img.onload = function(){
+                               images[location]=img;
+                               showLightbox(container,img);
+                       }
+                       img.src = location;
+               }else{
+                       showLightbox(container,images[location]);
+               }
+       });
+       $( 'body' ).click(hideLightbox);
+       FileActions.setDefault('image','View');
+});
+
+function showLightbox(container,img){
+       var maxWidth = $( window ).width() - 50;
+       var maxHeight = $( window ).height() - 50;
+       if( img.width > maxWidth || img.height > maxHeight ) { // One of these is larger than the window
+               var ratio = img.width / img.height;
+               if( img.height >= maxHeight ) {
+                       img.height = maxHeight;
+                       img.width = maxHeight * ratio;
+               } else {
+                       img.width = maxWidth;
+                       img.height = maxWidth * ratio;
+               }
+       }
+       container.empty();
+       container.append(img);
+       container.css('top',Math.round( ($( window ).height() - img.height)/2));
+       container.css('left',Math.round( ($( window ).width() - img.width)/2));
+}
+
+function hideLightbox(){
+       $('#lightbox_overlay').remove();
+       $('#lightbox').remove();
+}
\ No newline at end of file