嗨,遇到了以下问题。我尝试在Fancybox v.2.1.3 ajax窗口中使用Flexslider v.2.1。弹出ajax窗口,但显示的三个图像缺少方向导航图标,并且根本无法浏览图像。
相关的 html 位如下所示:
<ul class="moodlegrid sectionwrap">
<li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>
</ul>
在 index.html 页面的底部,jQuery 部分如下所示:
<script type='text/javascript' src="./js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="./js/jquery.fancybox.js"></script>
<script type='text/javascript' src="./js/jquery.flexslider-2.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".ajax1").fancybox({
type: 'ajax',
fitToView : false,
openOpacity : false,
width : '70%',
height : '97%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterLoad: function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
controlNav: false,
directionNav: true,
slideshow: false
});}
});
});
加载到 ajax 窗口中的 html 的 Flexslider 相关部分如下所示:
<div class="flexslider">
<ul class="slides">
<li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
<li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
<li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
</ul>
</div>
在控制台内部,根本没有任何错误。如果有人知道如何解决这个问题,那就太好了。提前感谢r。
我只是遇到了完全相同的问题。问题是 dom 需要在 ajax 加载后重新加载,然后才能触发 flexslider。
我是一名前端开发人员,所以为了简单和速度起见,我将弹性滑块调用放在 ajax 加载中。喜欢这个:
<div class="flexslider">
<ul class="slides">
<li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
<li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
<li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
</ul>
</div>
$("flexslider ul.slides").flexslider();
这对我有用..