Before image not the same size than After image when resize height and width

[Crustybat08]

Hello, I'm resizing two images to display the comparison in a confluence page. The result is the before image is smaller than the after image. It looks like the before image is reduced twice and display at 25% compare to 50% for the after image. Do you think you can fix this issue ? Thanks

[v20100v]

Hello,

You are right,I had found the same bug but i didn't find the time to fix it. In my opinion this is a simple bug css - fix height. If you want to contribute, it would be a pleasure ^^. and if not I'd try to see if I can do it

Thank you for your return

[Crustybat08]

Sorry but i'm a real newbie in css i take a quick look and I don't really find the root of this issue.... So i you have a little bit of time to fix it i will be very gratefull !

[v20100v]

Hello @Crustybat08

I found the problem in the code source of https://github.com/sylvaincombes/jquery-images-compare.

To fix it, i choose to

• Get the slider size by parsing parameters height and width given in macro
• Resize images in slider (after and before) with keeping apsect ratio
• Resize the frontElement (image-compare-before) with size's image
• And finally resize the slider.

I tested different use cases: with percentage or fixed size, And everything seems fine

[Crustybat08]

Thanks a lot for the fix ! that's great ! I will test this asap

[Crustybat08]

Hello, First of all ! Happy new year ! Sorry to get back to you on this one, but we found another bug when we are using multiple image comparison in the same page. I don't know why but only on the first one the rescale/resize work properly. I tried with pourcentage and pixel but i can't make it work for the second instances.... Do you have any idea of what's going on ?

For infos we also had an update on confluence version we use now : Confluence 7.1.2 Maybe it's related...

Anyway thanks a lot for your help on this !

[v20100v]

Hello Crustbat,

Thx !!! and happy new year too !!!

In my organization, we use Confluence 6.13.2 unfortunately... I try to reproduce your bug and fix it... if i can find time to do it. Without looking the code, i would say a problem with ID (tag html) and css styles.

Cordially, Vincent.

[Crustybat08]

Thanks for the feedback ! We take a quick look and each instances has a different ID. But we realize if we made a refresh with F5 of the page, the second times all the instances are working normally. So maybe it's because the script is faster than image loading or something like that. It seems to be a problem of synchronisation more than logic. I hope it helps !

[v20100v]

We take a quick look and each instances has a different ID.

Ok sound greats ! There here no problem with html IDs. You can see the definition of html ID here :

#set($id=$action.dateFormatter.calendar.timeInMillis)
(...)
var slider = window.parent.AJS.${jQuery}('${hashtag}image-comparison-slider-${id}');

But we realize if we made a refresh with F5 of the page, the second times all the instances are working normally. So maybe it's because the script is faster than image loading or something like that.

Ok that's ugly :( U right, in js we modify the DOM of html page. I take a lookaround in velocity, and i hope find an idea.

[v20100v]

Try to pu a timeout (setTimeout) 1 or 2 sec on initilaization of slider.

In row 184 :

// Init plugin jquery-images-compare 
var slider = window.parent.AJS.${jQuery}('${hashtag}image-comparison-slider-${id}');
var imagesCompareElement = slider.imagesCompare(settings);
var imagesCompare = imagesCompareElement.data('imagesCompare');
var contentSlider = window.parent.AJS.${jQuery}('${hashtag}content-image-comparison-slider-${id}');

in order to be sure that the DOM is really "ready".

I'm not sure that two bellow encapsulation works as expected...

AJS.toInit(function(){
    $(document).ready(function(){

We plan to switch to version 7 confluence around March or April. Otherwise, we have planned to switch to version 7 confluence around March or April. I could do tests right after.

[v20100v]

I cannot reproduce this bug. Is it possible to take a video capture?

[Crustybat08]

thanks a lot for your quick answer ! i will see with a programmer if we can add the timeout And yes i can do a video capture of course