1

私は現在レスポンシブデザインに取り組んでおり、elastislide ( http://tympanus.net/Development/Elastislide/ ) を使用してスライダーを作成しましたが、今は ajax または Iframe で fancybox ( http://fancyapps .com/fancybox/#examples ) スライダーの各画像をクリックしても機能せず、火災バグのコンソールにも Web 開発者ツールにもエラーは発生しません。

これがコードです。

<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>

私がelatislideにコメントすると、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 に答える