hugo-theme-next/exampleSite/content/post/06-image-viewer/index.en-us.md
2025-01-30 09:20:03 +08:00

40 lines
1.7 KiB
Markdown

---
title: "Image Browsing Tool"
description: "By default, images within the article will be browsed. Clicking on an image will display a larger image, while clicking on a blank space will close it."
Keywords: "image, image, browser, photo album"
date: 2025-01-25T21:28:12+08:00
lastmod: 2025-01-25T21:28:12+08:00
categories:
- Example
tags:
- Image
- Album
- Browse
url: "demo/image-viewer.html"
toc: false
expired: true
---
This theme comes with an image browser function that supports browsing images that appear in the article area. Clicking on an image can view a larger image, while clicking on a blank space can close it. No need to configure any parameters, just add image information at the corresponding position in the article.
<!--more-->
The image browser referenced [fengyuanchen](https://fengyuanchen.github.io/) Developed [viewerjs](https://fengyuanchen.github.io/viewerjs/) Supports displaying image name, size, rotation, scaling, playback, and other functions. You can click on the following example image to view the experience:
## Animals
![cute-scottish-fold-cat](/demo/image-viewer/photos/preview_cute-scottish-fold-cat.jpg)
![scottish-fold-kitten](/demo/image-viewer/photos/preview_scottish-fold-kitten.jpg)
![hourses](/demo/image-viewer/photos/preview_horses.jpg)
![owl-family-background](/demo/image-viewer/photos/preview_owl-family-background.jpg)
## Scenery
![luxury-resort-in-maldives](/demo/image-viewer/photos/preview_luxury-resort-in-maldives.jpg)
![sea-shell](/demo/image-viewer/photos/preview_sea-shell.jpg)
![the-arch-sunset](/demo/image-viewer/photos/preview_the-arch-sunset.jpg)
![norway-autumn-landscape](/demo/image-viewer/photos/preview_norway-autumn-landscape.jpg)