jquery - Laravel - 在 app.js 中导入包后,Lightgallery js 未从刀片文件初始化
问题描述
我在我的项目中使用lightgallery并使用npm 命令安装了包,之后,我在 app.js 文件中导入了包文件(JS 和 CSS),如下所示:
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
现在我<div id="inline-gallery-container" class="inline-gallery-container"></div>
在dashboard.blade.php文件中创建了div。
之后,我将以下代码放在app.js文件中:
const lgContainer = document.getElementById("inline-gallery-container");
const inlineGallery = lightGallery(lgContainer, {
container: lgContainer,
dynamic: true,
hash: false,
closable: false,
showMaximizeIcon: true,
appendSubHtmlTo: ".lg-item",
slideDelay: 400,
plugins: [lgZoom, lgThumbnail],
dynamicEl: [
{
src:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
responsive:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
thumb:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
subHtml: `<div class="lightGallery-captions">
<h4>Photo by <a href="https://unsplash.com/@dann">Dan</a></h4>
<p>Published on November 13, 2018</p>
</div>`
},
{
src:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
responsive:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
thumb:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
subHtml: `<div class="lightGallery-captions">
<h4>Photo by <a href="https://unsplash.com/@kylepyt">Kyle Peyton</a></h4>
<p>Published on September 14, 2016</p>
</div>`
},
],
thumbWidth: 60,
thumbHeight: "40px",
thumbMargin: 4
});
inlineGallery.openGallery();
现在将上面的 js 代码放在app.js文件中,它可以正常工作,但是当我将代码移动到dashboard.blade.php文件时,它给了我这个错误:
Uncaught ReferenceError: lightGallery is not defined
我真的不知道如何解决这个问题。
解决方案
首先,您需要确保将导入放在正确的位置(例如 app.css / app.js)。根据我的经验,如果您希望全局访问函数/类,则需要将其分配给app.js中的窗口。
您可能还需要将字体复制到您的公共目录。
资源/js/app.js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'
window.lightGallery = lightGallery;
window.lgThumbnail = lgThumbnail;
window.lgZoom = lgThumbnail;
资源/css/app.css
@import '~lightgallery/css/lightgallery-bundle.css';
webpack.mix.js
mix.copyDirectory("node_modules/lightgallery/fonts", "public/fonts");
推荐阅读
- android - Android活动之间的Dagger 2 Singleton
- python - 如果列表中的名称以 f 结尾,则 for 循环打印 0,如果它在 python 中以 r 结尾,则打印 1
- reactjs - Reactstrap 条件折叠由 e.target
- javascript - D3:如何将使用 D3 生成的 SVG 路径的笔划剪裁到同一路径的内部?
- node.js - Discord.js 语音在连续 10 个文件后停止播放音频
- javascript - 如何使用 agora web sdk 发布到 youtube/facebook 等 rtmp 服务
- anylogic - 从数据库导出数据时模型停止模拟
- r - Read Tab Delineated 使用 /ts 生成数据
- python - 从 PyCharm 远程执行代码时删除“-u”参数
- amazon-web-services - 从不使用 gRPC 客户端的 gRPC 端点获取状态代码