lightcase
lightcase copied to clipboard
cbopp-art
Autosize of images fails on Microsoft edge.
Lightcase randomly fails to set the proper size of the image. For what I see it seems to get the height of the loading animation and leaves that size for the image when it finishes loading.
Also, if I trigger a browser resize jQuery(window).trigger('resize'); the image will refresh and fit properly.
A video and a image of what it seems to happen:
http://www.youtube.com/watch?v=fN5RqY4CbIY&hd=1
Or in any case, where / how could I force the code $(window).trigger('resize');after it finish each next or previous event.
I tried including a triggerResize after _adjustDimensions but it won't work ( it hangs the browser )
Did you consider to use one of the hook functions? http://cornel.bopp-art.com/lightcase/documentation/#hooks
On 26.07.2016, at 17:25, Fabian [email protected] wrote:
Or in any case, where / how could I run a $(window).trigger('resize');after it finish each next or previous event.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.
I did, I included the trigger resize on the onFinish hook function, but it doesn't work. But if I apply that trigger on the console it does work perfectly. It's pretty strange really.
Thanks!
call instead: lightcase.resize();
On 28.07.2016, at 19:16, Fabian [email protected] wrote:
I did, I included the trigger resize on the onFinish hook function, but it doesn't work. But if I apply that trigger on the console it does work perfectly. It's pretty strange really.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.
And this just happens in Internet explorer ( edge and 11 so far ). In Chrome, Firefox, Safari and Opera everything works perfectly.
It seems that it doesn't sets properly the size of the container even when the size of the image is properly set.
Strange! Could you may provide a link to something like a test page where it is possible to reproduce that issue?
Hi!, any luck with this?. I am working on this myself too, but I can't seem to solve it. :-(
I hacked this as a temporary solution, it triggers a resize event half a second after if finish showing the next slide. There's an annoying flash but at least this hack gives me time to look for a proper solution.
Ok, narrowing the problem:
I added a console log to this function:
And it seems that the problem is that there's no "height" dimension when the function tries to set the height on the css.
For what I'm seeing it must be something related to the lag while loading each image, because if you watch all the slides and go back to the beginning the second pass won't fail. It seems the problem must be related with the code trying to get the dimensions of the image while it hasn't been fully loaded.
Ok, I think I solved the problem. If I add a 100 miliseconds delay when showing the content I give time to the IE to add the img to the DOM and get the proper height.
/**
* Loads the new object
*
* @param {object} $object
* @return {void}
*/
_loadObject: function ($object) {
// Load the object
switch (_self.objectData.type) {
case 'inline':
if ($(_self.objectData.url)) {
_self._showContent($object);
} else {
_self.error();
}
break;
case 'ajax':
$.ajax(
$.extend({}, _self.settings.ajax, {
url: _self.objectData.url,
type: _self.objectData.requestType,
dataType: _self.objectData.requestDataType,
data: _self.objectData.requestData,
success: function (data, textStatus, jqXHR) {
// Unserialize if data is transferred as json
if (_self.objectData.requestDataType === 'json') {
_self.objectData.data = data;
} else {
$object.html(data);
}
_self._showContent($object);
},
error: function (jqXHR, textStatus, errorThrown) {
_self.error();
}
})
);
break;
case 'flash':
_self._showContent($object);
break;
case 'video':
if (typeof($object.get(0).canPlayType) === 'function' || _self.objects.case.find('video').length === 0) {
_self._showContent($object);
} else {
_self.error();
}
break;
default:
if (_self.objectData.url) {
$object.load(function () {
// ----------------------------------------------------------
setTimeout(function(){ _self._showContent($object); }, 100);
// ----------------------------------------------------------
});
$object.error(function () {
_self.error();
});
} else {
_self.error();
}
break;
}
},