Your Cart

Ken Burns effect

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums This and that Ken Burns effect

  • gravatar
    Samuel
    June 18, 2012 at 11:06 am

    I try to create Ken Burns effect in galleria. Here is very basic
    prototype. Any ideas are welcome. (I think, It would be better to
    use data layer instead of description, because it supports html
    href I hope.)

    Galleria.configure({
            trueFullscreen:false,
            imageCrop:true,
            thumbnails:false,
            showCounter:false,
            _toggleInfo:false,
            transition:'fade',
            transitionSpeed: 800,
            showImagenav:false,
            autoplay:4000
        });
    Galleria.ready(function() {
        this.bind('loadfinish', function() {
            $('.galleria-images img').animate({
                width:  '+=50%',
                height: '+=50%',
                left:   '-=25%',
                top:   '-=25%'
            }, 5000);
        });
    });
    

    http://jsfiddle.net/M4G8b/


    gravatar
    Samuel
    June 19, 2012 at 10:05 pm

    One problem solved 🙂 In description I can use href, it just
    have to be without quotes.
    I am in new problem. I try to add more animations
    http://jsfiddle.net/M4G8b/4/
    and cant set dimensions to image after load. (animation e)
    http://jsfiddle.net/M4G8b/2/


    gravatar
    Samuel
    June 22, 2012 at 10:09 pm

    So here it is. Some effects are more eye candy, some are
    less.
    http://jsfiddle.net/M4G8b/10/

    Galleria.loadTheme('themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
    Galleria.configure({
            trueFullscreen:false,
            imageCrop:true,
            thumbnails:false,
            showCounter:false,
            _toggleInfo:false,
            transition:'fade',
            transitionSpeed: 800,
            showImagenav:false,
            autoplay:3000
        });
    Galleria.ready(function() {
            var galleria = this,
            anim1 = [
                [{},{width:'+=30%',height:'+=30%'}],
        [{"left":"auto","right":"0","top":"auto","bottom":"0"},{width:'+=30%',height:'+=30%'}],
        [{"width":function(index, value) {
            return parseFloat(value) * 1.3;},
          "height":function(index, value) {
            return parseFloat(value) * 1.3;},
          "left":"auto",
          "right":"0"
         },{width:'-=24%',height:'-=24%'}],
        [{},{width:'+=30%',height:'+=30%',top:'-=15%',left:'-=15%'}]
            ];
            this.bind('loadfinish', function(e){
                var rand = Math.floor(Math.random()*anim1.length);
                $(e.imageTarget).css(anim1[rand][0]).animate(anim1[rand][1], 4600, 'linear');
            });
    });
    


    gravatar
    Primal Pictures
    June 27, 2012 at 3:52 pm

    That’s fantastic!
    The only problem I’m getting is that some photos, as they dissolve
    in, are beyond the edge of the photo so you see the edge and black
    area beyond. Have you seen this? And have you solved it?


    gravatar
    Primal Pictures
    June 27, 2012 at 4:42 pm

    BTW my images are 1300 px wide and generally have a 9:16 ratio
    (like HD video). I have determined that the problem only happens
    with the bottom edge. I played around with the various values in
    your code but could not fix the problem that way.


    gravatar
    Samuel
    June 27, 2012 at 10:23 pm

    Could you attach screenshot, or example please? I am not sure,
    what do you mean exactly.


    gravatar
    Primal Pictures
    June 28, 2012 at 2:57 pm

    I have tried on 4 macs and 2 PCs, multiple browsers. On some
    computers a particular browser will have no problems. There is no
    consistency about which browser or which computer.

    On average about one photo in 10 or 15 will come in after a
    dissolve positioned too high, so you can see off the end of the
    bottom of the photo.

    It does not relate to specific photos. It happens randomly to
    photos.

    I did a side test with images that are 3×4 ratio rather than the
    9×16 ratio of these images. And they were larger. Same problem.

    Same problem on iphone/safari

    I have not tried ipad yet but will do later.

    -Robert


    gravatar
    Primal Pictures
    June 28, 2012 at 3:48 pm

    Good news! I am using your version “9” and it works like a charm
    for me. I have tested it in various ways and it seems to work fine.
    What were you trying to fix or achieve in version 10?

    My slide show link still uses version 10 so you can check it
    out.

    This is the version 9 I used in a different test and seems to
    work fine in every browser and computer available to me:
    http://jsfiddle.net/M4G8b/9/


    gravatar
    Samuel
    June 28, 2012 at 8:14 pm

    It looks, like the problem is in some animation. (there are
    different types of animations matched randomly). I didn’t see that
    problem, but I didn’t test on more browsers.
    I really prefer non nudity samples.
    You can help me to find problem this way:
    In this line:

    $(e.imageTarget).css(anim1[rand][0]).animate(anim1[rand][1], 4600, 'linear');
    

    change “rand” on both places to same number – 0, 1, 2, 3, 4 and
    and see, if there is a problem, and let me know, on which
    number.
    Difference is, that “10” have more animation types and is easy to
    add more animations.
    Thanks.


    gravatar
    Primal Pictures
    June 28, 2012 at 9:01 pm

    Number 3 effect is the one with the problem. Almost every image
    starts way off. Number 4 produces no movement at all. 0, 1 and 2
    work well.


    gravatar
    Samuel
    June 29, 2012 at 6:27 am

    Thank you, I will look on it, when I will have some time.


    gravatar
    Samuel
    July 11, 2012 at 7:46 am

    So I looked at it. Problem was, that I used percent, and it is
    taken from parent element.
    Lets try.
    http://jsfiddle.net/M4G8b/11/


    gravatar
    Primal Pictures
    July 13, 2012 at 9:08 pm

    Initial tests seem to produce a vibrating or jittery image on
    some zoom-ins, but could be a function of the browser. Safari on my
    mac is very jumpy (slow) but I don’t use that browser much. I’ll
    have to try it on ipad. For the moment version 9 looks generally
    better with my subjective eye.


    gravatar
    Samuel
    July 13, 2012 at 9:42 pm

    I know about vibrating. It is jQuery animation limitation. At
    the moment, I have no idea, how to solve it. At chrome browser, it
    looks better. But it is still not very usable.


    gravatar
    Sebastian
    December 3, 2012 at 11:42 am

    Hi. I’m not a master in js but following your advice I made
    this:

    http://propiedades-singulares.novisline.es/girona/pga-catalunya-res
    Use canvas insted image. If you need the code I can send you but
    needs to improve.


1 2
Galleria uses cookies to provide necessary site functionality. By using our website, you agree to our Privacy Policy. I understand