0

このデモから、私のウェブサイトでシンプルな画像ギャラリーの HTML コードを使用しています: http://fancyapps.com/fancybox/demo/各サムネイルの下に、画像のタイトルとは異なるテキストを簡単に追加する方法はありますか (サムネイルをクリックすると表示されます）？

どうもありがとうございました。

編集: ご協力ありがとうございます。とにかく、私の友人はそれを解決しました。次のように、画像リンクと説明の両方を 1 つの親要素に並べて含める必要があります。

<div>
    <a ... ><img src="image link" alt="First picture" /></a>
    <p>Description</p>
</div>

次に、div の幅が画像サムネイルの幅に設定され、説明がサムネイルの下に「ドロップ」されます。

4

2 に答える 2

1

インラインオプションを使用してみましたか? それはあなたが望むものと非常に似ているからです。

リンクボタン

<a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>

インライン HTML

<div id="inline1" style="width:400px;display: none;">
  <p>Your Main image could be here</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque.</p>
</div>
于 2013-11-08T10:10:12.103 に答える
0

タグ内でテキストをラップし、<p>CSS を追加してレイアウトを修正できます。

<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
    <img src="1_s.jpg" alt="">
    <p>some text</p>
</a>

CSS:

.fancybox {
    display: inline-block;
    vertical-align: top;
}
.fancybox img {
    display: block;
}
于 2013-11-08T09:45:08.473 に答える