我现在正在使用响应式设计,我使用 elastislide ( http://tympanus.net/Development/Elastislide/ ) 制作了一个滑块,现在我想用 Fancybox ( http://fancyapps ) 调用一个带有 ajax 或 Iframe 的表单.com/fancybox/#examples)单击滑块的每个图像,但它不起作用,并且我的 fire bug 的控制台以及我的 web-developer 工具上没有错误。
这是代码。
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/1.jpg" alt="image01" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/2.jpg" alt="image02" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/3.jpg" alt="image03" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/4.jpg" alt="image04" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/5.jpg" alt="image05" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/6.jpg" alt="image06" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/7.jpg" alt="image07" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/8.jpg" alt="image08" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/9.jpg" alt="image09" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/10.jpg" alt="image10" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/11.jpg" alt="image11" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/12.jpg" alt="image12" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/13.jpg" alt="image13" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/14.jpg" alt="image14" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/15.jpg" alt="image15" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/16.jpg" alt="image16" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/17.jpg" alt="image17" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/18.jpg" alt="image18" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/19.jpg" alt="image19" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/20.jpg" alt="image20" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/21.jpg" alt="image21" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/22.jpg" alt="image22" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/23.jpg" alt="image23" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/24.jpg" alt="image24" /></a></li>
<li><a href="http://localhost/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/25.jpg" alt="image25" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.0" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
$('.fancybox').fancybox();
$('#carousel').elastislide({
imageW : 180,
minItems : 5
});
</script>
当我评论 elastislide 时,fancybox 可以工作,但两者都不能正常工作...... :(