diff options
| -rw-r--r-- | core/js/jquery.avatar.js | 14 | ||||
| -rw-r--r-- | settings/js/personal.js | 13 |
2 files changed, 20 insertions, 7 deletions
diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js index dc73d8f0d91..1d2c07211e7 100644 --- a/core/js/jquery.avatar.js +++ b/core/js/jquery.avatar.js @@ -15,7 +15,7 @@ * You may use this on any <div></div> * Here I'm using <div class="avatardiv"></div> as an example. * - * There are 3 ways to call this: + * There are 4 ways to call this: * * 1. $('.avatardiv').avatar('jdoe', 128); * This will make the div to jdoe's fitting avatar, with the size of 128px. @@ -30,10 +30,14 @@ * This will search the DOM for 'user' data, to use as the username. If there * is no username available it will default to a placeholder with the value of * "x". The size will be determined the same way, as the second example did. + * + * 4. $('.avatardiv').avatar('jdoe', 128, true); + * This will behave like the first example, except it will also append random + * hashes to the custom avatar images, to force image reloading in IE8. */ (function ($) { - $.fn.avatar = function(user, size) { + $.fn.avatar = function(user, size, ie8fix) { if (typeof(size) === 'undefined') { if (this.height() > 0) { size = this.height(); @@ -67,7 +71,11 @@ if (typeof(result) === 'object') { $div.placeholder(result.user); } else { - $div.html('<img src="'+url+'">'); + if (ie8fix === true) { + $div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">'); + } else { + $div.html('<img src="'+url+'">'); + } } }); }); diff --git a/settings/js/personal.js b/settings/js/personal.js index f60ab72f8e6..e546e707ea5 100644 --- a/settings/js/personal.js +++ b/settings/js/personal.js @@ -50,15 +50,15 @@ function selectAvatar (path) { } function updateAvatar () { - $('header .avatardiv').avatar(OC.currentUser, 32); - $('#avatar .avatardiv').avatar(OC.currentUser, 128); + $('#header .avatardiv').avatar(OC.currentUser, 32, true); + $('#displayavatar .avatardiv').avatar(OC.currentUser, 128, true); } function showAvatarCropper() { $cropper = $('#cropper'); $cropperImage = $('#cropper img'); - $cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')); + $cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')+'#'+Math.floor(Math.random()*1000)); // Looks weird, but on('load', ...) doesn't work in IE8 $cropperImage.ready(function(){ @@ -77,8 +77,11 @@ function showAvatarCropper() { } function sendCropData() { + $cropper = $('#cropper'); $('#displayavatar').show(); $cropper.hide(); + $('.jcrop-holder').remove(); + $('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src'); var cropperdata = $('#cropper').data(); var data = { @@ -220,7 +223,9 @@ $(document).ready(function(){ $('#abortcropperbutton').click(function(){ $('#displayavatar').show(); - $cropper.hide(); + $('#cropper').hide(); + $('.jcrop-holder').remove(); + $('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src'); }); $('#sendcropperbutton').click(function(){ |