0

これはグリッド内の単一の画像であり、他のすべての画像の上に表示されます。正直なところ、理由はわかりません。助けが必要です。

これは、ページの読み込み中にのみ発生するものです。

Zurb Foundation Orbitスライダーを使用していますが、ページには次のようなセクションがあります。

<section class="container">
    <div class="row">
        <div class="two columns">
        </div>
        <div class="eight columns">
            <div id="featured">
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="http://wazzup.wedoitforfun.org/" target="_blank" class="sb xlarge flat glossy wazzup"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray nAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray eAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray wAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray aAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray sAppIcon"></a></li>
                    </ul>
                </div>
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="#" class="sb xlarge flat light-gray glossy about"></a></li>
                        <li><a href="http://www.scoop.it/t/tooltip" target="_blank" class="sb xlarge flat light-gray glossy tooltip"></a></li>
                        <li><a href="http://www.scoop.it/t/innovatus" target="_blank" class="sb xlarge flat light-gray glossy innovatus"></a></li>
                        <li><a href="http://whereismycode.pintolaranja.com" target="_blank" class="sb xlarge flat light-gray glossy whereismycode"></a></li>
                        <li><a href="http://scrumplicity.net" target="_blank" class="sb xlarge flat light-gray glossy scrumplicity"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="two columns">
        </div>          
    </div>
</section>

スライド部分の設定を担当するJavaScriptは次のとおりです。

jQuery(document).ready(function ($) {

    $("#featured").orbit({
         animation: 'horizontal-push',     // fade, horizontal-slide, vertical-slide, horizontal-push
        animationSpeed: 800,               // how fast animtions are
         timer: false,                      // true or false to have the timer
         advanceSpeed: 4000,                // if timer is enabled, time between transitions 
         pauseOnHover: false,               // if you hover pauses the slider
         startClockOnMouseOut: false,       // if clock should start on MouseOut
         startClockOnMouseOutAfter: 1000,   // how long after MouseOut should the timer start again
         directionalNav: true,              // manual advancing directional navs
         captions: true,                    // do you want captions?
         captionAnimation: 'fade',          // fade, slideOpen, none
         captionAnimationSpeed: 800,        // if so how quickly should they animate in
         bullets: false,                    // true or false to activate the bullet navigation
         bulletThumbs: false,               // thumbnails for the bullets
         bulletThumbLocation: '',           // location from this file where thumbs will be
         afterSlideChange: function(){},    // empty function 
         fluid: '640x320'                   // or set a aspect ratio for content slides (ex: '4x3') 
    });
});

私が得るのは常に、最初のグリッドの2番目の画像が2番目のグリッドの2番目の画像に置き換えられていることです。つまり、ページをロードすると、nAppIconが表示されず、代わりにツールチップアイコンが表示されます。

次に、スライダーの矢印をクリックしてナビゲートすると、これがすべて消え、すべてのアイコンが永久に適切な場所に表示され、重ならないようになります。

4

1 に答える 1

0

わかりました、これが私が見つけた答えです。あまり好きではありませんが、うまくいきました。

デフォルトでは、下のスライドを非表示に設定してから、次のようにします。

    $(".right").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});

$(".left").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});
于 2012-04-20T12:44:38.153 に答える