0

私のプロジェクトの 1 つで、プレゼンテーションを表示するために Galleria から Fotorama.io に切り替えています。基本的には、プレゼンテーション ソフトウェアからエクスポートされたスライドを表示します。

Fotorama はこれまでのところ見栄えがよく、サムネイルはさまざまなスライド間を移動するための優れた方法を提供しますが、最初の画像、前、次、最後の画像に移動するための便利なボタンを備えた追加のナビゲーション/コントロール バーを追加しようとしています。プログレスバーとスライド番号を表示します。

残念ながら、現在のテーマやレイアウトを変更する方法が見つからなかったので、デフォルトのテーマを変更してプレーヤーの下部に追加のバーを追加する方法についてアイデアを提案していただければ幸いです。

必要なのは、プレーヤーの幅を 100% に維持することですが、高さを 100% にする代わりに (このプレーヤーは他のページに埋め込まれます)、コントロールを追加するには、下部 (40px としましょう) に小さな水平 div を配置する必要があります。バー。これは、追加したいコントロール バー DIV を示す例です。

ここに画像の説明を入力

生成されたソース コードを見て、fotorama__nav-wrap div の下に追加する必要があるという印象を受けました。

続行する方法はありますか？

4

1 に答える 1

1

コントロール バーを fotorama の下に置きます。

<div class="fotorama" data-auto="false">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

<div class="fotorama-control"></div>


fotorama を初期化し、後に追加.fotorama-controlし.fotorama__navます。

$('.fotorama')
  // Initialize
  .fotorama()
  .each(function () {
    // Append the .fotorama-control to the fotorama
    $('.fotorama__nav', this).after(
      $(this)
        .next('.fotorama-control')
        .show()
    );
  });


スタイルを追加:

.fotorama__nav {
  /* Lie to the fotorama about nav height to reserve space for your controls */
  /* thumbheight + thumbmargin * 2 + controlheight = 64 + 2 * 2 + 40 = 108 */
  height: 108px;
}
.fotorama__nav:after,
.fotorama__nav:before {
  /* Restore shadows height */
  /* controlheight */
  bottom: 40px;
}
.fotorama-control {
  /* controlheight */
  height: 40px;
  /* -controlheight */
  margin-top: -40px;
  position: relative;
  z-index: 10;
  display: none;
  background-color: red; /* just for debugging */
}


フィドル: http://jsfiddle.net/MkH4S/2/embedded/result,html,css,js/

于 2014-03-26T10:39:32.477 に答える