Prezento, a jQuery plugin to showcase your web designs.

Manually change the device

Normally, each device is shown when your screen is larger than the given breakpoint. With the changeDevice function you can manually override the shown device. Handy for when you don't want a resize event to be triggered, but still want to be able to show all screensizes.

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'
      }], 
        responsive: 'none'
    });

    jQuery('.btn-imac').on('click', function(){
        jQuery('.prezento-holder').prezento.changeDevice('imac');
    })
    jQuery('.btn-mbp').on('click', function(){
        jQuery('.prezento-holder').prezento.changeDevice('macbookpro');
    })
    jQuery('.btn-ipad').on('click', function(){
        jQuery('.prezento-holder').prezento.changeDevice('ipad');
    })
    jQuery('.btn-iphone').on('click', function(){
        jQuery('.prezento-holder').prezento.changeDevice('iphone');
    });
</script>