Pencere Gallery Lightbox Demos

Download This Plugin Back To CSSScript.Com

A modern gallery lightbox for images, video, and iframes with View Transitions, fullscreen, and keyboard support.

Primary Demo

Interactive Gallery

Open the core viewer with zoom, swipe, drag-to-dismiss, fullscreen, hash routing, view transitions, event hooks, live locale switching, RTL toggling, placeholders, and the slideshow plugin running on the same instance.

Direction ltr
Active locale en
Main gallery ready
Routing fragment none
Mixed Content

Media and Renderers

This deck combines video, iframe, HTML content, and a custom renderer registered ahead of built-ins.

Gallery preview collage
Video autoplay capable Iframe sandboxable HTML DOM factory Custom typed payload

The same viewer instance logs render and navigation hooks so renderer changes stay visible in the runtime panel.

Runtime Signals

Events and Hooks

Open any demo and watch lifecycle hooks, core events, routing updates, and controlled requests stream here. 


        


        

          

            

              
Declarative DOM

              
bindPencere

            

          

          

            These anchors rely on `data-pencere` and `data-gallery` only. The viewer item list is
            collected from the DOM at click time.
          

          
        


        

          

            

              
Custom Element

              
Web Component

            

          

          

            The component wrapper parses a JSON `items` attribute, reflects `open`, and emits
            custom events for open, change, and close.
          

          

            
            
          

          
Waiting for pencere:* events.

          
        


        

          

            

              
Security

              
URL and HTML Helpers

            

          

          

            This sandbox runs `safeUrl`, `isSafeUrl`, `escapeHtml`, and `createTrustedTypesPolicy`
            with visible output.
          

          

            

              

                
                
              

              

                
                
              

            

            

              
            

            

          

        


        

          

            

              
Controlled Mode

              
Core State Requests

            

          

          

            `Pencere` can emit `requestOpen`, `requestChange`, and `requestClose` without mutating
            state until external code calls the matching commit method.