<head> section of your HTML (using the appropriate location):<script defer src="path/to/boxsharp.min.js" type="module"></script><head> section of your HTML (using the appropriate location):<script defer src="path/to/boxsharp.js" type="module"></script>boxsharp is implemented as a web component. You can utilize the element
<boxsharp-link> to make text or an image open a pop-up window.
<boxsharp-link> element.srcset on the <img> element to a series of images using the syntax for resolution switching
with different sizes.<head> section of your HTML (using the appropriate location):<script defer type="module">
import { BoxsharpCollection } from "./path/to/boxsharp.js";
document.addEventListener("DOMContentLoaded", () => {
BoxsharpCollection.scan();
});
</script>
<a> element.rel with the value boxsharp.data-srcset on the <a> element to a series of images using the syntax for resolution switching
with different sizes.Below, we use the web component syntax to activate a pop-up window when the user clicks a thumbnail image. Information on which image to show for what
screen size is extracted from the srcset attribute of the <img> element. Note the use of sizes, which
ensures that the browser doesn't load a high-resolution image for the thumbnail itself. Click the expand icon in the top right corner of the pop-up
window to display the largest image in the source set, press and hold the mouse button, and move the mouse to pan the image.
This example uses the classic syntax with the rel attribute and shows how several related images can be grouped into a single collection.
In the next example, we group related images into a single collection with the group attribute. The HTML element
<boxsharp-link> can also take custom attributes, which are translated into display options. For example, loop displays
navigation arrows even for the first and last member of the collection, which jump to the last and first member, respectively. If you have a group of
related images, the custom attributes must be applied to the first <boxsharp-link> element.
If a <boxsharp-link> element contains <source> elements as direct children, you can use media queries. The first item is selected that
matches the document media when the pop-up window opens. The browser skips <source> elements, and shows the remaining contents of
<boxsharp-link> when the page is displayed.
The media query (hover: none) typically matches mobile devices but not desktop computers. This lets us provide a different set of images for
mobile and desktop. The following example displays a red image on mobile but a green one on desktop.
The example below shows how to use the web component syntax with a <figure> element.
The following example shows how to use an <a> element with a rel attribute in a <figure> element. The
figure caption contains a link. We cannot wrap the entire <figure> in an <a> element because
<a> elements cannot nest.
The examples below constitute a single navigable gallery. The image to show in the pop-up window is extracted either from the href or the
data-srcset attribute.
href and data-srcset attributes. The image resolution is adaptively chosen
based on browser window size.href but no
data-srcset attribute. There is a single resolution available, no matter the window size.
data-srcset but no href attribute. The image resolution is selected adaptively.
The following example uses <boxsharp-link> to wrap a <video> element. Information encapsulated in the
<source> elements is propagated to the pop-up window.
width, height and src in the <iframe> content.<boxsharp-link> with attributes width, height and href.src in the <iframe> content.<boxsharp-link> with attributes width, height and href.The example below points to an external website. When the pop-up window opens, the content is visualized in <iframe> element. We use
attributes width and height because <iframe> doesn't have intrinsic dimensions.
PDF-open parameters allow us to customize the appearance of a PDF document shown in the pop-up window. Notice how the following link to a PDF document contains key-value parameters in the URL fragment how to display the PDF.
The next example shows the boxsharp list of features in the pop-up window. This content is defined earlier in the document in a
<section> element, and only its id is referenced here with a URL fragment. The content is cloned rather than moved to
the pop-up window.
If the content is too long to fit into the visible area of the pop-up window, vertical scrollbars are shown. This is illustrated by a randomly-generated
Lorem ipsum text. (Refresh the page to generate new text.) Note that if the source element has
display: none, it is automatically removed when the content is cloned. This allows content to remain hidden in the document until it is
about to be shown in the pop-up window.
When a linked resource is not available, a placeholder emoji (picture in a frame) is shown.