featured video in masonry gallery - Support | Kriesi.at

Tagged: featured video, Masonry Gallery, tooltip, video autoplay

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
January 31, 2019 at 12:12 am #1060655
Munford
Participant
HI Kriesi gurus

a few questions:

1. my client wants a masonry gallery like the one on this page https://www.visuello.no/, where there is a mix of image and video thumbnails (featured images) with the videos playing automatically. I looked at https://wordpress.org/plugins/featured-video-plus/ plugin which looks like what I need, but it hasn’t been updated in awhile and my test with it was not good. Is there a way to do this in enfold? Or have a video gallery where the thumbnails autoplay?

2. an you tell me how to disable the loading animation on the masonry and have the it look more like it does on that page? I’d the caption to be white text on black background on hover, but with a fade in, instead of the default pop up caption tab. Can you help with that css?

3. is there any way to get rid of the loading symbol on the background video on the page below. It’s being linked from vimeo. Is there a better way to load it?

thanks very much
Nancy
- This topic was modified 5 years, 10 months ago by Munford.
February 1, 2019 at 5:07 pm #1061611
hyon1
Participant
Hello Kriesi’s team,
I’m looking for exactly the same solution like Point 1.
It would be great if that could be fineness.

Best regards
HYON
- This reply was modified 5 years, 10 months ago by hyon1.
February 5, 2019 at 12:53 am #1062947

Basilis
Inactive Moderator

Hi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Basilis

February 5, 2019 at 10:53 am #1063106

Munford
Participant

OK thanks – figured that. I saw someone do it with gifs instead of videos, will look into that.

February 6, 2019 at 8:33 am #1063510

Rikard
Keymaster

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

March 5, 2019 at 4:15 pm #1074945
Munford
Participant
HI Rikard
I still need help on a couple things:

1. I’d like the masonry gallery to fade in instead of the default animation, but I can’t get it to work properly.
I have this code:
```
.fadeingallery .av-inner-masonry {
	opacity: 1;
	animation-name: fadeInOpacity!important; 
	animation-iteration-count: 1!important; 
	animation-timing-function: ease-in !important; 
	animation-duration: 2s!important; 
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
```
which worked on this site: http://theflyingrug.com/
but on the site below the gallery still loads wrong. I have the gallery element in a column that is set to a fade-in animation as well, which is working with the “click on the images to see video” text, but the images below are not fading in unless you am already scrolled down to that section.

2. I’d also like to change the opacity on the masonry gallery hover background color but can’t get it to work.

Can you help me with this?
thanks
Nancy
- This reply was modified 5 years, 9 months ago by Munford.
March 8, 2019 at 8:28 am #1076257
Ismael
Moderator
Hi,

Thanks for the update.

1.) You can apply that animation using the following css declaration. Just replace the default animation name “avia_msonry_show” with your own.
```
.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: avia_msonry_show 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
    animation: avia_msonry_show 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
}
```
And you should NOT be setting the opacity to 1 because it disables the animation completely.

2.) Add this css code to adjust the transparency of the caption container background.
```
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,0,0,0.97);
}
```
Default opacity value is 0.35.

Best regards,
Ismael
March 9, 2019 at 12:00 pm #1076713
Munford
Participant
Hi Ismael
thanks I will try that.

I am having another problem with the masonry galleries – I would like the title/caption to show under the lightbox videos, but can’t get it working. I have the titles on the media in description and caption areas of the image. Is it because it’s a video link?

I also tried to put the caption info in the alt text to have it as a tooltip but all that I see is the title. Not sure what is going on there.
Can you take a look?
- This reply was modified 5 years, 9 months ago by Munford.
March 9, 2019 at 1:47 pm #1076756
Munford
Participant
HI again
So i added that animation code and now I have this:
```
.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: fadeingallery 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
    animation: fadeingallery 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075);
}

.fadeingallery .av-inner-masonry {
	opacity: 1;
	animation-name: fadeInOpacity!important; 
	animation-iteration-count: 1!important; 
	animation-timing-function: ease-in !important; 
	animation-duration: 2s!important; 
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
```
now on the page below with a few galleries I see a fade in on page load but not when I scroll down. Can they fade on on scroll as well? I am also having an issue with the gallery not loading at all on the page until you resize the window – see below. Can you see what is causing that? is it something in the code? (I don’t really understand animation code enough to troubleshoot it)

thanks for your help
Nancy
March 11, 2019 at 12:12 pm #1077289
Ismael
Moderator
Hi,

Thank you for using Enfold.

Remove this css code because it’s just a duplicate of the other one.
```
.fadeingallery .av-inner-masonry {
	opacity: 1;
	animation-name: fadeInOpacity!important; 
	animation-iteration-count: 1!important; 
	animation-timing-function: ease-in !important; 
	animation-duration: 2s!important; 
}
```
Are they loading properly when you remove this modification?

Best regards,
Ismael
March 11, 2019 at 12:48 pm #1077310
Munford
Participant
hi I got rid of that code but don’t see any change on the animation, although sometimes it takes a long time before I see changes in chrome.
it seemed to change the loading on the page below, but there is a delay on it and it’s not fading in like I need it to.

thanks
Nancy
- This reply was modified 5 years, 9 months ago by Munford.
March 14, 2019 at 11:09 pm #1078919

Munford
Participant

I opened up another thread on this:

masonry fade in problems

you can close this one.

March 16, 2019 at 6:39 pm #1079472

Basilis
Inactive Moderator

Hi,

Sure thank you for letting us know.

Best regards,
Basilis
Author

Posts