1

我现在正在使用响应式设计,我使用 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 可以工作,但两者都不能正常工作...... :(

4

1 回答 1

1

我找到了解决方案:)首先我将类从'a'标签替换为'li'标签,然后使用手动ajax调用它,所以我更新的代码在这里......

   <div id="carousel" class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class=" "><img src="images/large/1.jpg" alt="image01" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" ><img src="images/large/2.jpg" alt="image02" /></a></li>
                        <li class="fancybox fancybox.ajax"> <a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/3.jpg" alt="image03" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/4.jpg" alt="image04" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/5.jpg" alt="image05" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/6.jpg" alt="image06" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/7.jpg" alt="image07" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/8.jpg" alt="image08" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/9.jpg" alt="image09" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/10.jpg" alt="image10" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/11.jpg" alt="image11" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/12.jpg" alt="image12" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/13.jpg" alt="image13" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/14.jpg" alt="image14" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/15.jpg" alt="image15" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/16.jpg" alt="image16" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/17.jpg" alt="image17" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/18.jpg" alt="image18" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/19.jpg" alt="image19" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/20.jpg" alt="image20" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/21.jpg" alt="image21" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/22.jpg" alt="image22" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/23.jpg" alt="image23" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/24.jpg" alt="image24" /></a></li>
                        <li class="fancybox fancybox.ajax"><a href="http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html" class="fancybox fancybox.ajax"><img src="images/large/25.jpg" alt="image25" /></a></li>
                    </ul>
                </div>
            </div>

在脚本中我在脚本中做了这个改变

 <script>
  $(".fancybox").click(function() {

$.fancybox.open([
    {
        href : 'http://192.168.3.12/test/Elastislide/fancybox/demo/iframe.html',                
        title : '1st title',
    type: 'ajax'
    }
], {
    padding : 0
});

return false;

});

希望这可以帮助任何面临同样问题的人....

于 2012-09-18T07:42:11.953 回答