diff --git a/docs/api_reference/api_reference.py b/docs/api_reference/api_reference.py
index 0992764..9daaee3 100644
--- a/docs/api_reference/api_reference.py
+++ b/docs/api_reference/api_reference.py
@@ -506,17 +506,20 @@ def ex_radio():
         Radio(name="radio-group", id="radio1"), 
         LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
 
-def ex_Select():
+def ex_insertable_select1():
     fruit_opts = ['apple', 'orange', 'banana', 'mango']
-    refresh_btn = DivRAligned(
-               Button('Refresh', hx_get=True, hx_select_oob="#fruit",
-                      hx_swap="none", cls=ButtonT.default))
-    return Grid(Select(
-                Optgroup(label="Fruit")(
+
+    return Grid(
+        Select(Option('Apple', value='apple'),
+               Option('Orange', value='orange'),
+               Option('Banana', value='banana'),
+               Option('Mango', value='mango'),
+               id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."),
+
+        Select(Optgroup(label="Fruit")(
                     *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))),
                 id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...",
-                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"),
-            refresh_btn, cls='gap-2 mx-auto w-1/2')
+                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"))
 
 def ex_select(): 
     return Div(
@@ -583,11 +586,41 @@ def ex_upload():
     fn2code_string(ex_select),
     H3("Example: Insertable Select"),
     Caption("In a production app, the user-inserted option would be saved server-side (db, session etc.)"),
-    fn2code_string(ex_Select),
+    fn2code_string(ex_insertable_select1),
     Legend,
     Fieldset,
     title="Forms")
 
+
+# Lightbox
+
+def ex_lightbox1():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'),
+    )
+def ex_lightbox2():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'),
+        LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'),
+        LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'),
+    )
+
+def ex_lightbox3():
+    return LightboxContainer(
+        LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
+        LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
+        LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
+        LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'))
+
+docs_lightbox = create_doc_section(
+    H1("Lightbox API Reference"),
+    fn2code_string(ex_lightbox1),
+    fn2code_string(ex_lightbox2),
+    fn2code_string(ex_lightbox3),
+    LightboxContainer,
+    LightboxItem,
+    title="Lightbox")
+
 # Modals
 
 def ex_modal():
@@ -719,7 +752,6 @@ def ex_h_stacked_div():
     DivHStacked,
     fn2code_string(ex_h_stacked_div),
     FlexT,
-
     title="Layout")
 
 # Dividers
@@ -840,14 +872,6 @@ def ex_tabs2():
     NavHeaderLi,
     NavDividerLi,
     NavParentLi,
-    # NavBarCenter,
-    # NavBarRSide,
-    # NavBarLSide,
-    # NavBarContainer,
-    # NavBarNav,
-    # NavBarSubtitle,
-    # NavBarNavContainer,
-    # NavBarParentIcon,
     DropDownNavContainer,
     title="Navigation")
 
@@ -1004,7 +1028,7 @@ def ex_markdown3():
 def ex_applyclasses():
     return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
 
-docs_markdown_HTMLstyling = create_doc_section(
+docs_markdown = create_doc_section(
     H1("Markdown + automated HTML styling API Reference"),
     fn2code_string(ex_markdown),
     render_md("You can overwrite the default styling for markdown rendering with your own css classes with  `class_map"),
@@ -1016,6 +1040,12 @@ def ex_applyclasses():
     fn2code_string(ex_applyclasses),
     title="Markdown + HTML Frankification")
 
+
+docs_html = create_doc_section(
+    H1("HTML Styling API Reference"),
+    fn2code_string(ex_applyclasses),
+    title="HTML Styling")
+
 def ex_loading1():
     return Loading()
 
diff --git a/monsterui/_modidx.py b/monsterui/_modidx.py
index d04c93c..0365bbf 100644
--- a/monsterui/_modidx.py
+++ b/monsterui/_modidx.py
@@ -134,10 +134,8 @@
                                                                                        'monsterui/franken.py'),
                                    'monsterui.franken.LabelTextArea': ('franken.html#labeltextarea', 'monsterui/franken.py'),
                                    'monsterui.franken.Legend': ('franken.html#legend', 'monsterui/franken.py'),
