Prezento, a jQuery plugin to showcase your web designs

Show off your responsive web designs. Include the plugin, apply the settings and you're ready to impress your visitors!

Latest update on Github:

Mobile First

Show your designs on mobiles, tablets, laptops, tvs, or any other device you like. You control the breakpoints.

CSS Animations

Instead of letting your users scroll, Prezento does the scrolling for you. Using CSS Animations your design will scroll from top to bottom.

Fully Adaptable

You decide what you want to showcase, which devices you want to use, how fast the animation per device should go,...


Getting Started

With prezento you can show your web designs in a new, interactive way. Show your visitors that you've created a responsive design, choose the device the design should be showcased on and you're set. Here is how:

                    
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<!-- include prezento -->
<script src="http://path/to/your/copy/of/jquery.prezento.js"></script>

<script>
    $('.prezento-holder').prezento({
        //see below for settings
    });
</script>

...

<!-- declare a prezento placeholder-->
<div class="prezento-holder"></div>
                

Usage

You need to declare at least one device in your plugin settings, if you forget to do so you will see this:

You haven't defined any devices. Please read the instructions on how to do this. At least one device is needed for this plugin to work.

                    
<script>
    $('.prezento-holder').prezento({
      devices: [{
        name: 'imac',
        deviceImageSRC: 'imac.png',
        xLeftTop: 186,
        yLeftTop: 111,
        xRightBottom: 2106,
        yRightBottom: 1261,
        breakpoint: 1024,
        bgImgSrc : 'your-web-design.jpg',
        bgTransitionDuration: '8s'
      },{
        name: 'ipad',
        deviceImageSRC: 'ipad.png',
        xLeftTop: 112,
        yLeftTop: 110,
        xRightBottom: 890,
        yRightBottom: 1144,
        breakpoint: 480,
        bgImgSrc : 'your-web-design-for-tablet.jpg',
        bgTransitionDuration: '4s'
      },{
        name: 'iphone',
        deviceImageSRC: 'iphone.png',
        xLeftTop: 42,
        yLeftTop: 135,
        xRightBottom: 439,
        yRightBottom: 829,
        breakpoint: 0,
        bgImgSrc : 'your-web-design-for-mobile.jpg',
        bgTransitionDuration: '2s'
      }], 
      responsive: 'window'
    });
</script>
                

Options

Name Options
devices[ ]
Name Type Description
name string Give a unique name to this device, usefull when you want to add controls to let the user change the device (see commands)
deviceImageSRC string Source of the image of the device
xLeftTop int X Coordinate of the left top position of the screen
yLeftTop int Y Coordinate of the left top position of the screen
xRightBottom int X Coordinate of the right bottom position of the screen
yRightBottom int Y Coordinate of the right bottom position of the screen
breakpoint int Screenwidth in pixels. Mobile first, so all screensizes bigger than given value will use this device.
bgImgSrc string Source of your webdesign you want to use with this device.
bgTransitionDuration string The duration of the animation in seconds.
Name Type Default Description
debug boolean false controls if you want to have some developer output in your console. (It shows the contents of all devices you added)
deviceHolder string 'deviceholder' classname of the device which will be used by the script. A new div will be created inside the showcase holder.
deviceScreen string 'devicescreen' classname of the devicescreen which will be used by the script. A new div will be created inside the showcase holder.
startAfterScroll boolean false If the scrolling of the screen should be triggered based on the position of the users viewport. Could be handy if you have a large page and your prezento is below the viewport onload.
distanceTop float or string 0.25 or '25%' If startAfterScroll is true, what should be the distance from the top of the browser to the div holder. Either a value between 0 - 1 or a percentage between 0% - 100%
resetWhenBelow boolean false If the animation should reset itself when it is out of the viewport
responsive string 'window' If the resize event should be triggered, to show your responsive layout. Can be 'window' (breakpoints based on window size), 'parent' (breakpoints based on parent container size), or 'none' (no resize will happen).
autoPlay boolean true If the animation should start directly after pageload.

Commands

Command Description Example Usage
play() start the animation
                                    
$('.prezento-holder').prezento.play();
                                
pause() pause the animation
                                    
$('.prezento-holder').prezento.pause();
                                
resume() resume the animation
                                    
$('.prezento-holder').prezento.resume();
                                
reset() reset the animation
                                    
$('.prezento-holder').prezento.reset();
                                
changeDevice(name) Change the device your design is presented on based on the name you have entered for the device
                                    
$('.prezento-holder').prezento.changeDevice('imac');
                                

Browser Support

Chrome Firefox Safari Opera IE iOS
✓ 5+ ✓ 4+ ✓ 12+ ✓ 10+

Copyright and License

Copyright © Ivaldi (http://ivaldi.nl)
Prezento is licensed under the GNU Affero General Public License Version 3.