Button control

Start the animation after the play button is pressed. When an animation is playing you can pause it and resume it afterwards. When the animation has ended you get the option to reset the animation and do it all over again.

Play Pause Resume Reset

Code

                    
<script>
    $('.prezento-holder').prezento({
      devices: [{
        name: 'imac',
        deviceImageSRC: './../images/imac.png',
        xLeftTop: 182,
        yLeftTop: 110,
        xRightBottom: 2106,
        yRightBottom: 1262,
        breakpoint: 1440,
        bgImgSrc : './../images/web-design-huge.jpg',
        bgTransitionDuration: '12s'
      },{
        name: 'macbookpro',
        deviceImageSRC: './../images/mbp.png',
        xLeftTop: 124,
        yLeftTop: 36,
        xRightBottom: 876,
        yRightBottom: 505,
        breakpoint: 860,
        bgImgSrc : './../images/web-design-large.jpg',
        bgTransitionDuration: '12s'
      },{
        name: 'ipad',
        deviceImageSRC: './../images/ipad.png',
        xLeftTop: 110,
        yLeftTop: 110,
        xRightBottom: 890,
        yRightBottom: 1144,
        breakpoint: 480,
        bgImgSrc : './../images/web-design-med.jpg',
        bgTransitionDuration: '15s'
      },{
        name: 'iphone',
        deviceImageSRC: './../images/iphone.png',
        xLeftTop: 40,
        yLeftTop: 134,
        xRightBottom: 440,
        yRightBottom: 830,
        breakpoint: 0,
        bgImgSrc : './../images/web-design-small.jpg',
        bgTransitionDuration: '4s'
      }],
      autoPlay: false
    });

    jQuery('.btn-play').on('click', this, function(){
        jQuery('.prezento-holder').prezento.play();
    });
    jQuery('.btn-pause').on('click', this, function(){
        jQuery('.prezento-holder').prezento.pause();
    });
    jQuery('.btn-resume').on('click', this, function(){
        jQuery('.prezento-holder').prezento.resume();
    });
    jQuery('.btn-reset').on('click', this, function(){
        jQuery('.prezento-holder').prezento.reset();
    });
</script>