0

固定幅のサイトで FlexSlider2 を使用していますが、「フルスクリーン」ビューのボタンを作成しようとしています。基本的に、ボタンはメイン サイトのコンテナ div を 100% 幅に変更し、他のサイト要素を非表示にするだけです。

ボタンの機能のコードは次のとおりです。

    $('.fullscreen-toggle').click(function() {
        $('#container').toggleClass('full-width', 0);
        $('#header').toggleClass('hide', 0);
        $('#menu').toggleClass('hide', 0);
        $('#lower-content').toggleClass('hide', 0);
        $('.fullscreen-toggle span').toggle();
    });

私が抱えている問題は、FlexSlider は、ウィンドウのサイズが変更されたとき、または (ブラウザーのタブを変更することによって) フォーカスが合わせられたり外れたりしたときにのみ、画像/スライドの幅を調整することです。ボタンがクリックされたときにFlexSliderを「リロード」して画像を全幅にする方法を見つけることができませんでした。ボタンをクリックすると、次のように一度に複数のスライドが表示されます。

私が試したこと：

  • このプラグイン: benalman (com) /projects/jquery-resize-plugin/ (最小リンク要件を満たすためにリンクが削除されました)
  • .load() を使用してスクリプトを更新しようとします (これは .load の意図した機能ではないと思いますが、とにかく試してみました:S)
  • $('#slider').flexslider();呼び出しを .click() 関数に再度含める
  • 上記のものの他のバリエーション、そしておそらく私が覚えていないものもあります! 私は今しばらくこれにいます

申し訳ありませんが、サイトに直接リンクすることはできませんが、さらに情報が必要な場合はお知らせください。

更新$('ul.slides li').css("width", $('#container').width() + "px");.click 関数に 追加すると、画像が適切なサイズになりますが、2 つのスライドが一度に表示されます。今回は完全に半分に分割されています。

更新 2 Flexslider CSS: http://pastebin.com/zVk82NkK

4

1 に答える 1

0

flexslider.css ファイルにこの行がありますか?

.flexslider .slides img {width: 100%; display: block;}

width: 100%毎回スライドする画像は1枚だけで十分だと思います。

于 2013-04-18T10:22:55.497 に答える