Alireza Mojarad

<p>Mojarad Screenshot Mockup Carousel is a lightweight WordPress plugin for presenting long website screenshots inside animated desktop and mobile device mockups.</p>
<p>It is designed for portfolio websites, agencies, freelancers, UI/UX designers, product teams, and WordPress developers who want to showcase websites and case studies in a more polished and visual way.</p>
<p>Instead of displaying static screenshots, the plugin places your desktop and mobile screenshots inside responsive device mockups. Long screenshots scroll smoothly inside the device screens, while desktop and mobile slides stay synchronized in one clean carousel.</p>
<p>This creates a modern showcase experience that is useful for:</p>
<ul>
<li>Website portfolios</li>
<li>Client project presentations</li>
<li>UI/UX case studies</li>
<li>Landing page previews</li>
<li>Product showcases</li>
<li>Web app screenshots</li>
<li>WordPress project galleries</li>
</ul>
<p>Version 1.1.0 adds performance improvements for pages that contain multiple showcase shortcodes. It introduces lazy image loading, viewport-based carousel activation, progressive slide loading, skeleton placeholders, and a shortcode slide limit attribute.</p>
<p>The plugin is built with a lightweight frontend architecture and does not depend on heavy slider libraries or external frontend frameworks.</p>
<h4>Key Features</h4>
<ul>
<li>Animated desktop and mobile mockups</li>
<li>Smooth auto-scrolling screenshots</li>
<li>Synchronized desktop and mobile slide transitions</li>
<li>Responsive 4:3 showcase layout</li>
<li>Lightweight frontend rendering</li>
<li>Shortcode support</li>
<li>Shortcode slide limit attribute</li>
<li>Lazy image loading</li>
<li>Viewport-based carousel activation</li>
<li>Autoplay pause outside viewport</li>
<li>Progressive slide image preloading</li>
<li>Skeleton loading placeholders</li>
<li>Global animation settings</li>
<li>Hover pause support</li>
<li>Automatic image scaling</li>
<li>Drag and drop slide sorting</li>
<li>Theme-independent architecture</li>
<li>Built-in fallback screenshots</li>
<li>Persian language files</li>
</ul>
<h4>Performance Improvements</h4>
<p>Mojarad Screenshot Mockup Carousel is designed to work better on pages that include multiple showcases.</p>
<p>The plugin does not immediately load all showcase images on page load. Instead, it waits until each showcase gets close to the viewport, then loads and activates that showcase.</p>
<p>This helps reduce the initial page load weight when using several showcase shortcodes on the same portfolio page.</p>
<p>Version 1.1.0 includes:</p>
<ul>
<li>Lazy image loading</li>
<li>Carousel activation near viewport</li>
<li>Autoplay pause when outside viewport</li>
<li>Progressive slide image preloading</li>
<li>Skeleton placeholders before images load</li>
<li>Fixed image width and height attributes where possible</li>
</ul>
<h4>Shortcode Usage</h4>
<p>Display all slides:</p>
<p>[mojasmc_showcase id=”1″]</p>
<p>Display only the first two slides:</p>
<p>[mojasmc_showcase id=”1″ limit=”2″]</p>
<p>The limit attribute is useful for portfolio overview pages, archive pages, landing pages, and pages that contain multiple showcases.</p>
<p>If the limit attribute is not provided, all slides will be displayed.</p>
<h4>Recommended Screenshot Workflow</h4>
<p>For the best visual result, use full-page screenshots.</p>
<p>For desktop screenshots, it is recommended to use the GoFullPage Chrome extension to capture full-length website screenshots.</p>
<p>Long screenshots create smoother scrolling animations inside the desktop mockup.</p>
<p>For mobile screenshots, full-page continuous screenshots are recommended as well. Many Samsung devices support long screenshot capture natively. Other devices may require browser tools or third-party applications depending on the operating system.</p>
<p>Recommended workflow:</p>
<ol>
<li>Capture a full-page desktop screenshot.</li>
<li>Capture a full-page mobile screenshot.</li>
<li>Add both images to the same slide.</li>
<li>Keep each desktop and mobile image pair related to the same page or section.</li>
<li>Repeat for additional slides.</li>
</ol>
<h4>Built-in Fallback Images</h4>
<p>If a slide is missing a desktop or mobile screenshot, the plugin automatically displays a built-in fallback image.</p>
<p>This keeps the showcase layout stable even if one image is not provided.</p>
<h4>Global Settings</h4>
<p>The plugin includes a global settings page where you can customize the showcase behavior and controls.</p>
<p>Available settings include:</p>
<ul>
<li>Arrow color</li>
<li>Arrow background color</li>
<li>Arrow hover background color</li>
<li>Dot color</li>
<li>Active dot color</li>
<li>Scroll duration</li>
<li>Start hold</li>
<li>End hold</li>
<li>Autoplay</li>
<li>Pause on hover</li>
<li>Device shadow</li>
<li>Maximum showcase width</li>
<li>Controls position</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Freelancers</li>
<li>Agencies</li>
<li>Portfolio websites</li>
<li>Product showcases</li>
<li>Case studies</li>
<li>UI/UX presentations</li>
<li>Creative studios</li>
<li>WordPress developers</li>
</ul>


