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!
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></div>
Usage
You need to declare at least one device in your plugin settings, if you forget to do so you will see an error message with a link, pointing to this readme.
<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 | 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 | |
| pause() | pause the animation | |
| resume() | resume the animation | |
| reset() | reset the animation | |
| changeDevice(name) | Change the device your design is presented on based on the name you have entered for the device | |