3

ページに特定の画像を表示するために、bootstrap-lightboxを使用しています。

<a href="#lightbox" class="thumbnail">
  <img src="/img/img1_thumb.png" />
</a>
<a href="#lightbox" class="thumbnail">
  <img src="/img/img2_thumb.png" />
</a>

<div id="lightbox" ...>
  <div class='lightbox-header'>
    <button type="button" class="close" ...>&times;</button>
  </div>
  <div class='lightbox-content'>
    <img src="/img/img1.png" />
  </div>
</div>

クリックされたサムネイルのフルバージョンを表示するだけです。

モーダルを開く前にslightboxを更新する方法はありますか?lightbox-contentimg

または、次のようなものを追加する必要があります。

$('.thumbnail').click(function () {
    $('#lightbox .lightbox-content img')
        .attr('src', $(this).attr('data-imagefull'));
});

?

アップデート

完全なイメージ パスを自動的に生成しようとしているわけではありません。
この完全なイメージ パスを指定する場所がわかりません。

4

3 に答える 3

2

最も簡単な方法は、プラグインのソースを確認することです。そのための独自の定義があるようです: https://github.com/jbutz/bootstrap-lightbox/blob/master/js/bootstrap-lightbox.js#L318

'data-image'プロパティを使用して、ライトボックスの内容を更新することができます。おそらく最も簡単な方法は、ライトボックス ID を持つすべての画像を取得する小さなスクリプトを作成し、data-image プロパティをファイル名に「_thumb」を含まないものに設定することです (例: 正規表現経由)。

于 2013-01-03T15:11:39.050 に答える
2

デモ :- http://ashleydw.github.io/lightbox/ ここでソリューションを見つけることができます。

于 2014-03-10T04:02:17.473 に答える
0

.Net を使用している場合は、PageMethod を実行できます。

js:

$('.thumbnail').click(function () {

     PageMethods.loadimg(function (answer) {

        var images= answer.split('|');

        $('.lightbox-content').html(answer[0]);
        $('.lightbox-content').html(answer[1]);
        $('.lightbox-content').html(answer[...]);    

    }, Error);
});

cs:

[WebMethod]
public static string loadimg()
   {
   string images= "<img src="/img/img1_thumb.png" />|<img src="/img/img2_thumb.png" />|<img src="/img/img..._thumb.png" />";
   return images;
   }
于 2013-01-03T15:16:15.617 に答える