{"id":349605,"date":"2026-08-07T17:54:48","date_gmt":"2026-08-07T17:54:48","guid":{"rendered":"https:\/\/en-gb.wordpress.org\/plugins\/pirajki-ipad-scroll-mockup\/"},"modified":"2026-08-07T17:54:25","modified_gmt":"2026-08-07T17:54:25","slug":"pirajki-device-scroll-mockup","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/pirajki-device-scroll-mockup\/","author":20115528,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0.3","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Pirajki iPad Scroll Mockup","header_author":"pirajki","header_description":"Adds a [pirajki_device_scroll] shortcode that displays a device mockup whose screenshot scrolls inside the screen on hover. Optional ACF integration lets you add mockups with an image picker instead of writing shortcode attributes by hand.","assets_banners_color":"","last_updated":"2026-08-07 17:54:25","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/www.yogiraj.co.in\/plugins\/pirajki-ipad-scroll","header_author_uri":"https:\/\/www.yogiraj.co.in\/plugins","rating":0,"author_block_rating":0,"active_installs":0,"downloads":43,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"pirajki","date":"2026-08-07 17:54:25"}},"upgrade_notice":{"1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"A device mockup whose screenshot scrolls inside the screen while the visitor's mouse is over it."}},"plugin_section":[],"plugin_tags":[216843,1133,23344,71952,80],"plugin_category":[43],"plugin_contributors":[266455],"plugin_business_model":[],"class_list":["post-349605","plugin","type-plugin","status-publish","hentry","plugin_tags-device-mockup","plugin_tags-ipad","plugin_tags-mockup","plugin_tags-scroll-animation","plugin_tags-shortcode","plugin_category-customization","plugin_contributors-pirajki","plugin_committers-pirajki"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/pirajki-device-scroll-mockup.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Pirajki iPad Scroll Mockup adds a single shortcode, <code>[pirajki_ipad_scroll]<\/code>, that renders a device mockup with a screenshot inside its screen. Hover over the frame and scroll the mouse wheel to scroll the screenshot inside the screen; move the pointer away and the page scrolls normally again. You can place as many frames as you like on the same page \u2014 each one scrolls independently.<\/p>\n\n<p>It's a lightweight way to showcase a website, app, or product screenshot inside a device frame without a page builder add-on or external animation library.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><strong>One shortcode<\/strong> \u2014 <code>[pirajki_ipad_scroll]<\/code>, no blocks or builder required<\/li>\n<li><strong>Hover-to-scroll<\/strong> \u2014 the screenshot only scrolls inside the frame while the mouse is over it; the page scrolls normally the rest of the time<\/li>\n<li><strong>Multiple frames per page<\/strong> \u2014 each shortcode instance scrolls independently, so you can place several on one page<\/li>\n<li><strong>Built-in default frame<\/strong> \u2014 ships with an iPad frame so <code>[pirajki_ipad_scroll screenshot=\"456\"]<\/code> works out of the box<\/li>\n<li><strong>Any device frame<\/strong> \u2014 swap in any transparent-background device PNG (iPad, phone, laptop, browser chrome, etc.), not just iPads<\/li>\n<li><strong>Media Library or direct URL<\/strong> \u2014 pass an attachment ID or a full image URL for both the frame and the screenshot<\/li>\n<li><strong>Pure vanilla JavaScript<\/strong> \u2014 no jQuery or external dependencies<\/li>\n<li><strong>No settings page, no database options<\/strong> \u2014 the plugin only enqueues its assets on pages where the shortcode is actually used<\/li>\n<\/ul>\n\n<h4>Shortcode Usage<\/h4>\n\n<p>Basic usage \u2014 only a screenshot is required, the plugin ships with a default iPad frame:<\/p>\n\n<pre><code>[pirajki_ipad_scroll screenshot=\"456\"]\n<\/code><\/pre>\n\n<p>Using your own frame and Media Library attachment IDs:<\/p>\n\n<pre><code>[pirajki_ipad_scroll frame=\"123\" screenshot=\"456\"]\n<\/code><\/pre>\n\n<p>Or with direct image URLs:<\/p>\n\n<pre><code>[pirajki_ipad_scroll frame=\"https:\/\/example.com\/ipad-frame.png\" screenshot=\"https:\/\/example.com\/homepage-shot.jpg\"]\n<\/code><\/pre>\n\n<h4>Shortcode Attributes<\/h4>\n\n<ul>\n<li><code>frame<\/code> \u2014 (optional) Attachment ID or URL of the device frame image (should have a transparent screen area). Defaults to the iPad frame bundled with the plugin.<\/li>\n<li><code>screenshot<\/code> \u2014 (required) Attachment ID or URL of the screenshot to scroll inside the screen<\/li>\n<li><code>frame_alt<\/code> \u2014 alt text for the frame image (default: \"Device frame\")<\/li>\n<li><code>shot_alt<\/code> \u2014 alt text for the screenshot image (default: \"Homepage preview\")<\/li>\n<\/ul>\n\n<p>The shortcode renders only the device frame with the scrollable screenshot inside it \u2014 no heading, background, or padding around it, so it drops cleanly into any layout.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>pirajki-ipad-scroll<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install directly through the WordPress Plugins screen<\/li>\n<li>Activate through 'Plugins' in WordPress Admin<\/li>\n<li>Add the <code>[pirajki_ipad_scroll frame=\"...\" screenshot=\"...\"]<\/code> shortcode to any page or post, using either Media Library attachment IDs or image URLs<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20only%20work%20with%20ipad%20mockups%3F\"><h3>Does this only work with iPad mockups?<\/h3><\/dt>\n<dd><p>No. Any device frame image with a transparent screen area works \u2014 phone, laptop, browser window, tablet, and so on. The name reflects the original use case, but the shortcode accepts any frame image.<\/p><\/dd>\n<dt id=\"where%20do%20i%20get%20a%20device%20frame%20image%3F\"><h3>Where do I get a device frame image?<\/h3><\/dt>\n<dd><p>Upload your own PNG with a transparent screen cut-out to the Media Library (or use a direct URL to one), then pass its attachment ID or URL as the <code>frame<\/code> attribute.<\/p><\/dd>\n<dt id=\"why%20isn%27t%20anything%20showing%20on%20the%20page%3F\"><h3>Why isn't anything showing on the page?<\/h3><\/dt>\n<dd><p>The <code>screenshot<\/code> attribute is required. If it's missing or can't be resolved to an image, logged-in editors will see an inline notice on the page explaining what's missing; the shortcode simply renders nothing for visitors.<\/p><\/dd>\n<dt id=\"do%20i%20have%20to%20supply%20my%20own%20device%20frame%3F\"><h3>Do I have to supply my own device frame?<\/h3><\/dt>\n<dd><p>No \u2014 the plugin ships with a default iPad frame, so <code>[pirajki_ipad_scroll screenshot=\"456\"]<\/code> works on its own. Pass your own <code>frame<\/code> attribute (attachment ID or URL) if you'd rather use a different device or a custom frame image.<\/p><\/dd>\n<dt id=\"does%20this%20add%20any%20settings%20pages%20or%20database%20options%3F\"><h3>Does this add any settings pages or database options?<\/h3><\/dt>\n<dd><p>No. The plugin has no admin settings screen and stores nothing in the database \u2014 it only registers a shortcode and enqueues its CSS\/JS on pages where that shortcode is used.<\/p><\/dd>\n<dt id=\"does%20the%20page%20scroll%20when%20i%20scroll%20over%20the%20mockup%3F\"><h3>Does the page scroll when I scroll over the mockup?<\/h3><\/dt>\n<dd><p>No. While the mouse is over the frame, scrolling moves the screenshot inside the screen instead of the page. Move the pointer off the frame and the page scrolls normally again.<\/p><\/dd>\n<dt id=\"can%20i%20add%20more%20than%20one%20on%20the%20same%20page%3F\"><h3>Can I add more than one on the same page?<\/h3><\/dt>\n<dd><p>Yes. Use the shortcode as many times as you like \u2014 each instance scrolls independently of the others.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Add an iPad (or any device) mockup whose screenshot scrolls inside the screen when visitors hover and scroll over it.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/349605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=349605"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/pirajki"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=349605"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=349605"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=349605"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=349605"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=349605"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=349605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}