image viewer plugin

apps/files_imageviewer/appinfo/app.php

@@ -0,0 +1,6 @@
+<?php
+
+OC_UTIL::addScript( 'files_imageviewer', 'lightbox' );
+OC_UTIL::addStyle( 'files_imageviewer', 'lightbox' );
+
+?>

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>

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;
+}

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();
+}