Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1060655

    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, 4 months ago by Munford.
    #1061611

    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, 4 months ago by hyon1.
    #1062947

    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

    #1063106

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

    #1063510

    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

    #1074945

    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, 3 months ago by Munford.
    #1076257

    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

    #1076713

    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, 3 months ago by Munford.
    #1076756

    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

    #1077289

    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

    #1077310

    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, 3 months ago by Munford.
    #1078919

    I opened up another thread on this:

    you can close this one.

    #1079472

    Hi,

    Sure thank you for letting us know.

    Best regards,
    Basilis

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘featured video in masonry gallery’ is closed to new replies.