记录一下在Bootstrap modal中使用blueimp-gallery遇到的一个小问题

laijiawen2010

于 2020-04-09 17:28:09 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： java js html css

本文链接：https://blog.youkuaiyun.com/laijiawen2010/article/details/105414192

本文介绍了在Bootstrap模态框中使用Blueimp Gallery遇到的问题及解决过程。通过添加相关CSS和JS文件，配合Bootstrap的' shown.bs.modal '事件，成功实现了模态框内图片的预览和轮播功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、blueimp-gallery是什么？

Blueimp Gallery 是一个多功能图片展示插件，支持移动端的触摸手势操作，支持响应式和高度自定义功能，可以展示图片、视频可直接播放，可以实现左右轮播和 LightBox 效果。

Blueimp Gallery的详细教程和Demo的链接地址：https://github.com/blueimp/Gallery/blob/master/README.md。

二、在Bootstrap modal遇到的问题？

由于客户需要对系统的图片进行预览，且要求实现左右轮播的效果，故选择了Blueimp Gallery。因为要实现左右轮动效果，所以我按照技术文档在我的代码中加入了以下内容：

1、引入相关CSS和JS文件

<link rel="stylesheet" data-th-href="@{css/gallery/blueimp-gallery.min.css}">
<script data-th-src="@{js/gallery/blueimp-gallery.min.js}"></script>
<script data-th-src="@{js/gallery/jquery.blueimp-gallery.min.js}"></script>

2、在modal.html页面中加入了一部分HTML内容

<div id="blueimp-image-carousel" cl

最低0.47元/天解锁文章

200万优质内容无限畅学