2
Ive는 내가 사용하는 파일 관리자/파일 업로드 스크립트에 이미지 호버 미리보기 옵션을 추가하는 여러 가지 방법을 시도했습니다.이 jquery 스크립트에 이미지 미리보기를 어떻게 추가합니까?
아래에 내 스크립트를 게시하십시오. 어떤 도움을 주셔서 감사합니다.
$(function($){
var optionDefaults = {
path : '',
upload : false,
readonly : false,
fixedPath : false,
baseClass : 'fmBase',
folderClass : 'fmFolder',
trashClass : 'fmTrash',
backClass : 'fmBack',
loadingClass : 'fmLoading',
highlightClass : 'ui-state-highlight',
hoverClass : 'ui-state-active'
};
$.fn.fileManager = function(settings, pluploadOptions) {
var mbOptions = $.extend({}, optionDefaults, settings);
if (!mbOptions.ajaxPath) {
alert('ajaxPath not specified'); return;
}
if (mbOptions.fixedPath) mbOptions.path = mbOptions.fixedPath;
pluploadOptions = $.extend({url:mbOptions.ajaxPath,runtimes:'html5,html4'}, pluploadOptions);
var query = $.extend({},{path:mbOptions.path},mbOptions.get);
this.each(function() { // swap with getJSON so not duplicating ajax
var $sel = $(this);
$.getJSON(mbOptions.ajaxPath, query, function(data, status) {
$sel.data('result',data);
$sel.data('options',mbOptions);
if (status != "success") {
var msg = "Sorry but there was an error: "+status;
}
// process response
$sel.empty();
if (!mbOptions.readonly) {
$sel.append('<div class="path"><b>URL Path:</b> '+data.rootPath+data.path+'</div>');
if (data.path && !mbOptions.fixedPath) DrawItem($sel,{path:'..',title:'...',type:3});
DrawItem($sel,{path:'',title:'',type:2});
}
if ($(data.files).length == 0) {
$sel.append('<div style="font-size:12px; margin: 35px 0 0 15px;">No files in this folder</div>');
}
$(data.files).each(function() {
DrawItem($sel,this);
});
$sel.append('<div style="clear:both"></div>');
if (!mbOptions.readonly)
$sel.append($('<div style="margin:5px">New Folder</div>').button().bind('click',NewFolder));
if (mbOptions.upload) {
var ul = $('<div></div>').hide();
$sel.append($('<div style="margin:5px">Upload Files</div>').button().bind('click',{container:ul},UploadFiles));
$sel.append(ul);
}
// end processing
$('.'+mbOptions.baseClass,$sel).disableSelection();//bind('selectstart',function() { return false; });
$('.'+mbOptions.folderClass,$sel).bind('dblclick',ItemDblClick);
$('.'+mbOptions.backClass,$sel).bind('dblclick',ItemDblClickBack);
});
function UploadFiles(event) {
$(event.data.container).toggle();
if (plupload && pluploadOptions) {
if (!$(event.data.container).pluploadQueue) {
$(event.data.container).html('Must install Plupload jquery plugin.'); return;
}
var opts = pluploadOptions;
opts.url = opts.url+ (opts.url.indexOf('?') < 0 ? '?' : '&') +'path='+$sel.data('result').path;
$(event.data.container).pluploadQueue(opts);
$(event.data.container).pluploadQueue().bind('FileUploaded',function (uploader,file,response) {
if (uploader.total.queued == 0) {
RefreshView($sel);
}
});
} else {
$(event.data.container).html('Must install Plupload.');
}
}
function NewFolder() {
var path = prompt('Enter Folder Name:');
if (!path) return;
if ($sel.data('result').path) path = $sel.data('result').path + '/' + path;
ReloadFolder($sel, path);
}
});
function FileDropped(event,ui) {
var from = $(ui.draggable);
var to = $(this);
if ($(this).hasClass(mbOptions.trashClass)) {
if (confirm('Delete "'+from.data('item').title+'"?')) {
ajaxData = {path:mbOptions.path,'delete':from.data('item').path};
$.ajax({url:mbOptions.ajaxPath,data:ajaxData,dataType:'script',complete:function() {
RefreshView(from.data('item').target);
}});
}
} else {
return Rename(from.data('item').target,from.data('item').path,to.data('item').path+'/'+from.data('item').path);
}
};
function Rename(view,from,to) {
ajaxData = {path:mbOptions.path,mFrom:from,mTo:to};
$.ajax({url:mbOptions.ajaxPath,data:ajaxData,dataType:'script',complete:function() {
RefreshView(view);
}});
}
function ItemDblClick() {
var item = $(this).data('item');
if (item.type != ICONTYPE_FOLDER) return;
var path = item.path;
if (item.target.data('result').path) path = item.target.data('result').path + '/' + path;
ReloadFolder(item.target,path);
}
function ItemDblClickBack() {
var item = $(this).data('item');
if (item.type != ICONTYPE_BACK) return;
var path = item.path;
if (item.target.data('result').path) path = item.target.data('result').path + '/' + path;
ReloadFolder(item.target,path);
}
function RefreshView(target) {
ReloadFolder(target,target.data('result').path);
}
function ReloadFolder(target,path) {
target.fileManager($.extend({},mbOptions,{path:path}),pluploadOptions);
};
var ICONTYPE_FILE = 0;
var ICONTYPE_FOLDER = 1;
var ICONTYPE_TRASH = 2;
var ICONTYPE_BACK = 3;
function DrawItem(target, item) {
if (item.type == ICONTYPE_FOLDER && mbOptions.fixedPath) return;
item.target = $(target);
item.fullPath = item.target.data('result').rootPath + item.target.data('result').path + '/' + item.path;
var icon = $('<div title="'+item.title+'"></div>');
icon.data('item',item);
icon.addClass(mbOptions.baseClass);
// set classes
if (item.type == ICONTYPE_FOLDER)
icon.addClass(mbOptions.folderClass);
else if (item.type == ICONTYPE_TRASH)
icon.addClass(mbOptions.trashClass);
else if (item.type == ICONTYPE_BACK)
icon.addClass(mbOptions.backClass);
// set draggables
if (!mbOptions.readonly) {
if (item.type == ICONTYPE_FOLDER || item.type == ICONTYPE_TRASH)
icon.droppable({tolerance:'intersect',accept:'.'+mbOptions.baseClass,drop:FileDropped,hoverClass:mbOptions.hoverClass,activeClass:mbOptions.highlightClass});
if (item.type != ICONTYPE_TRASH && item.path != '..')
icon.draggable({stack:'files',revert:true,zIndex:1000,opacity:0.5,scroll:false});
}
if (item.type == ICONTYPE_FILE && item.path.search(/.jpeg|.jpg|.png|.gif|.tif|.tiff/i) > -1) {
icon.css('background-image','none');
icon.append('<img style="width:100%;height:100%" src="'+item.fullPath+'">');
}
// events
if (mbOptions.events) {
$.each(mbOptions.events,function (index,value) {
icon.bind(index, value);
});
}
icon.data('result',target.data('result'));
target.append(icon);
if (!item.path) return;
//if (mbOptions.readonly) return;
var ext = item.path.match(/\.[^.\b]*$/i);
if (ext) ext = ext[0];
else ext = '';
var basename = item.path.replace(ext,'');
var renamebox = $('<input style="position:absolute;left:0px;bottom:0px;right:0px" type="text">')
.bind('focus',function() { $(this).val(basename); })
.bind('blur',function() { $(this).hide(); if (item.path == $(this).val()+ext) return; Rename(item.target,item.path,$(this).val()+ext); })
.bind('keydown',function(event) { if (event.keyCode == '13' || event.keyCode == '27') $(this).blur(); })
.hide()
.appendTo(icon);
var label = $('<div class="label">'+item.title+'</div>')
.prependTo(icon)//.bind('dblclick',function() {return false;})
.bind('click',function() {
if (!mbOptions.readonly) {
renamebox.show().focus();
return false;
}
});
}
return $(this);
};
}) (jQuery);
Heres는 이미지 미리보기 스크립트 :
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};// starting the script on page load
$(document).ready(function(){
imagePreview();
});
임 데 문제는 내가 파일 관리자 부분에 미리보기 부분을 작성해야합니다. 파일 관리자 스크립트가 json/ajax를 사용하여 모든 것을 직접 작성하기 때문에 미리보기는 별도의 스크립트로 작동합니다. 참고로 미리보기 스크립트는 자체 테스트 페이지에서 잘 작동합니다. 바라기를 이것은 내 문제를 분명히합니다.