推荐开源项目：Spotlight.js - 现代HTML5媒体画廊库

作者：System 时间：2024年08月09日分类：所有,html5 字数：1415

这篇文章距离上次修改已过237天，其中的内容可能已经有所变动。

Spotlight.js 是一个用于创建漂亮的HTML5媒体画廊的库。以下是一个使用 Spotlight.js 创建媒体画廊的简单示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spotlight.js Media Gallery Example</title>
    <link rel="stylesheet" href="spotlight.css" />
    <script src="spotlight.js"></script>
    <style>
        .spotlight {
            width: 600px;
            height: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="spotlight">
        <div class="media-gallery">
            <img src="image1.jpg" data-caption="Caption for Image 1" />
            <img src="image2.jpg" data-caption="Caption for Image 2" />
            <img src="image3.jpg" data-caption="Caption for Image 3" />
            <!-- More images can be added here -->
        </div>
    </div>

    <script>
        // Initialize Spotlight with the media gallery
        const gallery = document.querySelector('.media-gallery');
        const spotlight = new Spotlight(gallery, {
            overlay: true, // Display an overlay over the media
            keyboard: true, // Enable keyboard navigation
            captions: true // Display image captions
        });
    </script>
</body>
</html>

在这个例子中，我们首先引入了必要的CSS和JavaScript文件。然后，我们定义了一个.spotlight容器，在其中放置了包含多张图片的.media-gallery容器。每个<img>标签上的data-caption属性用于提供图片标题。最后，我们初始化了Spotlight实例，并配置了一些选项，如是否显示遮罩、是否启用键盘导航以及是否显示图片标题。

推荐开源项目：Spotlight.js - 现代HTML5媒体画廊库

评论已关闭

推荐阅读