0
我想創建一個fancybox與Swipe image slider裏面。按照fancybox的how-to頁面中的說明，我創建一個隱藏div，放置我的滑塊。Fancybox 2和滑動滑塊不一起工作
<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>