Fancybox 2和滑动滑块不能一起工作
Fancybox 2 and Swipe Slider do not work together
我想创建一个带有滑动图像滑块的扇形框。按照fancybox的操作页面中的说明,我创建了一个隐藏的div,我的滑块将放在那里。
<div style="display:none">
<div id="hidden" >
<div id="mySwipe" class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
</div>
现在我使用这样的隐藏内容来填充一个fancybox:
<p align="center"><a class="fancybox" href="#hidden">Click me</a></p>
不幸的是,这有一些问题,我有空(或隐藏?)内容的滑块。换句话说,我没有得到幻灯片0->1->2。
我想这个问题是由"display:none"样式引起的。事实上,如果我把这个拿出来,幻灯片是有效的,但它显示了隐藏的内容,我不想要这个。
在这里,我向您报告我的html:的头部
<!-- Add JQuery -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add Swipe Slider -->
<script src="js/slider/swipe.js"></script>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
/* END required styles */
</style>
<!-- Add Fancybox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".fancybox").fancybox();
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {});
});
</script>
您可以尝试设置而不是显示:none
<div style="position:absolute; left:-5000px;">
通过这种方式,结果类似于display:none(div的内容不可见),并且您应该避免所描述的问题
相关文章:
- 两个独立工作的javascript函数,但不能一起工作
- jquery draggable和resizable在动态生成的元素中不能一起工作
- AngularJS和JS Math.max.apply()不能一起工作
- javascript和php不能一起工作
- 多个 Angular 验证器独立工作,但不能一起工作
- onclick 和 ondblclick 不能一起工作
- 数据切换和onclick不能一起工作,我太新了,无法应用@epascarello的解决方案
- 图像滑块和下拉菜单不能一起工作
- 变量数组+正则表达式不能一起工作
- jQuery .then() 和 success block 不能一起工作
- 两个jquery项不能一起工作
- Bootstrap滚动间谍和粘性导航不能一起工作
- 两个函数don't不能一起工作,但不能出错
- Fancybox 2和滑动滑块不能一起工作
- 两个java脚本不能一起工作
- 更改src和currentTime;我不能一起工作
- 链接和图像不能一起工作
- Knockout.js和敲除验证不能一起工作
- HTML, CSS, JQUERY不能一起工作
- Javascript (canvas) - for循环和drawImage不能一起工作