Mojarad Screenshot Mockup Carousel

Create animated website showcases using smooth scrolling desktop and mobile mockups.

amitry

<p><strong><a href="https://demo.amitry.de/" rel="nofollow ugc">See the live demo →</a></strong> — hover any mockup to watch the full page scroll.</p>
<p>Amitry Project Grid is a WordPress browser mockup and scrolling screenshot plugin for agencies and freelancers. Show a website preview inside a clean browser frame that scrolls through the full-page screenshot on hover, then group these project cards into a responsive portfolio grid. Each card has five fields: an icon (dashicon or uploaded image), a headline, a description, a browser-mockup screenshot that scrolls automatically on hover, and a call-to-action button.</p>
<p>People look for this kind of plugin under many names – browser mockup, scrolling screenshot, website preview, portfolio screenshot grid, project showcase, or website frame. Amitry Project Grid covers that use case as a block, a shortcode, and an Elementor widget.</p>
<p>Cards can be used individually or grouped into a responsive grid for portfolio overviews.</p>
<h4>Card fields</h4>
<ul>
<li>Icon (Dashicon picker or uploaded image)</li>
<li>Headline with selectable heading level (H2-H6)</li>
<li>Description with basic inline formatting (bold, italic, links)</li>
<li>Mockup image displayed inside a browser frame, with hover-scroll for full-page screenshots</li>
<li>Call-to-action button with text, URL and target</li>
</ul>
<h4>Frontends</h4>
<ul>
<li>Project Grid block: grid container with a 1-6 column setting (responsive on smaller screens)</li>
<li>Project Card block: single card, can be used standalone or inside a grid</li>
<li>Shortcode for classic themes</li>
<li>Elementor widget (loads only if Elementor is active)</li>
</ul>
<h4>Mockup feature</h4>
<p>The mockup feature renders the uploaded screenshot inside a browser-style frame with traffic-light dots and an address bar. On hover (desktop) the image scrolls from top to bottom of the screenshot, then returns when the cursor leaves. On touch devices the scroll plays automatically when the card enters the viewport, and tapping replays it.</p>
<p>The plugin uses the original uploaded image (not WordPress\’ auto-scaled version) so long screenshots stay sharp.</p>
<h4>Privacy</h4>
<p>The plugin makes no external network requests. No data is collected, transmitted or stored outside your own WordPress installation.</p>
<h4>For developers</h4>
<p>The plugin exposes hooks for extensions:</p>
<ul>
<li><code>apshow_renderer_defaults</code>, <code>apshow_wrapper_classes</code>, <code>apshow_render_html</code>, <code>apshow_kses_allowed</code> (filters)</li>
<li><code>apshow_allowed_frames</code>, <code>apshow_allowed_scroll_modes</code>, <code>apshow_mockup_bar_html</code>, <code>apshow_mockup_html</code> (filters for extending mockup frames and animation modes)</li>
<li><code>apshow_before_render</code>, <code>apshow_after_render</code>, <code>apshow_loaded</code>, <code>apshow_activated</code>, <code>apshow_deactivated</code>, <code>apshow_admin_about_after_content</code> (actions)</li>
<li><code>APSHOW_HOOK_VERSION</code> constant for compatibility checks</li>
</ul>


Amitry Project Grid – Browser Mockup & Scrolling Screenshot Portfolio

Show website previews in a browser mockup that scrolls on hover. Build portfolio and project showcase grids with screenshots, headline, and CTA.

Mojarad Screenshot Mockup Carousel vs Amitry Project Grid – Browser Mockup & Scrolling Screenshot Portfolio