seamonsterdeneb

A spinnaker is a special type of sail that is flown in front of the main sails. It’s packed away when not in use, but when the wind is right, it can be unfurled to provide a powerful boost. This plugin is named Spinnaker because it allows you to keep your images and PDFs neatly tucked away, ready to be “unfurled” into a beautiful, accessible lightbox when your users need them.
Spinnaker is a lightweight, modern, and highly accessible plugin that turns any image or PDF link into a fully-featured dialog lightbox. It’s built with accessibility as a priority, ensuring a seamless experience for users with keyboards and screen readers.
Image Lightbox Features:
<ul>
<li>Converts any <code><img></code> tag into a clickable lightbox trigger.</li>
<li>Displays a large, scrollable version of your image that fills the viewport without forcing double-scrollbars.</li>
<li>Adds scroll-arrow buttons for easy navigation of oversized images.</li>
<li>Supports custom initial image positioning (e.g., center, top, bottom, left, right).</li>
<li>Displays image credits as a “placard,” with support for links.</li>
<li>Provides a “Download” button for the full-size image.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
PDF Lightbox Features:
<ul>
<li>Converts any <code><a></code> tag pointing to a PDF into a lightbox trigger.</li>
<li>Displays the PDF in an embedded viewer right on your site.</li>
<li>Includes a “Download” button.</li>
<li>Supports page builder modules (like DIVI) where you can only add a class to the container.</li>
<li>Tracks PDF views and downloads, with stats available in the WordPress admin.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
<h3>Usage</h3>
<h3>Image Lightbox</h3>
To make an image open in a lightbox, add the class <code>image-lightbox-trigger</code> to the <code><img></code> tag itself.
For Gutenberg Block Editor: 
Gutenberg wraps images in a <code><figure></code> element. Add the class <code>image-lightbox-trigger-container</code> to the figure wrapper: Select the image block, open the “Advanced” panel in the block settings, and add <code>image-lightbox-trigger-container</code> to the “Additional CSS class(es)” field. For screen reader descriptions, you can use the image’s “Title” field (available in the image block settings). For advanced features like credits and positioning, switch to HTML editing mode.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the image, add the class <code>image-lightbox-trigger-container</code> to the container. The plugin will find the first image inside it and turn it into a lightbox.
Optional Attributes (add to the <code><img></code> tag):
<ul>
<li><code>data-description="…"</code>: A longer description for screen readers. Note: Users of Gutenberg and other page builders that don’t allow custom attributes to be added can use the image’s “Title” field. The plugin will automatically use the title text for the screen reader description and remove the title attribute from the image to prevent duplicate announcements.</li>
<li><code>data-credit="…"</code>: The text for the credit placard. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-credit-link="…"</code>: A URL to make the entire credit placard a link. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-position="…"</code>: Set the initial scroll position. Options: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, or <code>center</code> (default). Requires HTML editing mode in Gutenberg.</li>
</ul>
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>image-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><img class="image-lightbox-trigger-es" src="…" alt="…" 
 data-description="Una descripción detallada de la imagen." 
 data-credit="Foto por Jane Doe" 
 data-credit-link="[https://example.com](https://example.com)"
 data-position="right">
</code></pre>
<h3>PDF Lightbox</h3>
To make a link to a PDF open in a lightbox, add the class <code>pdf-lightbox-trigger</code> to the <code><a></code> tag itself.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the link, add the class <code>pdf-lightbox-trigger-container</code> to the container. The plugin will find the correct PDF link inside it.
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>pdf-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><a href="/path/to/file.pdf" class="pdf-lightbox-trigger-es">Directorio</a>
</code></pre>

Spinnaker Dialog Lightboxes

Accessible lightboxes for images and PDFs using the HTML dialog element. Add classes to create instant lightboxes!

Michael Burridge

FAQ Concertina is a plugin for WordPress that enables you to easily display a list of FAQs (Frequently Asked Questions) on your page or blog post in an attractive and presentable fashion.
This is achieved by using the following simple shortcode in your WordPress page or blog post:
<pre><code>[faq-concertina]
</code></pre>
When the list of FAQs appears on your page the answers are initially hidden with only the questions visible. This makes efficient use of the space available on the page and avoids large tracts of text which can be difficult for the reader to take in, especially on small screen devices such as smartphones.
The answer can be made to appear as an expandable section, concertina-style, by clicking on the question. The answer can be hidden again by clicking anywhere on either the question or answer.
With FAQ Concertina you can:
<ul>
<li>have any number of FAQs,</li>
<li>define the order in which the FAQs appear on the page,</li>
<li>determine whether or not more than one answer can be visible at any one time,</li>
<li>categorise FAQs so that FAQs from different categories can appear in separate lists, either on the same page or on separate pages,</li>
<li>customise the appearance of the FAQ listing to fit in with the style of your theme.</li>
</ul>
Although primarily intended for FAQs FAQ Concertina is, of course, not limited to just FAQs and can be used for any content with a heading where the content is initially hidden and can be expanded by clicking on the heading. Feel free to use your imagination to come up with all kinds of creative uses for FAQ Concertina!
<h4>WHAT’S NEW?</h4>
<ul>
<li>As of version 1.4.8 FAQs can now display a featured image (also known as post thumbnail)</li>
<li>As of version 1.4.6 FAQs support post revisions.</li>
<li>As of version 1.4.0 FAQ Concertina is WAI-ARIA compliant. This means that FAQ Concertina is fully accessible and compatible with screen readers and other assistive technologies. Thanks to Tim Kaye <a href="https://profiles.wordpress.org/kts915" rel="nofollow ugc">@kts915</a> for contributing JavaScript code to make this possible.</li>
</ul>
The FAQ Concertina download includes a fully illustrated 20 page manual in <code>.pdf</code> format to help you get the most from the plugin. The manual can also be downloaded from the website:
<a href="http://www.zyriab.co.uk/faqconc/" rel="nofollow ugc">http://www.zyriab.co.uk/faqconc/</a>
<a href="http://twitter.com/michaelburridge" rel="nofollow ugc">http://twitter.com/michaelburridge</a>

FAQ Concertina

Display FAQs in an expandable concertina or accordion section. FAQs can be ordered and categorised, and their appearance can be customised.

Spinnaker Dialog Lightboxes vs FAQ Concertina