Monitor Reply

Support

Transition effects for Tile Gallery?

Permalink Browser Info Environment April 14, 2015 at 8:07 AM

Hi!

I would like to know if there are any options for transition effects like fading that could be hardcoded in a custom template for the Tile Gallery of GalleryES?

Thank you,
Michael

Type:	Discussion
Status:	Resolved

emirii replied on Apr 14, 2015 at 8:22 am Permalink Reply

Hello, If you mean the lightbox transition between images, you can use CSS transitions. Below is an example I found for a simple fade-in (I haven't tested this specific, but I've made similar in the past) if you are familiar with CSS it should be pretty simple to implement on your theme CSS to override mine.

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}

Viewing 15 lines of 35 lines. View entire code block.

 
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
 
@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
 
@-o-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
 
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
 
.mfp-open .mfp-figure {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

But if you want other jQuery effects or transitions on the thumbnails/how they load/etc you can always download whatever plugin you want and implement per the instructions, just use selector ".galleryES img" and it should be good to go!

GalleryES

Support

Transition effects for Tile Gallery?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post