WordPress.org

Support

Support » Themes and Templates » [Resolved] Gallery transitions

[Resolved] Gallery transitions

  • Hi,
    The theme is great, thanks!
    I would like to add some transitions to the lightbox wordpress photo gallery, eg a simple fade.
    I’ve tried it with css, but that doesn’t seem to work.
    – I’ve created galleries through wordpress gallery in my portfolio pages.
    – Enable Virtue Galleries to override WordPress: is ON

    Thanks very much,
    Ben

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Kadence Themes

    @britner

    Hey,
    Can you explain a little more, maybe post a link? Do you want the image thumbnails to fade when you hover over them?

    Kadence Themes

    Hi,
    I use the standard wordpress photo gallery. The thumbnails on the page etc. are okay for me. After I’ve clicked on a thumbnail and it opened in the lighbox, then I want to add a fade when I click through the large photos.
    Probably I can use a lightbox gallery plugin doing that. But I want to use as little as possible extra plugins.
    Thanks,
    Ben

    Theme Author Kadence Themes

    @britner

    You can try this, add this css to your custom css box in the theme options > advnaced settings:

    @-webkit-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @-moz-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @-o-keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    
    @keyframes k_fadeIn {
    	0% {opacity: 0;}
    	100% {opacity: 1;}
    }
    .mfp-figure {
      -webkit-animation-name: k_fadeIn;
    	-moz-animation-name: k_fadeIn;
    	-o-animation-name: k_fadeIn;
    	animation-name: k_fadeIn;
    	-webkit-animation-duration: .3s;
    	-moz-animation-duration: .3s;
    	-ms-animation-duration: .3s;
    	-o-animation-duration: .3s;
    	animation-duration: .3s;
    	-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;
    }

    Kadence Themes

    Hey, that’s great. Thanks very much!
    At first I noticed no difference. I had to increase the duration to see the effect 🙂
    And I’ve learned something new.

    All the best,
    Ben

    Resolved 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Gallery transitions’ is closed to new replies.