https://github.com/ivaldi/prezento

A jQuery plugin to showcase your web designs -
https://github.com/ivaldi/prezento

Last synced: 8 months ago
JSON representation

A jQuery plugin to showcase your web designs -

Host: GitHub
URL: https://github.com/ivaldi/prezento
Owner: ivaldi
License: agpl-3.0
Created: 2014-01-15T09:42:54.000Z (over 12 years ago)
Default Branch: master
Last Pushed: 2014-01-21T08:37:30.000Z (over 12 years ago)
Last Synced: 2025-04-06T00:26:18.265Z (over 1 year ago)
Language: JavaScript
Homepage: http://ivaldi.github.io/prezento/
Size: 8.13 MB
Stars: 36
Watchers: 11
Forks: 11
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Prezento
========

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 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
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

iOS

✓
✓ 5+
✓ 4+
✓ 12+
✓ 10+
✓

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome