{
    "version": "https://jsonfeed.org/version/1",
    "title": "eay.cc",
    "description": "Weblog von Stefan Grund",
    "home_page_url": "https://eay.cc",
    "feed_url": "https://eay.cc/2026/lightboxen/feed/json",
    "icon": "https://eay.cc/apple-touch-icon.png",
    "favicon": "https://eay.cc/favicon.ico",
    "author": {
        "name": "Stefan Grund",
        "url": "https://stefangrund.de/",
        "avatar": "https://stefangrund.de/avatar.jpg"
    },
    "items": [
        {
            "id": "42167",
            "_type": "standard",
            "url": "https://eay.cc/2026/lightboxen/",
            "title": "Lightboxen",
            "content_html": "<p>Zum Jahreswechsel 2005/2006 erfand der Entwickler <a href=\"https://lokeshdhakar.com/\">Lokesh Dhakar</a> mit <a href=\"https://github.com/lokesh/lightbox\">Lightbox JS</a> das Konzept der Lightbox im Web: einem Layer, der auf der aktu&shy;ellen Seite ge\u00f6ffnet wird, diese \u00fcber&shy;lagert und darin eine ver&shy;gr\u00f6\u00dferte Ansicht eines Bildes anzeigt. <a href=\"https://web.archive.org/web/20190718071946/https://www.wired.com/2006/01/more-floating-photos-introducing-lightbox-js/\">Wired freute sich kurz darauf</a><a href=\"https://eay.cc/2026/lightboxen/#footnote_0_42167\" id=\"identifier_0_42167\" class=\"footnote-link footnote-identifier-link\" title=\"Internet-Archive-Snapshot der Wired-Seite von 2006, aufgenommen 2019, weil Cond&eacute; Nast irgendwann zwischen dann und jetzt glaubte, so einen kleinen, historischen Artikel hinter die Paywall legen zu m&uuml;ssen.\">1</a> \u00fcber die mini&shy;malis&shy;tische Galerie&shy;anmutung der Umsetzung und lobte sie gegen&shy;\u00fcber anderen Bedien&shy;para&shy;digmen (&#8222;rather than resorting to a pop-up window, a new browser window, or any other technique which forces your users to hit the back button.&#8220;).</p>\n<p>Zwei Dekaden sp\u00e4ter kann ich also sagen: Das Lightbox-Konzept hat sich offen&shy;sicht&shy;lich durch&shy;gesetzt, Zeit es hier auch einzu&shy;bauen. Sicher ist sicher. Gesagt und getan. \ud83d\ude0c</p>\n<p>In dem folgenden Video seht ihr also <a href=\"https://eay.cc/2025/status-2025-11-27-0755/\">diesen Beitrag</a>, mit einer klein&shy;teiligen Folie aus einem <a href=\"https://eay.cc/2024/lehre-an-der-hmkw/\">Seminar von mir</a>, die nat\u00fcrlich zum Ver&shy;gr\u00f6\u00dfern einl\u00e4dt. Ebenso nat\u00fcrlich das Beispiel&shy;video selbst, weshalb auch das in der Lightbox vergr\u00f6\u00dfert werden kann. Lightbox-Inception!</p>\n<p><video src=\"https://eay.cc/uploads/2026/lightbox.mp4\" muted autoplay loop playsinline style=\"width: 100%; height: auto; aspect-ratio: 1569/1080;\"   poster=\"https://eay.cc/uploads/2026/lightbox.webp\" data-lightbox><img decoding=\"async\" src=\"https://eay.cc/uploads/2026/lightbox.webp\" alt=\"Screen Capture der neuen Lightbox-Funktionalit\u00e4t.\" /></video></p>\n<p>Wie darin zu sehen, wird unten innerhalb der Lightbox-Layers der <a href=\"https://de.wikipedia.org/wiki/Alt-Text\">Alt-Text</a> des Bildes darge&shy;stellt, sofern vorhanden. Ist er l\u00e4nger als eine Zeile, l\u00e4sst er sich optional auf eine Zeile <em>runtertogglen</em>, um mehr von dem Bild oder Video zu sehen. Die Darstellung ist dabei vom einer der besten Mastodon-Clients und generell Web-Apps out there inspiriert: <a href=\"https://phanpy.social/\">Phanpy</a>.</p>\n<p>Au\u00dferdem zu sehen: Der Close-Button oben rechts, der bei euch \u2013 solltet ihr etwa auf macOS unterwegs sein \u2013 evtl. links unterge&shy;bracht ist, da ich die Positionierung abh\u00e4ngig von den Konventionen eurer verwendeten Plattform gemacht habe.</p>\n<p>Anstatt also die Medien&shy;inhalte direkt im Content gr\u00f6\u00dfer zu machen, d\u00fcrfte ihr jetzt nochmal extra klicken. <del datetime=\"2026-06-07T11:48:57+00:00\">Na super.</del><span hidden class=\"__iawmlf-post-loop-links\" data-iawmlf-links=\"[{&quot;id&quot;:11339,&quot;href&quot;:&quot;https:\\/\\/lokeshdhakar.com&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20260607033506\\/https:\\/\\/lokeshdhakar.com\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-06-07 11:52:23&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-07 11:52:23&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:11340,&quot;href&quot;:&quot;https:\\/\\/github.com\\/lokesh\\/lightbox&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20230715044302\\/https:\\/\\/github.com\\/lokesh\\/lightbox&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-06-07 11:52:24&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-07 11:52:24&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:11336,&quot;href&quot;:&quot;https:\\/\\/eay.cc\\/2025\\/status-2025-11-27-0755&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20260606132720\\/https:\\/\\/eay.cc\\/2025\\/status-2025-11-27-0755\\/&quot;,&quot;redirect_href&quot;:&quot;https:\\/\\/eay.cc\\/2025\\/status-2025-11-27-0755\\/&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-06-06 14:05:23&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-06 14:05:23&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:217,&quot;href&quot;:&quot;https:\\/\\/eay.cc\\/2024\\/lehre-an-der-hmkw&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20250814112113\\/https:\\/\\/eay.cc\\/2024\\/lehre-an-der-hmkw\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-02 18:12:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-12 01:10:45&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-23 22:47:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-03 01:48:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-13 14:39:02&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-17 15:01:58&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-20 23:36:55&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-13 18:39:47&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-19 23:30:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-23 17:08:20&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-28 22:54:47&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-31 23:35:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-04 00:53:09&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-07 06:55:34&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-10 09:26:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-13 10:24:01&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-16 12:23:27&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-19 21:09:51&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-23 05:30:26&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-26 13:58:17&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-01 22:43:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-05 22:04:15&quot;,&quot;http_code&quot;:503},{&quot;date&quot;:&quot;2026-03-13 15:52:09&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-16 23:02:32&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-19 23:05:08&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-22 23:29:48&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-26 06:05:53&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-29 08:09:05&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-01 08:43:17&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-04 16:06:22&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-09 08:27:01&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-12 10:13:55&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-16 12:44:41&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-19 21:56:40&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-23 03:57:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-26 09:35:04&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-30 23:14:26&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-05 12:14:41&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-09 23:11:35&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-14 00:42:08&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-17 06:22:27&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-20 23:31:41&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-24 20:25:27&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-28 05:08:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-31 19:08:05&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-06 09:00:57&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-06 09:00:57&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:11341,&quot;href&quot;:&quot;https:\\/\\/de.wikipedia.org\\/wiki\\/Alt-Text&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20251211095112\\/https:\\/\\/de.wikipedia.org\\/wiki\\/Alt-Text&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-06-07 12:02:34&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-07 12:02:34&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:227,&quot;href&quot;:&quot;https:\\/\\/phanpy.social&quot;,&quot;archived_href&quot;:&quot;http:\\/\\/web-wp.archive.org\\/web\\/20251011130211\\/https:\\/\\/phanpy.social\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-02 18:14:22&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-15 00:21:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-24 02:51:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-02 08:38:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-10 10:19:05&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-15 06:00:06&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-16 12:31:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-20 04:22:40&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-25 14:37:21&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-29 09:29:56&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-01 13:48:11&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-04 14:41:38&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-07 15:18:49&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-11 02:33:22&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-14 04:53:37&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-17 18:11:58&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-21 10:29:56&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-27 21:40:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-06 23:56:15&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-15 18:51:50&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-19 20:33:09&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-23 11:42:25&quot;,&quot;http_code&quot;:503},{&quot;date&quot;:&quot;2026-03-26 12:42:54&quot;,&quot;http_code&quot;:503},{&quot;date&quot;:&quot;2026-03-30 15:17:11&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-06 04:50:16&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-09 08:24:18&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-18 00:05:21&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-21 07:16:49&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-24 09:20:52&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-27 21:37:59&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-02 15:53:35&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-06 04:10:24&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-10 21:08:37&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-17 03:27:04&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-22 06:00:03&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-25 15:31:40&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-29 04:39:38&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-02 10:02:28&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-06 08:45:07&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-06 08:45:07&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]\"></span></p>\n<img decoding=\"async\" src=\"https://eay.cc/wordpress/count.php?url=https%3A%2F%2Feay.cc%2F2026%2Flightboxen%2F\" style=\"border:0;\" width=\"1\" height=\"1\" alt=\"\" /><ol class=\"footnotes\"><li id=\"footnote_0_42167\" class=\"footnote\">Internet-Archive-Snapshot der Wired-Seite von 2006, aufgenommen 2019, weil Cond\u00e9 Nast irgendwann zwischen dann und jetzt glaubte, so einen kleinen, historischen Artikel hinter die Paywall legen zu m\u00fcssen.</li></ol>",
            "date_published": "2026-06-07T12:02:04+00:00",
            "date_modified": "2026-06-07T12:04:21+00:00",
            "author": {
                "name": "Stefan"
            },
            "attachments": [
                {
                    "url": "https://eay.cc/uploads/2026/lightbox.mp4",
                    "mime_type": "video/mp4",
                    "size_in_bytes": 1398279
                }
            ],
            "tags": [
                "changelog",
                "eayz",
                "in eigener sache",
                "internet"
            ],
            "_short_url": "https://eay.li/42t",
            "_syndication": [
                "https://bsky.app/profile/eay.social/post/3mnp4wcxzox26",
                "https://eay.social/@eay/116708719046090300"
            ]
        }
    ]
}