{"id":34498987,"url":"https://github.com/ivaldi/prezento","last_synced_at":"2025-12-24T01:57:41.255Z","repository":{"id":13246074,"uuid":"15930913","full_name":"ivaldi/prezento","owner":"ivaldi","description":"A jQuery plugin to showcase your web designs - ","archived":false,"fork":false,"pushed_at":"2014-01-21T08:37:30.000Z","size":8524,"stargazers_count":36,"open_issues_count":0,"forks_count":11,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-06T00:26:18.265Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ivaldi.github.io/prezento/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivaldi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-15T09:42:54.000Z","updated_at":"2020-07-03T02:30:43.000Z","dependencies_parsed_at":"2022-09-01T07:21:00.776Z","dependency_job_id":null,"html_url":"https://github.com/ivaldi/prezento","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ivaldi/prezento","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivaldi%2Fprezento","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivaldi%2Fprezento/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivaldi%2Fprezento/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivaldi%2Fprezento/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivaldi","download_url":"https://codeload.github.com/ivaldi/prezento/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivaldi%2Fprezento/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27992993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-23T02:00:07.087Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-24T01:57:35.175Z","updated_at":"2025-12-24T01:57:41.246Z","avatar_url":"https://github.com/ivaldi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Prezento\n========\n\u003ch2\u003eGetting Started\u003c/h2\u003e\n\u003cp\u003eWith 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:\u003c/p\u003e\n\n\u003cpre\u003e\n    \u003ccode\u003e\n\u0026lt;!-- include jQuery --\u003e\n\u0026lt;script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js\"\u003e\u0026lt;/script\u003e\n\n\u0026lt;!-- include prezento --\u003e\n\u0026lt;script src=\"http://path/to/your/copy/of/jquery.prezento.js\"\u003e\u0026lt;/script\u003e\n\n\u0026lt;script\u003e\n    $('.prezento-holder').prezento({\n        //see below for settings\n    });\n\u0026lt;/script\u003e\n\n...\n\n\u0026lt;!-- declare a prezento placeholder--\u003e\n\u0026lt;div class=\"prezento-holder\"\u003e\u0026lt;/div\u003e\n\t\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003ch2\u003eUsage\u003c/h2\u003e\n\u003cp\u003eYou 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.\u003c/p\u003e\n\u003cpre\u003e\n\u003ccode\u003e\n\u0026lt;script\u003e\n    $('.prezento-holder').prezento({\n      devices: [{\n        name: 'imac',\n        deviceImageSRC: 'imac.png',\n        xLeftTop: 186,\n        yLeftTop: 111,\n        xRightBottom: 2106,\n        yRightBottom: 1261,\n        breakpoint: 1024,\n        bgImgSrc : 'your-web-design.jpg',\n        bgTransitionDuration: '8s'\n      },{\n        name: 'ipad',\n        deviceImageSRC: 'ipad.png',\n        xLeftTop: 112,\n        yLeftTop: 110,\n        xRightBottom: 890,\n        yRightBottom: 1144,\n        breakpoint: 480,\n        bgImgSrc : 'your-web-design-for-tablet.jpg',\n        bgTransitionDuration: '4s'\n      },{\n        name: 'iphone',\n        deviceImageSRC: 'iphone.png',\n        xLeftTop: 42,\n        yLeftTop: 135,\n        xRightBottom: 439,\n        yRightBottom: 829,\n        breakpoint: 0,\n        bgImgSrc : 'your-web-design-for-mobile.jpg',\n        bgTransitionDuration: '2s'\n      }], \n      responsive: 'window'\n    });\n\u0026lt;/script\u003e\n\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003ch2\u003eOptions\u003c/h2\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n      \u003ctr\u003e\n          \u003ctd\u003e\u003cstrong\u003eName\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd colspan=\"3\"\u003e\u003cstrong\u003eOptions\u003c/strong\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003edevices[ ]\u003c/td\u003e\n          \u003ctd colspan=\"3\"\u003e\n              \u003ctable\u003e\n                  \u003cthead\u003e\n                      \u003ctr\u003e\n                          \u003cth\u003eName\u003c/th\u003e\n                          \u003cth\u003eType\u003c/th\u003e\n                          \u003cth\u003eDescription\u003c/th\u003e\n                      \u003c/tr\u003e\n                  \u003c/thead\u003e\n                  \u003ctbody\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003ename\u003c/td\u003e\n                          \u003ctd\u003estring\u003c/td\u003e\n                          \u003ctd\u003eGive a unique name to this device, usefull when you want to add controls to let the user change the device (see commands)\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003edeviceImageSRC\u003c/td\u003e\n                          \u003ctd\u003estring\u003c/td\u003e\n                          \u003ctd\u003eSource of the image of the device\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003exLeftTop\u003c/td\u003e\n                          \u003ctd\u003eint\u003c/td\u003e\n                          \u003ctd\u003eX Coordinate of the left top position of the screen\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003eyLeftTop\u003c/td\u003e\n                          \u003ctd\u003eint\u003c/td\u003e\n                          \u003ctd\u003eY Coordinate of the left top position of the screen\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003exRightBottom\u003c/td\u003e\n                          \u003ctd\u003eint\u003c/td\u003e\n                          \u003ctd\u003eX Coordinate of the right bottom position of the screen\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003eyRightBottom\u003c/td\u003e\n                          \u003ctd\u003eint\u003c/td\u003e\n                          \u003ctd\u003eY Coordinate of the right bottom position of the screen\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003ebreakpoint\u003c/td\u003e\n                          \u003ctd\u003eint\u003c/td\u003e\n                          \u003ctd\u003eScreenwidth in pixels. Mobile first, so all screensizes bigger than given value will use this device.\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003ebgImgSrc\u003c/td\u003e\n                          \u003ctd\u003estring\u003c/td\u003e\n                          \u003ctd\u003eSource of your webdesign you want to use with this device.\u003c/td\u003e\n                      \u003c/tr\u003e\n                      \u003ctr\u003e\n                          \u003ctd\u003ebgTransitionDuration\u003c/td\u003e\n                          \u003ctd\u003estring\u003c/td\u003e\n                          \u003ctd\u003eThe duration of the animation in seconds.\u003c/td\u003e\n                      \u003c/tr\u003e\n                  \u003c/tbody\u003e\n              \u003c/table\u003e\n          \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003e\u003cstrong\u003eName\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003cstrong\u003eType\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003cstrong\u003eDefault\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003edebug\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003econtrols if you want to have some developer output in your console. (It shows the contents of all devices you added)\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003edeviceHolder\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e'deviceholder'\u003c/td\u003e\n          \u003ctd\u003eclassname of the device which will be used by the script. A new div will be created inside the showcase holder.\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003edeviceScreen\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e'devicescreen'\u003c/td\u003e\n          \u003ctd\u003eclassname of the devicescreen which will be used by the script. A new div will be created inside the showcase holder.\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003estartAfterScroll\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eIf 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.\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003edistanceTop\u003c/td\u003e\n          \u003ctd\u003efloat or string\u003c/td\u003e\n          \u003ctd\u003e0.25 or '25%'\u003c/td\u003e\n          \u003ctd\u003eIf 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%\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003eresetWhenBelow\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003efalse\u003c/td\u003e\n          \u003ctd\u003eIf the animation should reset itself when it is out of the viewport\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003eresponsive\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e'window'\u003c/td\u003e\n          \u003ctd\u003eIf 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).\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd\u003eautoPlay\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003eIf the animation should start directly after pageload.\u003c/td\u003e\n      \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2\u003eCommands\u003c/h2\u003e\n\u003ctable\u003e\n    \u003cthead class=\"thead\"\u003e\n        \u003ctr\u003e\n            \u003cth width=\"20%;\"\u003eCommand\u003c/th\u003e\n            \u003cth width=\"30%;\"\u003eDescription\u003c/th\u003e\n            \u003cth\u003eExample Usage\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eplay()\u003c/td\u003e\n            \u003ctd\u003estart the animation\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre class=\"text-small\"\u003e\n                    \u003ccode\u003e\n$('.prezento-holder').prezento.play();\u003c/code\u003e\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003epause()\u003c/td\u003e\n            \u003ctd\u003epause the animation\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre class=\"text-small\"\u003e\n                    \u003ccode\u003e\n$('.prezento-holder').prezento.pause();\u003c/code\u003e\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eresume()\u003c/td\u003e\n            \u003ctd\u003eresume the animation\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre class=\"text-small\"\u003e\n                    \u003ccode\u003e\n$('.prezento-holder').prezento.resume();\u003c/code\u003e\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ereset()\u003c/td\u003e\n            \u003ctd\u003ereset the animation\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre class=\"text-small\"\u003e\n                    \u003ccode\u003e\n$('.prezento-holder').prezento.reset();\u003c/code\u003e\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003echangeDevice(name)\u003c/td\u003e\n            \u003ctd\u003eChange the device your design is presented on based on the name you have entered for the device\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre class=\"text-small\"\u003e\n                    \u003ccode\u003e\n$('.prezento-holder').prezento.changeDevice('imac');\u003c/code\u003e\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e \n\n\n\u003ch2\u003eBrowser Support\u003c/h2\u003e\n\u003ctable\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png\" alt=\"Chrome\"/\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png\" alt=\"Firefox\"/\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png\" alt=\"Safari\"/\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png\" alt=\"Opera\"/\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/internet-explorer-tile/internet-explorer-tile_48x48.png\" alt=\"IE\"/\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"https://raw.github.com/alrra/browser-logos/master/safari-ios/safari-ios_48x48.png\" alt=\"iOS\"/\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u0026#x2713;\u003c/td\u003e\n            \u003ctd\u003e\u0026#x2713; 5+\u003c/td\u003e\n            \u003ctd\u003e\u0026#x2713; 4+\u003c/td\u003e\n            \u003ctd\u003e\u0026#x2713; 12+\u003c/td\u003e\n            \u003ctd\u003e\u0026#x2713; 10+\u003c/td\u003e\n            \u003ctd\u003e\u0026#x2713;\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n\u003ch2\u003eCopyright and License\u003c/h2\u003e\n\u003cp\u003eCopyright \u0026copy; \u003c?php echo date(\"Y\"); ?\u003e Ivaldi (\u003ca href=\"http://ivaldi.nl\"\u003ehttp://ivaldi.nl\u003c/a\u003e)\u003cbr/\u003ePrezento is licensed under the GNU Affero General Public License Version 3.\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivaldi%2Fprezento","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivaldi%2Fprezento","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivaldi%2Fprezento/lists"}