Add loading message to image lightbox and tweak events
This commit is contained in:
parent
f29dc0c0fb
commit
8d4039b678
|
@ -20,4 +20,13 @@
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
margin-right:auto;
|
margin-right:auto;
|
||||||
z-index:9999;
|
z-index:9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#lightbox_loader{
|
||||||
|
text-align:center;
|
||||||
|
position:fixed;
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
#lightbox_loader img { margin-right: 1em;}
|
|
@ -2,11 +2,17 @@
|
||||||
var lightBoxShown=false;
|
var lightBoxShown=false;
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
images={};//image cache
|
images={};//image cache
|
||||||
var overlay=$('<div id="lightbox_overlay"/>');
|
loading_str = t('files_imageviewer','Loading');
|
||||||
|
var overlay=$('<div id="lightbox_overlay"><div id="lightbox_loader"><img /></div></div>');
|
||||||
|
overlay.find('#lightbox_loader img')
|
||||||
|
.attr('src',OC.imagePath('core', 'loading-dark.gif'))
|
||||||
|
.attr('alt',loading_str)
|
||||||
|
.after(loading_str);
|
||||||
$( 'body' ).append(overlay);
|
$( 'body' ).append(overlay);
|
||||||
var container=$('<div id="lightbox"/>');
|
var container=$('<div id="lightbox"/>');
|
||||||
$( 'body' ).append(container);
|
$( 'body' ).append(container);
|
||||||
$( 'body' ).click(hideLightbox);
|
$( '#lightbox_overlay' ).click(hideLightbox);
|
||||||
|
$( '#lightbox' ).click(hideLightbox);
|
||||||
if(typeof FileActions!=='undefined'){
|
if(typeof FileActions!=='undefined'){
|
||||||
FileActions.register('image','View','',function(filename){
|
FileActions.register('image','View','',function(filename){
|
||||||
viewImage($('#dir').val(),filename);
|
viewImage($('#dir').val(),filename);
|
||||||
|
@ -35,7 +41,8 @@ function viewImage(dir,file){
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.onload = function(){
|
img.onload = function(){
|
||||||
images[location]=img;
|
images[location]=img;
|
||||||
showLightbox(container,img);
|
if($('#lightbox_overlay').is(':visible'))
|
||||||
|
showLightbox(container,img);
|
||||||
}
|
}
|
||||||
img.src = location;
|
img.src = location;
|
||||||
}else{
|
}else{
|
||||||
|
@ -67,10 +74,10 @@ function showLightbox(container,img){
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideLightbox(event){
|
function hideLightbox(event){
|
||||||
if(lightBoxShown){
|
if(event){
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
$('#lightbox_overlay').hide();
|
$('#lightbox_overlay').hide();
|
||||||
$('#lightbox').hide();
|
$('#lightbox').hide();
|
||||||
lightBoxShown=false;
|
lightBoxShown=false;
|
||||||
}
|
}
|
||||||
}
|
}
|
Binary file not shown.
After Width: | Height: | Size: 673 B |
Loading…
Reference in New Issue