v3.8.1 had to change captions Css to make the opacity transition work

[charliecha67]

Hi, (first, Thanks for the amazing JG work!)

When I installed v3.8.1, I noticed that, on my website, the Css opacity transition on captions didn't work anymore. See here : https://www.charliedrawing.com/index-lastJG-CssAnim-notWork.html

After trying many changes, I found out that the transition works only if I change this .justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption { display: none; position: absolute; bottom: 0; padding: 8px; background-color: #000000; left: 0; right: 0; margin: 0; color: #FFFFFF; font-size: 14px; line-height: 18px; font-weight: 300; text-align: center; //font-family: sans-serif; } .justified-gallery > a > .jg-caption.jg-caption-visible, .justified-gallery > div > .jg-caption.jg-caption-visible, .justified-gallery > figure > .jg-caption.jg-caption-visible { display: initial; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transition: opacity 600ms ease; -moz-transition: opacity 600ms ease; -o-transition: opacity 600ms ease; transition: opacity 600ms ease; }

into this: .justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption { /* display: none; */ filter: "alpha(opacity=0)"; opacity: 0; position: absolute; bottom: 0; padding: 8px; background-color: #000000; left: 0; right: 0; margin: 0; color: #FFFFFF; font-size: 14px; line-height: 18px; font-weight: 300; text-align: center; //font-family: sans-serif; } .justified-gallery > a > .jg-caption.jg-caption-visible, .justified-gallery > div > .jg-caption.jg-caption-visible, .justified-gallery > figure > .jg-caption.jg-caption-visible { display: initial; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transition: opacity 600ms ease; -moz-transition: opacity 600ms ease; -o-transition: opacity 600ms ease; transition: opacity 600ms ease; }

So, I just deleted "display:none" and added "opacity:0" here: .justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption { /* display: none; */ filter: "alpha(opacity=0)"; opacity: 0;

The result is working well, as you can see here: https://www.charliedrawing.com/index-lastJG-CssAnim.html but I still don't understand WHY it didn't work with the initial version of the Css ?? Was there any other way to make the transition work ?

Thank you for any help/explanation !

[jefftucker1952]

Looks like another bug in JG that will never get fixed. It's abandonware. The workaround (and the reason I didn't discover it myself) is to disable the CSS animations and specify what you want in the JG setup. For example, I believe that adding a couple of lines to what you've already got will take care of it:

$('#alldrawings').justifiedGallery({
    rowHeight: 280,
    maxRowHeight: 450,
    lastRow: 'nojustify',
    margins : 8,
    cssAnimation: false,
    captionSettings: {animationDuration: 1000, visibleOpacity: 0.7, nonVisibleOpacity: 0.0}
});

[jefftucker1952]

BTW, somewhat off-topic, but for anyone who wants to wade into the CSS, first, don't kill yourself fighting with the minified version. This is a case in which minifying buys you almost nothing in page loading speed. It's just much harder to read and edit.

Second, you can cut the CSS down by removing the anachronisms in it. This, for example, is for IE8 (multiple occurrences, with varying opacity values):

filter: "alpha(opacity=10)"

It's long past time to be including coding for IE8 - the rest of your site probably doesn't support it, anyway.

There are also a bunch of vendor prefix attributes, all aimed at Chrome, Firefox, and Opera versions from 7 or more years ago. Since these browsers are self-updating, you can dump all of these (again, multiple occurrences):

  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  -o-transition: opacity 500ms ease-in;