iam using http://fineuploader.com/ , delete function. when fineuploader delete file, displays loading image. not want show loading image , instead fade out image. how can override fineupload delete function "design" jquery?
fineuploader html
<div class="qq-upload-list-selector"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class ="thumbnail"> <div class="gallery-box"> <a href="#" class="qq-upload-delete-selector caption simple-caption delete-single-image just-uploaded"> <span class="qq-upload-delete-selector glyphicon glyphicon-trash"> delete</span> </a> <span class="qq-upload-spinner-selector qq-upload-spinner-overlay"> <span class="qq-upload-spinner"> <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> <span class="upload-photo-text">uploading photo...</span> </span> </span> <img class="qq-thumbnail-selector" qq-max-size="250" qq-server-scale> <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span> </div> </div> </div> </div>
fineuploader delete
deletefile: { enabled: true, method: "post", endpoint: url + "path..." }
my on delete javascript (jquery) try override default fineupload delete behavior (not working). delete function still displays loading image , picture doesn't fade out.
.on("delete", function(event, id) { $(this).parents(".thumbnail").animate("fast") .animate({ opacity: "hide" }, "slow"); });
to react event when delete finished, subscribe deletecomplete
event. delete
event fired before actual request sent server , deletion processed. deletecomplete
event fired after response received server if deletion successful.
to remove default spinner, remove relevant elements template. in case remove:
<span class="qq-upload-spinner-selector qq-upload-spinner-overlay"> <span class="qq-upload-spinner">
you then, inside handler, apply class thumbnail element apply css transition element. if delete fails remove class , have transition back.
i think jquery selector incorrect too. note $(this)
in context of fine uploader event handler refers jquery-wrapped htmlelement
.
to add transition, i'd suggest css transitions rather doing them in javascript.
.qq-thumbnail-selector { opacity: 1; } .qq-thumbnail-selector .qq-thumbnail-selector-transition { opacity: 0; transition:opacity .5s, transform .5s; }
note in current version of fine uploader entire contents of "qq-upload-list-selector"
removed dom when file deleted. if you'd prefer react change , determine manually whether or not remove element open feature request if considered future release.
also, suggest ditch jquery altogether. adds unnecessary complexity , performance overhead.
Comments
Post a Comment