=== Pirajki iPad Scroll Mockup ===
Contributors: pirajki
Tags: shortcode, mockup, scroll animation, device mockup, ipad
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Add an iPad (or any device) mockup whose screenshot scrolls inside the screen when visitors hover and scroll over it.

== Description ==

Pirajki iPad Scroll Mockup adds a single shortcode, `[pirajki_ipad_scroll]`, 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 — each one scrolls independently.

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.

= Features =
* **One shortcode** — `[pirajki_ipad_scroll]`, no blocks or builder required
* **Hover-to-scroll** — the screenshot only scrolls inside the frame while the mouse is over it; the page scrolls normally the rest of the time
* **Multiple frames per page** — each shortcode instance scrolls independently, so you can place several on one page
* **Built-in default frame** — ships with an iPad frame so `[pirajki_ipad_scroll screenshot="456"]` works out of the box
* **Any device frame** — swap in any transparent-background device PNG (iPad, phone, laptop, browser chrome, etc.), not just iPads
* **Media Library or direct URL** — pass an attachment ID or a full image URL for both the frame and the screenshot
* **Pure vanilla JavaScript** — no jQuery or external dependencies
* **No settings page, no database options** — the plugin only enqueues its assets on pages where the shortcode is actually used

= Shortcode Usage =

Basic usage — only a screenshot is required, the plugin ships with a default iPad frame:

`[pirajki_ipad_scroll screenshot="456"]`

Using your own frame and Media Library attachment IDs:

`[pirajki_ipad_scroll frame="123" screenshot="456"]`

Or with direct image URLs:

`[pirajki_ipad_scroll frame="https://example.com/ipad-frame.png" screenshot="https://example.com/homepage-shot.jpg"]`

= Shortcode Attributes =

* `frame` — (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.
* `screenshot` — (required) Attachment ID or URL of the screenshot to scroll inside the screen
* `frame_alt` — alt text for the frame image (default: "Device frame")
* `shot_alt` — alt text for the screenshot image (default: "Homepage preview")

The shortcode renders only the device frame with the scrollable screenshot inside it — no heading, background, or padding around it, so it drops cleanly into any layout.

== Installation ==

1. Upload the `pirajki-ipad-scroll` folder to `/wp-content/plugins/`, or install directly through the WordPress Plugins screen
2. Activate through 'Plugins' in WordPress Admin
3. Add the `[pirajki_ipad_scroll frame="..." screenshot="..."]` shortcode to any page or post, using either Media Library attachment IDs or image URLs

== Frequently Asked Questions ==

= Does this only work with iPad mockups? =
No. Any device frame image with a transparent screen area works — phone, laptop, browser window, tablet, and so on. The name reflects the original use case, but the shortcode accepts any frame image.

= Where do I get a device frame image? =
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 `frame` attribute.

= Why isn't anything showing on the page? =
The `screenshot` 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.

= Do I have to supply my own device frame? =
No — the plugin ships with a default iPad frame, so `[pirajki_ipad_scroll screenshot="456"]` works on its own. Pass your own `frame` attribute (attachment ID or URL) if you'd rather use a different device or a custom frame image.

= Does this add any settings pages or database options? =
No. The plugin has no admin settings screen and stores nothing in the database — it only registers a shortcode and enqueues its CSS/JS on pages where that shortcode is used.

= Does the page scroll when I scroll over the mockup? =
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.

= Can I add more than one on the same page? =
Yes. Use the shortcode as many times as you like — each instance scrolls independently of the others.

== Screenshots ==

1. A device mockup whose screenshot scrolls inside the screen while the visitor's mouse is over it.

== Changelog ==

= 1.0.0 =
* Initial release.

== Upgrade Notice ==

= 1.0.0 =
Initial release.