-                                   'monsterui.franken.Lightbox': ('franken.html#lightbox', 'monsterui/franken.py'),
-                                   'monsterui.franken.LightboxT': ('franken.html#lightboxt', 'monsterui/franken.py'),
-                                   'monsterui.franken.LightboxT._generate_next_value_': ( 'franken.html#lightboxt._generate_next_value_',
-                                                                                          'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxContainer': ('franken.html#lightboxcontainer', 'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxItem': ('franken.html#lightboxitem', 'monsterui/franken.py'),
                                    'monsterui.franken.ListT': ('franken.html#listt', 'monsterui/franken.py'),
                                    'monsterui.franken.Mark': ('franken.html#mark', 'monsterui/franken.py'),
                                    'monsterui.franken.Meter': ('franken.html#meter', 'monsterui/franken.py'),
@@ -149,7 +147,6 @@
                                    'monsterui.franken.ModalFooter': ('franken.html#modalfooter', 'monsterui/franken.py'),
                                    'monsterui.franken.ModalHeader': ('franken.html#modalheader', 'monsterui/franken.py'),
                                    'monsterui.franken.ModalTitle': ('franken.html#modaltitle', 'monsterui/franken.py'),
-                                   'monsterui.franken.MultiLightbox': ('franken.html#multilightbox', 'monsterui/franken.py'),
                                    'monsterui.franken.NavBar': ('franken.html#navbar', 'monsterui/franken.py'),
                                    'monsterui.franken.NavCloseLi': ('franken.html#navcloseli', 'monsterui/franken.py'),
                                    'monsterui.franken.NavContainer': ('franken.html#navcontainer', 'monsterui/franken.py'),
diff --git a/monsterui/core.py b/monsterui/core.py
index a2a711d..77d8046 100644
--- a/monsterui/core.py
+++ b/monsterui/core.py
@@ -82,7 +82,6 @@ def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows
 
 # %% ../nbs/01_core.ipynb
 HEADER_URLS = {
-
         'franken_css': "https://unpkg.com/franken-ui@2.0.0-internal.45/dist/css/core.min.css",
         'franken_js_core': "https://unpkg.com/franken-ui@2.0.0-internal.45/dist/js/core.iife.js",
         'franken_icons': "https://unpkg.com/franken-ui@2.0.0-internal.45/dist/js/icon.iife.js",
diff --git a/monsterui/franken.py b/monsterui/franken.py
index 4e53ea4..fe51e40 100644
--- a/monsterui/franken.py
+++ b/monsterui/franken.py
@@ -16,8 +16,7 @@
            'NavSubtitle', 'NavCloseLi', 'ScrollspyT', 'NavBar', 'SliderContainer', 'SliderItems', 'SliderNav', 'Slider',
            'DropDownNavContainer', 'TabContainer', 'CardT', 'CardTitle', 'CardHeader', 'CardBody', 'CardFooter',
            'CardContainer', 'Card', 'TableT', 'Table', 'Td', 'Th', 'Tbody', 'TableFromLists', 'TableFromDicts',
-           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker', 'LightboxT', 'Lightbox',
-           'MultiLightbox']
+           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker', 'LightboxContainer', 'LightboxItem']
 
 # %% ../nbs/02_franken.ipynb
 import fasthtml.common as fh
@@ -1524,78 +1523,20 @@ def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)
     return Div(Uk_theme_switcher(fh.Select(*groups, hidden=True),  id="theme-switcher"), cls=stringify(cls))
 
 # %% ../nbs/02_franken.ipynb
-class LightboxT(VEnum):
-    'Lightbox styles and animations'
-    def _generate_next_value_(name, start, count, last_values): return str2ukcls('lightbox', name)
-    
-    # Animations
-    slide = auto()
-    fade = auto()
-    scale = auto()
-    
-    # Navigation
-    no_nav = 'slidenav: false; nav: false'
-    thumbnav = 'slidenav: false; nav: thumbnav'
-    dotnav = 'slidenav: false; nav: dotnav'
-
-# %% ../nbs/02_franken.ipynb
-def Lightbox(
-    link:str|FT='Open Lightbox', # Content for the lightbox trigger
-    href:str='#', # URL of the lightbox content
-    caption:str|FT='Image Caption', # Caption shown in lightbox 
-    alt:str='Lightbox Image', # Alt text for images
-    in_multi:bool=False, # Whether this is part of a MultiLightbox
-    use_img_link:bool=False, # Use thumbnail image as trigger
-    link_cls:str|tuple=(), # Additional classes for trigger
-    thumb_width:int=400, # Thumbnail width if use_img_link=True
-    thumb_height:int=400, # Thumbnail height if use_img_link=True
-    iframe:bool=False, # Whether content should be loaded in iframe
-    **kwargs # Additional args for container
-)->FT: # Lightbox component
-    "Creates a lightbox component for displaying media content"
-    link_kw = dict(
-        data_caption=to_xml(caption) if caption else None,
-        data_alt=alt,
-        href=href,
-        cls=('uk-inline' if use_img_link else '', stringify(link_cls)),
-        data_type='iframe' if iframe else None
-    )
-    
-    if isinstance(link, str): link = Button(link, cls=ButtonT.default)
-    if use_img_link: link = fh.Img(src=href, alt=alt, width=thumb_width, height=thumb_height)
-    
-    inner = A(link, **link_kw)
-    if in_multi: return inner
-    return Div(inner, data_uk_lightbox=True, **kwargs)
-
-# %% ../nbs/02_franken.ipynb
-def MultiLightbox(
-    *c:FT, # Child lightbox components
-    urls:list=[], # List of URLs to create lightboxes from
-    animation:str=LightboxT.slide, # Animation type
-    nav:str='', # Navigation type (thumbnav/dotnav)
-    counter:bool=False, # Show image counter
-    cls:str='grid mt-4 grid-cols-3 gap-4', # Container classes
-    **kwargs # Additional args for container
-)->FT: # Multi-image lightbox gallery
-    "Creates a lightbox gallery for displaying multiple images with navigation"
-    nav_str = f"slidenav: false;nav:{nav}" if nav else ''
-    container = Div(
-        data_uk_lightbox=f'animation:{animation};{nav_str}',
-        counter=counter,
-        cls=stringify(cls),
-        **kwargs
-    )
-    
-    if urls:
-        items = [
-            Div(Lightbox(
-                in_multi=True,
-                link=fh.Img(src=url, alt=""),
-                caption=f"Photo {i+1}",
-                href=url,
-                link_cls='uk-inline'
-            )) for i,url in enumerate(urls)
-        ]
-        return container(*items)
-    return container(*c)
+def LightboxContainer(*lightboxitem, # `LightBoxItem`s that will be inside lightbox
+                      data_uk_lightbox='counter: true', # See https://franken-ui.dev/docs/2.0/lightbox for advanced options
+                      **kwargs # Additional options for outer container
+                     )->FT: # Lightbox
+    "Lightbox container that will hold `LightboxItems`"
+    return fh.Div(*lightboxitem, data_uk_lightbox=data_uk_lightbox, **kwargs)
+
+# %% ../nbs/02_franken.ipynb
+def LightboxItem(*c, # Component that when clicked will open the lightbox (often a button)
+                 href, # Href to image, youtube video, vimeo, google maps, etc.
+                 data_alt=None, # Alt text for the lightbox item/image
+                 data_caption=None, # Caption for the item that shows below it
+                 cls='', # Class for the A tag (often nothing or `uk-btn`)
+                 **kwargs # Additional args for the `A` tag
+                )->FT: # A(... href, data_alt, cls., ...)
+    "Anchor tag with appropriate structure to go inside a `LightBoxContainer`"
+    return fh.A(*c, href=href, data_alt=data_alt, cls=stringify(cls), **kwargs)
diff --git a/nbs/02_franken.ipynb b/nbs/02_franken.ipynb
index 14b4151..3ff2543 100644
--- a/nbs/02_franken.ipynb
+++ b/nbs/02_franken.ipynb
@@ -5862,793 +5862,86 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "91ad869c",
+   "id": "1a0b3bef",
    "metadata": {},
    "outputs": [],
    "source": [
     "#| export\n",
-    "class LightboxT(VEnum):\n",
-    "    'Lightbox styles and animations'\n",
-    "    def _generate_next_value_(name, start, count, last_values): return str2ukcls('lightbox', name)\n",
-    "    \n",
-    "    # Animations\n",
-    "    slide = auto()\n",
-    "    fade = auto()\n",
-    "    scale = auto()\n",
-    "    \n",
-    "    # Navigation\n",
-    "    no_nav = 'slidenav: false; nav: false'\n",
-    "    thumbnav = 'slidenav: false; nav: thumbnav'\n",
-    "    dotnav = 'slidenav: false; nav: dotnav'"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "83b3c9db",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "#| export \n",
-    "def Lightbox(\n",
-    "    link:str|FT='Open Lightbox', # Content for the lightbox trigger\n",
-    "    href:str='#', # URL of the lightbox content\n",
-    "    caption:str|FT='Image Caption', # Caption shown in lightbox \n",
-    "    alt:str='Lightbox Image', # Alt text for images\n",
-    "    in_multi:bool=False, # Whether this is part of a MultiLightbox\n",
-    "    use_img_link:bool=False, # Use thumbnail image as trigger\n",
-    "    link_cls:str|tuple=(), # Additional classes for trigger\n",
-    "    thumb_width:int=400, # Thumbnail width if use_img_link=True\n",
-    "    thumb_height:int=400, # Thumbnail height if use_img_link=True\n",
-    "    iframe:bool=False, # Whether content should be loaded in iframe\n",
-    "    **kwargs # Additional args for container\n",
-    ")->FT: # Lightbox component\n",
-    "    \"Creates a lightbox component for displaying media content\"\n",
-    "    link_kw = dict(\n",
-    "        data_caption=to_xml(caption) if caption else None,\n",
-    "        data_alt=alt,\n",
-    "        href=href,\n",
-    "        cls=('uk-inline' if use_img_link else '', stringify(link_cls)),\n",
-    "        data_type='iframe' if iframe else None\n",
-    "    )\n",
-    "    \n",
-    "    if isinstance(link, str): link = Button(link, cls=ButtonT.default)\n",
-    "    if use_img_link: link = fh.Img(src=href, alt=alt, width=thumb_width, height=thumb_height)\n",
-    "    \n",
-    "    inner = A(link, **link_kw)\n",
-    "    if in_multi: return inner\n",
-    "    return Div(inner, data_uk_lightbox=True, **kwargs)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "3bf8c28c",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "img_url = 'https://picsum.photos/1280/720.webp'"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "b4c5bd5f",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "lb = Lightbox(href=img_url, caption=\"- Random Photograph -\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "00a70e62",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_zI8DlcL1TTuQq0gOsSJsjw\" style=\"width: 100%; height: 400px; border: none;\" onload=\"\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(lb, height=400)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "b761de3f",
-   "metadata": {},
-   "source": [
-    "### W/ Cusom Link & Custom Caption"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "bb05be05",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "lb2 = Lightbox(fh.Img(src=img_url, width=300, height=220, alt=\"Thumbnail Link\"), caption=I('~ Photographer: John Smith ~'), href=img_url)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "541b968f",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_3oOEBHuwSd_mein2agTwnQ\" style=\"width: 100%; height: 400px; border: none;\" onload=\"\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(lb2, height=400)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "dda816d9",
-   "metadata": {},
-   "source": [
-    "__Alternatively:__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "6f1d78a5",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_NJTE8IrsQ1CllRRSQ65_vQ\" style=\"width: 100%; height: 400px; border: none;\" onload=\"\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(Lightbox(href=img_url, caption=U('~ Photographer: John Smith ~'), use_img_link=True, thumb_width=300, thumb_height=220), height=400)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "bc16c464",
-   "metadata": {},
-   "source": [
-    "### Multiple Items w/ Nav"
+    "def LightboxContainer(*lightboxitem, # `LightBoxItem`s that will be inside lightbox\n",
+    "                      data_uk_lightbox='counter: true', # See https://franken-ui.dev/docs/2.0/lightbox for advanced options\n",
+    "                      **kwargs # Additional options for outer container\n",
+    "                     )->FT: # Lightbox\n",
+    "    \"Lightbox container that will hold `LightboxItems`\"\n",
+    "    return fh.Div(*lightboxitem, data_uk_lightbox=data_uk_lightbox, **kwargs)"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "15086b08",
+   "id": "285ec264",
    "metadata": {},
    "outputs": [],
    "source": [
-    "base_url = 'https://picsum.photos/id/%d/1280/720.webp'"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "3a6e0314",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "['https://picsum.photos/id/100/1280/720.webp',\n",
-       " 'https://picsum.photos/id/103/1280/720.webp',\n",
-       " 'https://picsum.photos/id/106/1280/720.webp',\n",
-       " 'https://picsum.photos/id/109/1280/720.webp',\n",
-       " 'https://picsum.photos/id/112/1280/720.webp',\n",
-       " 'https://picsum.photos/id/115/1280/720.webp']"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "test_urls = [base_url % (i+100) for i in range(0,16,3)]\n",
-    "test_urls"
+    "#| export\n",
+    "def LightboxItem(*c, # Component that when clicked will open the lightbox (often a button)\n",
+    "                 href, # Href to image, youtube video, vimeo, google maps, etc.\n",
+    "                 data_alt=None, # Alt text for the lightbox item/image\n",
+    "                 data_caption=None, # Caption for the item that shows below it\n",
+    "                 cls='', # Class for the A tag (often nothing or `uk-btn`)\n",
+    "                 **kwargs # Additional args for the `A` tag\n",
+    "                )->FT: # A(... href, data_alt, cls., ...)\n",
+    "    \"Anchor tag with appropriate structure to go inside a `LightBoxContainer`\"\n",
+    "    return fh.A(*c, href=href, data_alt=data_alt, cls=stringify(cls), **kwargs)"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "1803777a",
+   "id": "904b3eaa",
    "metadata": {},
    "outputs": [],
    "source": [
-    "def mk_lb(index:int, href:str):\n",
-    "    return Div(Lightbox(in_multi=True, link=fh.Img(src=href, alt=\"\"), caption=f\"Photo {index}\", href=href, link_cls='uk-inline'))"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "0bf64112",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/markdown": [
-       "```html\n",
-       "<div data-uk-lightbox=\"animation:slide\" class=\"grid mt-4 grid-cols-3 gap-4\">\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 1\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/100/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/100/1280/720.webp\"></a>  </div>\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 2\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/103/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/103/1280/720.webp\"></a>  </div>\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 3\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/106/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/106/1280/720.webp\"></a>  </div>\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 4\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/109/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/109/1280/720.webp\"></a>  </div>\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 5\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/112/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/112/1280/720.webp\"></a>  </div>\n",
-       "  <div>\n",
-       "<a data-caption=\"Photo 6\" data-alt=\"Lightbox Image\" href=\"https://picsum.photos/id/115/1280/720.webp\" class=\" uk-inline\"><img src=\"https://picsum.photos/id/115/1280/720.webp\"></a>  </div>\n",
-       "</div>\n",
-       "\n",
-       "```"
-      ],
-      "text/plain": [
-       "div((div((a((img((),{'src': 'https://picsum.photos/id/100/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 1', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/100/1280/720.webp', 'class': ' uk-inline'}),),{}), div((a((img((),{'src': 'https://picsum.photos/id/103/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 2', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/103/1280/720.webp', 'class': ' uk-inline'}),),{}), div((a((img((),{'src': 'https://picsum.photos/id/106/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 3', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/106/1280/720.webp', 'class': ' uk-inline'}),),{}), div((a((img((),{'src': 'https://picsum.photos/id/109/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 4', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/109/1280/720.webp', 'class': ' uk-inline'}),),{}), div((a((img((),{'src': 'https://picsum.photos/id/112/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 5', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/112/1280/720.webp', 'class': ' uk-inline'}),),{}), div((a((img((),{'src': 'https://picsum.photos/id/115/1280/720.webp', 'alt': ''}),),{'data-caption': 'Photo 6', 'data-alt': 'Lightbox Image', 'href': 'https://picsum.photos/id/115/1280/720.webp', 'class': ' uk-inline'}),),{})),{'data-uk-lightbox': 'animation:slide', 'class': 'grid mt-4 grid-cols-3 gap-4'})"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "multi = Div(data_uk_lightbox='animation:slide', cls=\"grid mt-4 grid-cols-3 gap-4\")(\n",
-    "    *[mk_lb(i+1, u) for i,u in enumerate(test_urls)]\n",
-    ")\n",
-    "multi"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c664559f",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_2h7HBGkMR-eAadKCm3Iv7A\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(multi)"
+    "# Show(\n",
+    "#     LightboxContainer(\n",
+    "#         LightboxItem(Button(\"Open\"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='alt text stuff', data_caption='my caption'),\n",
+    "#     ),\n",
+    "#     height=400\n",
+    "# )"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "79e653f8",
+   "id": "11058ff9",
    "metadata": {},
    "outputs": [],
    "source": [
-    "#| export\n",
-    "def MultiLightbox(\n",
-    "    *c:FT, # Child lightbox components\n",
-    "    urls:list=[], # List of URLs to create lightboxes from\n",
-    "    animation:str=LightboxT.slide, # Animation type\n",
-    "    nav:str='', # Navigation type (thumbnav/dotnav)\n",
-    "    counter:bool=False, # Show image counter\n",
-    "    cls:str='grid mt-4 grid-cols-3 gap-4', # Container classes\n",
-    "    **kwargs # Additional args for container\n",
-    ")->FT: # Multi-image lightbox gallery\n",
-    "    \"Creates a lightbox gallery for displaying multiple images with navigation\"\n",
-    "    nav_str = f\"slidenav: false;nav:{nav}\" if nav else ''\n",
-    "    container = Div(\n",
-    "        data_uk_lightbox=f'animation:{animation};{nav_str}',\n",
-    "        counter=counter,\n",
-    "        cls=stringify(cls),\n",
-    "        **kwargs\n",
-    "    )\n",
-    "    \n",
-    "    if urls:\n",
-    "        items = [\n",
-    "            Div(Lightbox(\n",
-    "                in_multi=True,\n",
-    "                link=fh.Img(src=url, alt=\"\"),\n",
-    "                caption=f\"Photo {i+1}\",\n",
-    "                href=url,\n",
-    "                link_cls='uk-inline'\n",
-    "            )) for i,url in enumerate(urls)\n",
-    "        ]\n",
-    "        return container(*items)\n",
-    "    return container(*c)"
+    "# Show(\n",
+    "#     LightboxContainer(\n",
+    "#         LightboxItem(Button(\"Open\"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='alt text stuff', data_caption='my caption'),\n",
+    "#         LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='alt text stuff', data_caption='my caption'),\n",
+    "#         LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='alt text stuff', data_caption='my caption'),\n",
+    "#     ),\n",
+    "#     height=400\n",
+    "# )"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "203c985c",
+   "id": "2c6448f8",
    "metadata": {},
    "outputs": [],
    "source": [
-    "ml = partial(MultiLightbox, urls=test_urls)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "67f32032",
-   "metadata": {},
-   "source": [
-    "__Slide Animation (default)__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e58c2afa",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_rV3LWoZLST22-J6oHg1anQ\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml())"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "d10f7cd2",
-   "metadata": {},
-   "source": [
-    "__Scale Animation__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "a9103959",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_V_6O6DaaQiCZrbDH6mIrCw\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(animation='scale'))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "abcb9499",
-   "metadata": {},
-   "source": [
-    "__Fade Animation__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "12c0a6df",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_0pNxkTWdTGG9Kn_XdkmlsA\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(animation='fade'))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "1eefc264",
-   "metadata": {},
-   "source": [
-    "### Navigation Options"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "64c74c79",
-   "metadata": {},
-   "source": [
-    "__No Navigation__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "16f214fa",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_OsXKQR2rSlKL-lMLcVr0gg\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(nav='false'))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "11215d61",
-   "metadata": {},
-   "source": [
-    "__Thumb Navigation__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "7c24be6a",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_x4IZOALrRK_5xuf-1qw2PA\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(nav='thumbnav'))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "f7733b0f",
-   "metadata": {},
-   "source": [
-    "__Dot Navigation__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "f243a88c",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_HcrOusaXS92FftBSm32O1g\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(nav='dotnav'))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "4f0e4087",
-   "metadata": {},
-   "source": [
-    "### With Counter in Top-Left"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "4da25310",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_kxgCqL6pSh6447GaSuAi2Q\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(ml(counter=True))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "06a27542",
-   "metadata": {},
-   "source": [
-    "### Using Custom Lightboxes in the MultiLightbox"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "0865631d",
-   "metadata": {},
-   "source": [
-    "__Buttons__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c83dc4f5",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_4NLIkxZwSXC0fffAKdQt1w\" style=\"width: 100%; height: 400px; border: none;\" onload=\"\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(MultiLightbox(\n",
-    "    Lightbox(in_multi=True, href=test_urls[2], caption=\"Testing Pic: 1\"),\n",
-    "    Lightbox(in_multi=True, href=test_urls[5], caption=\"Testing Pic: 2\"),\n",
-    "Lightbox(in_multi=True, href=test_urls[0], caption=\"Testing Pic: 3\"),\n",
-    "Lightbox(in_multi=True, href=test_urls[3], caption=\"Testing Pic: 4\")),\n",
-    "    height=400)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "21688340",
-   "metadata": {},
-   "source": [
-    "__Image Thumbnails__"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e1283408",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/_M64pGkbbR460nwTUhPwYsQ\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
-       "        let frame = this;\n",
-       "        window.addEventListener('message', function(e) {\n",
-       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
-       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
-       "        }, false);\n",
-       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(MultiLightbox(\n",
-    "    Lightbox(in_multi=True, href=test_urls[2], caption=\"Testing Pic: 1\", use_img_link=True),\n",
-    "    Lightbox(in_multi=True, href=test_urls[5], caption=\"Testing Pic: 2\",use_img_link=True),\n",
-    "Lightbox(in_multi=True, href=test_urls[0], caption=\"Testing Pic: 3\",use_img_link=True),\n",
-    "Lightbox(in_multi=True, href=test_urls[3], caption=\"Testing Pic: 4\",use_img_link=True)))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "a2e2c2d2",
-   "metadata": {},
-   "source": [
-    "### Other Media Sources"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "eb5e579f",
-   "metadata": {},
-   "source": [
-    "#### From the Franken-UI Docs:\n",
-    "\n",
-    "##### Manual content type:\n",
-    "\n",
-    "The Lightbox uses the `href` attribute to figure out the type of the linked content. If no filename extension is defined in the path, just add the data-type attribute to the <a> tag.\n",
-    "\n",
-    "*Hint:* YouTube and Vimeo Urls will be handled automatically.\n",
-    "\n",
-    "`data-type=\"image\"`\n",
-    "The content type is an image.\n",
-    "    \n",
-    "`data-type=\"video\"`\n",
-    "The content type is a video.\n",
-    "    \n",
-    "`data-type=\"iframe\"`\n",
-    "The content type is a regular website."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "93dcfe16",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "video_url = 'https://yootheme.com/site/images/media/yootheme-pro.mp4'\n",
-    "yt_url = 'https://www.youtube.com/watch?v=c2pz2mlSfXA'\n",
-    "vimeo_url = 'https://vimeo.com/1084537'\n",
-    "iframe_url = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "f3cbf937",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<iframe src=\"http://localhost:8008/__CpegXLpR8K5RbuhP-LTFQ\" style=\"width: 100%; height: 600px; border: none;\" onload=\"\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "execution_count": null,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "Show(MultiLightbox(cls=\"flex p-6 justify-center mx-auto gap-2\")(\n",
-    "    Lightbox(in_multi=True, link=\"Video\", href=video_url, caption=\"Video\"),\n",
-    "    Lightbox(in_multi=True, link=\"Youtube\", href=yt_url, caption=\"Youtube\"),\n",
-    "    Lightbox(in_multi=True, link=\"Vimeo\", href=vimeo_url, caption=\"Vimeo\"),\n",
-    "    Lightbox(in_multi=True, link=\"Google Maps\", href=iframe_url, iframe=True, caption=\"Google Maps\")),\n",
-    "height=600)"
+    "# Show(\n",
+    "#     LightboxContainer(\n",
+    "#         LightboxItem(Button(\"Open\"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),\n",
+    "#         LightboxItem(Button(\"Open\"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),\n",
+    "#         LightboxItem(Button(\"Open\"), href='https://vimeo.com/1084537'),\n",
+    "#         LightboxItem(Button(\"Open\"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938')\n",
+    "# ),\n",
+    "#     height=400\n",
+    "# )"
    ]
   }
  ],