2

次のようにブロック グリッドで Foundation 4 の Clearing Lightbox を使用しようとしています。

<div class="row">
    <div class="large-3 columns">
    ...
    </div>
    <div class="large-9 columns">
        <ul class="small-block-grid-2 large-block-grid-3 clearing-thumbs" data-clearing>
            <li><a href="image1.jpg"><img src="image1_lg.jpg" /></a></li>
            <li><a href="image2.jpg"><img src="image2_lg.jpg" /></a></li>
            <li><a href="image3.jpg"><img src="image3_lg.jpg" /></a></li>
            <li><a href="image4.jpg"><img src="image4_lg.jpg" /></a></li>
            <li><a href="image5.jpg"><img src="image5_lg.jpg" /></a></li>
            <li><a href="image6.jpg"><img src="image6_lg.jpg" /></a></li>
            <li><a href="image7.JPG"><img src="image7_lg.jpg" /></a></li>
            <li><a href="image8.JPG"><img src="image8_lg.jpg" /></a></li>
            <li><a href="image9.JPG"><img src="image9_lg.jpg" /></a></li>
        </ul>
    </div>
</div>

私のラップトップ画面のレイアウトでは、画像が 3 列のグリッドで表示されます。これは、私が望むものです (モバイルをシミュレートするためにウィンドウをさらに狭くすると、2 列のグリッドになります)。画像をクリックすると Clearing Lightbox が読み込まれますが、「サムネイル」画像はまだライトボックス画面の下部にあるブロック グリッドにあります。そのため、完全なサムネイル画像が 3 つしか表示されておらず、その下に 2 行目のサムネイルが部分的に表示されています。( Google Chrome のスクリーンショットはこちら)。

サムネイル画像を修正して、1) すべてが一列に表示されるか、2) アクティブな画像だけが表示されるか、3) 大きな画像の下にサムネイルが表示されないようにするにはどうすればよいですか?

私はFoundationにかなり慣れていないので、あなたが提供できる助けに感謝します!

4

5 に答える 5

2

この問題はhttps://github.com/zurb/foundation/issues/2696で報告されました。5.1 で修正されたと主張されていますが、私はまだ問題に遭遇しました。

この問題を解決するために、Michael Fillier の提案を使用しました。

/***** Fix Block Grid and Clearing Compatibility *****/
[class*="block-grid-"] li {
    margin-right:0!important;
}
.clearing-blackout li {
    clear:inherit!important;
}

最初の行は、クリアによって li に追加されたマージンを削除します。2 行目は、ライトボックス ビューの親指のクリアを削除します。

于 2014-02-12T20:24:54.323 に答える
1

Foundation Support に連絡したところ、サムネイルを完全に非表示にするために、これをスタイルシートに追加するよう提案されました。

.clearing-blackout ul {display:none !important;}

次に、ドキュメントに示されているように、デフォルトの Clearing ライトボックス構文に戻りました。

<ul class="small-block-grid-2 large-block-grid-3" data-clearing>
    <li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
    <li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
    <li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
    <li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
    <li><a href="{portfolio_image_large}"><img src="{portfolio_image_small}" data-caption="{portfolio_image_caption}" /></a></li>
</ul>

これで、ブロック グリッドの小さな画像の 1 つをクリックすると、Clearing ライトボックスに正しい大きな画像が表示されます。カルーセルは表示されませんでしたが、カルーセルのスペースはまだ追い越されていたので、次のコードを追加して、大きな画像が画面全体を占めるようにしました。

@media only screen and (min-width: 48em) {
.clearing-assembled .clearing-container .visible-img {
    height: 95%;
    }
}

これが他の誰かに役立つことを願っています。Foundation Support の Mark と、私を途中まで連れて行ってくれた他のポスターに感謝します。

于 2013-08-29T16:36:20.527 に答える
0

Foundation は、プレゼンテーション クラスだけですぐに使用できるわけではありませんが、クリア ギャラリーを非表示にし、javascript/jquery を少し追加することで、同じ効果を生み出すことができます。

この場合、カスタム クラスを使用して、シンプルな画像とアンカー タグを使用してブロック グリッドを作成します。img-spawn-gallery

次に、クリアリング ギャラリーを作成しますが、hideプレゼンテーション クラスを使用して表示されないようにします。

<div class="row">
    <div class="large-3 columns">
      <p>Some other content here</p>
    </div>
    <div class="large-9 columns">
        <ul class="small-block-grid-2 large-block-grid-3">
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a class="img-spawn-gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
        </ul>

      <ul id="my-gallery" class="clearing-thumbs hide" data-clearing>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
            <li><a href="http://www.placehold.it/900x900?text=gallery"><img src="http://www.placehold.it/300x300&text=thumb" /></a></li>
        </ul>
    </div>
</div>

次に、Zepto または jQuery を使用した JavaScript で、アンカー タグの動作をオーバーライドして、隠しクリアリング ギャラリーの最初の画像をクリックするようにします。サムネイルのみが非表示になっているため、残りは適切に機能します。

$(document).ready(function() {
  $(".img-spawn-gallery").click(function() {
    $("#my-gallery li a :first").trigger('click');
  });
});

UPDATE 10/16/13: これは編集として提供されましたが、おそらくコメントとして追加する必要があります。この問題に直面している方に役立つかもしれないので、ここに追加します。匿名の投稿者、コメントでクレジットを受け取ってください。

クリックした画像にジャンプする機能を追加するには、Javascript を次のように編集します。

 $(".img-spawn-gallery").click(function() 
  {
    index = $(this).parents("li").index();
    $("#my-gallery li a :eq("+index+")").trigger('click');
  });
于 2013-07-25T23:02:21.770 に答える