遗漏的类型错误：。这$ lightbox.css（...）淡入不是一个函数

，所以我想实现lightbox2在我的4角以下应用此 Documentation

第一步

npm i --save lightbox2

第二步：添加CSS和JS我.angular-cli.json像这样

"styles": [ 
    ..., 
    "../node_modules/lightbox2/dist/css/lightbox.min.css", 
    ... 
    ], 
    "scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    ... 
    "../node_modules/lightbox2/dist/js/lightbox.min.js" 
    ],

正如你所看到的，是lightbox.js jQuery的一个后上市。

第三步我的测试图像看起来像这样，每个人都有它自己的唯一名称，以免将它们分组在一起。

<a href="http://lorempixel.com/560/560/business/1" data-lightbox="image-1" data-title="My caption"> 
     <img src="http://lorempixel.com/600/600/business/1" class="img-fluid"> 
    </a>

npm start不会产生错误消息，所以我想我没有搞砸第三步。然而，当我点击图片我得到定向到一个单独的标签，而镀铬日志

Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function at b.start (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :12:4058) at HTMLAnchorElement.eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :12:987) at HTMLBodyElement.dispatch (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :3:10551) at HTMLBodyElement.q.handle (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :3:8578) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (VM19983 polyfills.bundle.js:2970) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (VM19983 polyfills.bundle.js:2737) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (VM19983 polyfills.bundle.js:3044) at invokeTask (VM19983 polyfills.bundle.js:4085) at HTMLBodyElement.globalZoneAwareCallback (VM19983 polyfills.bundle.js:4111)

我也觉得这question关于与角2类似的问题，但它并没有帮助我满意。

来源

2017-09-30 j4g0

Zahmoulovic的答案确实有效，它让我找到了有关angular-cli和jquery的问题。事实证明，从

"../node_modules/jquery/dist/jquery.slim.min.js",

切换到

"../node_modules/jquery/dist/jquery.min.js",

是所有花。

来源

2017-10-01 07:03:57 j4g0

尝试添加以下内容到的index.html **头标记**内：

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script>

并删除jquery.slim.min.js导入角cli.json。显然，jQuery在您的angular-cli.json中无法识别。您必须在index.html中导入脚本。

在样本项目中尝试并仅适用于该导入。

编辑

我觉得j4g0解决方案是一个清洁工。将脚本和css导入到angular-cli.json中更好。

来源

2017-10-01 00:19:39 Zahmoulovic

遗漏的类型错误：。这$ lightbox.css（...）淡入不是一个函数

回答

相关问题