mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

image viewer plugin

This commit is contained in:
Robin Appelman 2011-06-04 20:43:32 +02:00
parent 1eb0faa264
commit 4b9665a952
4 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/files_imageviewer/appinfo/app.php Normal file
View File

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

10
apps/files_imageviewer/appinfo/info.xml Normal file
View File

@ -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>

21
apps/files_imageviewer/css/lightbox.css Normal file
View File

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

46
apps/files_imageviewer/js/lightbox.js Normal file
View File

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