我正在学习 css flexbox，但我在使用 javascript 滑块时遇到了一个问题。我已经测试了几个（lightgallery.js、swiper.js、siema.js），但每次它似乎都会破坏我的 flexbox 容器。
我有一个 main 元素和一个 side 元素。在移动设备上，我希望主要和次要元素可以一个在另一个之下。它似乎运作良好。但是在桌面上，我希望主要元素适合最大 1000 像素的 2/3，而旁边元素适合 1/3，并排。
不幸的是，滑块似乎破坏了我的 .wrap 容器。我已经测试了很多东西并搜索了像我这样的问题但没有结果。我真的不明白什么可以解决我的问题。我必须承认我有点失落。
你可以在这支笔上看到这个问题（lightgallery.js）：https ://codepen.io/studiok7/pen/pxGWMJ
<span>Thanks ;-)</span>
在我的网站上实施lightgallery时遇到问题.我已经搜索了堆栈溢出并阅读了lightgallery页面上的文档,无法弄清楚问题是什么!这是我的网站的代码:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>W3 Alchemy | My Portfolio of Work</title>
<link href="stylesheets/normalize.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="stylesheets/app.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/lightGallery.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="contain-to-grid header-section">
<nav class="top-bar important-class" data-topbar>
<ul class="title-area">
<li class="name">
<a href="http://www.w3alchemy.com"><img src="img/W3HeadLogo1.png" alt="" id="logo-image"></a>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</section>
</nav>
</div>
<div class="header-fill"></div>
<div class="row"> …我在我的项目中成功配置了 lightgallery。但是，当我单击缩略图并出现大图像时，上一个、下一个、关闭图标无法正确显示。事实上奇怪的字符正在显示。这可以在页面上查看：http : //agentpet.com/lightgallery/lg.html。请帮我看看有什么问题？
当我尝试单击链接时,它会在浏览器控制台中显示:
Uncaught TypeError: $(...).lightGallery is not a function(anonymous function) @ index.html:250dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
这是我使用的代码:
$('#gallery').on('click', function() {
$(this).lightGallery({
dynamic: true,
dynamicEl: [{
"src": 'assets/images/gallery/1.jpg',
'thumb': 'assets/images/gallery/thumbs/1.jpg',
'subHtml': '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>'
}, {
'src': 'assets/images/gallery/2.jpg',
'thumb': 'assets/images/gallery/thumbs/2.jpg',
'subHtml': "<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing …我正在尝试使用lightGallery jQuery插件(http://sachinchoolur.github.io/lightGallery/index.html)与AngularJS一起使用.
我发现一些答案表明我需要一个指令,所以我创建了以下内容:
.directive('lightGallery', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
jQuery(element).lightGallery();
}
};
})
然后在我看来我这样做:
<ul lightGallery>
<li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}">
<img ng-src="{{photo.thumbnail}}" />
</li>
</ul>
(我也试过<ul light-gallery>)当我运行页面时,当我点击任何缩略图时没有任何反应.不过,我可以alert()在链接功能中添加一个,然后显示.
如何让AngularJS与jQuery和这个插件一起玩？
更新:
经过一些调试后,似乎jQuery(element).lightGallery()在模型绑定到视图之前执行.那么接下来的问题是,当一切都被约束而不是之前,我如何获得一个被调用的指令.
我正在使用 lightgallery 插件在点击时显示我网站的图像。我将灯光画廊初始化为
$(document).ready(function(){
$('#lightgallery').lightGallery({
selector: '.item'
});
});
在文档加载它的工作正常。问题是当我加载更多图像并使用 jquery 附加它们时，我想再次重新初始化 lightgallery 以便为 ajax 调用加载的图像工作。但是灯廊对他们不起作用。它仅适用于页面加载时加载的图像。
所以我使用https://sachinchoolur.github.io/lightgallery.js/作为我的画廊，这很棒。
当用户单击并图像时，它会打开并且一切正常。
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
但是，我有一个边缘情况，我希望用户能够按下页面上的另一个图像来打开图库。
让我们假装这是一个标签
<a id="magic_start" href="">
我以为我能够做到这一点：
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
我也试过 click() 和 trigger('click') 但它们不起作用。
我认为因为 lightgallery.js 是它自己的人，可以这么说。
但它什么也不做。没有错误，但什么也不做。
有什么建议？
编辑：
我目前的解决方法是...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
但是由于必须重新加载页面，这需要从 UX 中获取方法。
我有多个行中的图像,我希望Lightgallery能够捕获我页面上的所有图像.我似乎只能为每一行而不是一个大画廊设置单独的灯廊.出现问题是因为我在div中有多组图像,在一个大容器中有多个div.如何将撤退图像容器中的所有图像合并/加入/合并到一个图库中？
<div class="container-fluid" id="retreats-image-container">
<div class="row row-center">
<a href="img/retreats/retreats1.jpg">
<div class="col-lg-3 col-sm-12 text-center retreats-img">
<img src="img/retreats/retreats1.jpg" width="100%" height="100%" title="Special events" alt="Special events">
</div>
</a>
<a href="img/retreats/retreats2.jpg">
<div class="col-lg-3 col-sm-12 text-center retreats-img">
<img src="img/retreats/retreats2.jpg" width="100%" height="100%" title="Beauty and makeup" alt="Beauty and makeup">
</div>
</a>
<a href="img/retreats/retreats3.jpg">
<div class="col-lg-3 col-sm-12 text-center retreats-img">
<img src="img/retreats/retreats3.jpg" width="100%" height="100%" title="Special events" alt="Special events">
</div>
</a>
<a href="img/retreats/retreats4.jpg">
<div class="col-lg-3 col-sm-12 text-center retreats-img">
<img src="img/retreats/retreats4.jpg" width="100%" height="100%" title="Special events" alt="Special events">
</div>
</a>
</div> …我从Firefox收到此错误：
TypeError: $(...).lightGallery(...).destroy is not a function
我正在使用以下插件播放视频并显示图片库 https://github.com/sachinchoolur/lightGallery。
我想重新初始化lightGallery，因为我正在使用ajax在容器中动态添加元素。在以前版本的lightGallery上运行正常，但在当前版本上不运行。
我正在使用以下代码。
// destroy previous gallery
$("#lightGallery2").lightGallery({
selector : '.image_gallery',
videojs: true,
download: false
}).destroy();
// re-initialize
$("#lightGallery2").lightGallery({
selector: '.image_gallery',
videojs: true,
download: false
});
请提出建议。
谢谢