5

FlexSliderを使用したレスポンシブスライダーがあります。また、各スライダーの下のテキストのサイズを変更したいと思います。FitTextは、最初のスライドを除いて、またはウィンドウのサイズを変更した場合を除いて、どのスライドでも初期化されません。どうすればこれを（FOUCなしで）機能させることができますか？IE 8以降、および最新のブラウザで動作するはずです。

http://jsfiddle.net/simply_simpy/adtVP/11/

HTML

    <div class="flexslider">
      <ul class="slides">
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/animals/" alt="" />
              <figcaption>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/sports/" alt="" />
              <figcaption>
                <h1>uis nostrud exercitation ullamco </h1>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/people/" alt="" />
              <figcaption>
                <h1>ncididunt ut labore et dolore magna aliqua.</h1>
                <p>abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
      </ul>
    </div>​

CSS

    .flex-control-nav, .flex-control-paging {
        clear: both;
    }

    .flexslider {
        width: 100%;
    }

    .flexslider img {
      min-width: 100%;
    }
    h1 {
        font-size: 23px;
        width: 100%;
    }
    p {
        font-size: 16px;
        width: 100%;
    }
    .slides li {display: none}

JS 

$('.flexslider').flexslider();

$(".slides h1, .slides p").fitText();  ​
4

3 に答える 3

2

これがお役に立てば幸いですhttp://jsfiddle.net/adtVP/40/

ロードマップ：

  1. fitTextプラグインに関するCSSのトリックに関する短いメモを読んでください
  2. resizeさまざまなブラウザでイベントを修正するために、PaulIrishのクロスブラウザ実装を採用しました

  3. pxここでのみ、フォントサイズをにem（または％などの他の相対値）に切り替えました。

    ...
h1 {
    font-size: .5em;
    width: 100%;
}
p {
   font-size: .2em;
   width: 100%;
}
...

    フィットテキストの呼び出し方法にビット変更を加えました

    $(".slides").fitText();

これは基本的に親レベルの要素のフォントサイズを更新しem、子のベースフォントに影響を与えます。これが全体のアイデアです。

また、Paulのスニペットコードを使用してウィンドウのサイズを変更するたびに、fitTextを呼び出します。

それだけです。大まかにコーディングしてください。クリーンアップして一瞥する必要がありますが、機能します。

UPD：fitTextのgithubソースからのコードは、mimeタイプの不一致によってIEでブロックされ、問題が発生しました。別の解決策として、正しいタイプのソースをjsファイルに含めるだけで、それが機能します。

古いIEが機能しない例はここにありますhttp://jsfiddle.net/adtVP/35/記録のためにここに残します、上記の新しいものは7バージョンまでのIEデバッグツールバーでテストされました、確かにそれは実際のものと同じではありませんブラウザですが、これまでのところとても良いです。

于 2012-12-13T23:59:42.803 に答える
0 
$('.flexslider').flexslider({
before: function(slider) {
    $(".slides h1, .slides p").css("color","#ffffff"); 

  },

after: function(slider) {
    $(".slides h1, .slides p").css("color","#000000"); 
    $(".slides h1, .slides p").fitText(); 

  }
});

 $(".slides h1, .slides p").fitText();
于 2012-12-09T19:54:17.300 に答える
0

FlexsliderのCSSは、で表示されるすべてのli要素を非表示にするため、最初に表示される最初のスライドにない限り、対象flexslider()のテキストを評価することはできません。fitText()Flexsliderの前にこれを実行してこれを回避しようとしました：

var slider = $('.flexslider'),
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'),
    text = hiddenSlide.find('.text');

hiddenSlide.show();

text.fitText();

hiddenSlide.hide();

これにより、の問題が解決しましたload。また、これを関数でラップしてイベントで呼び出すことも試みましたが、resizeこれはうまくいきませんでした。誰かが空欄を埋めることができれば、それは素晴らしいことです。

于 2013-07-17T12:09:16.807 に答える