Home›Docs›Bubble›Viewer Library

Viewer Library

Last updated: 24 days ago

Category: Bubble

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

Viewer Library: More Features and Demo Examples24 days ago Viewer Library: Detailed Usage of the content Parameter and How to Embed Media Files from Other Platforms24 days ago Viewer Library：Use Sidebar24 days ago Viewer Library24 days ago

Preface

The media viewer is implemented based on the Swipe module, primarily designed for full-screen viewing of media files including images, videos, audio, iframes, etc. Its features and capabilities include:

Supports multiple button styles
Supports multiple content formats
Supports custom toolbox
Supports mixed content structure
Supports thumbnail usage
Supports multiple styles with customizable themes
Supports lazy loading of media files to improve execution efficiency

Basic Usage

Simply add the oc-viewer attribute to an image node to create a media viewer.

The default behavior of the media viewer is as follows:

Does not autoplay - content is switched via dragging or navigation
Double-clicking media files automatically zooms to preset size (2x), allowing drag-to-view details and mouse wheel zooming (disables drag-to-switch functionality)
Double-clicking again restores initial size and re-enables drag-to-switch functionality

Output
HTML

```
                
                
            
```

Alternatively, you can create a media viewer using the id+new approach.

Parameter target accepts button node selector; parameter content accepts media file URL.

Output
HTML
JS

```
                
                
            
```

                
                new orca.Viewer({
                    target:'#demo0001',
                    content:'https://unpkg.com/orcares/image/earth01.jpg'
                })

Manual Creation

Using the show() method, users can customize how and when the media viewer is created and displayed.

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0002.onclick = ()=>{
                    if(ins)return;
                    ins = new orca.Viewer({
                            content:'https://unpkg.com/orcares/image/earth01.jpg'
                        });
                }
                demo0003.onclick = ()=>{
                    ins && ins.show();
                }

src Attribute

If the node itself has a src attribute, the media viewer will use it as the media file URL; otherwise it will look for the first child node with a src attribute and use its value.

Output
HTML

Read src from self

Read src from child node

Click thumbnail to show full image
```
                
                
            
```

Displaying Titles

By default reads titles from the node's alt attribute, falling back to title attribute if not found.

Output
HTML

Read from title

Read from alt
```
                
                
            
```

Gallery

Multiple oc-viewer attributes with the same insName value create a gallery. Each button corresponds to its own gallery index.

Output
HTML

```
                
                
            
```

Displaying Thumbnails

Use parameter thumb:true to show thumbnails, particularly useful for galleries.

Viewers in a gallery automatically merge parameters, so thumb:true only needs to be specified once.

Output
HTML

```
                
                
            
```

Using Toolbox

The toolbox is located in the top-right corner of the media viewer, displaying only the close button by default. Additional tool buttons can be shown via the tools.children parameter.

Built-in tool buttons include: