0

こんにちは、次の問題に遭遇しました。Fancybox v.2.1.3 ajax ウィンドウ内で Flexslider v.2.1 を使用しようとしました。ajax ウィンドウがポップアップしますが、表示されている 3 つの画像には方向ナビゲーション アイコンがなく、画像を閲覧することもまったくできません。

関連する html ビットは次のようになります。

<ul class="moodlegrid sectionwrap">
            <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>
        </ul>

index.html ページの下部にある jQuery 部分は次のようになります。

<script type='text/javascript' src="./js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="./js/jquery.fancybox.js"></script>
<script type='text/javascript' src="./js/jquery.flexslider-2.1.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $(".ajax1").fancybox({
        type: 'ajax',
        fitToView   : false,
        openOpacity : false,
        width       : '70%',
        height      : '97%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        afterLoad: function() {
            $('.flexslider').flexslider({
                animation: "slide",
                animationLoop: true,
                controlNav: false,
                directionNav: true,
                slideshow: false
            });}        
    });
});

ajax ウィンドウにロードされた html の Flexslider 関連部分は次のようになります。

<div class="flexslider">
    <ul class="slides">
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
        <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
    </ul>
</div>

コンソール内では、エラーはまったくありません。誰かがその問題を解決する方法を知っていれば、それは素晴らしいことです。よろしくお願いします。

4

1 に答える 1

1

私はまったく同じ問題を抱えていました。問題は、flexslider を起動する前に、ajax のロード後に dom をリロードする必要があることです。

私はフロントエンド開発者なので、シンプルさとスピードのために、flexslider 呼び出しを ajax ロードに入れました。このような：

<div class="flexslider">
    <ul class="slides">
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
        <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
    </ul>
</div>

$("flexslider ul.slides").flexslider();

これは私のために働く..

于 2012-12-24T14:10:14.567 に答える