画像のTwitterブートストラップモード

Question

登録ユーザーの詳細を含むページがあります。 すべてのhtmlテーブルには80〜90人のユーザーが含まれています。 すべてのユーザーに$ username変数があります。 私は通常以下のコードのようなテーブルに写真を表示します。

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> 
<img src=\"big-avatar-$username.jpg\"> 
</a>"; 

しかし、ユーザーは新しいタブで画像を開くことができます。私は大きなアバターを簡単に見せたい。 私の最初の選択はライトボックスjqueryでした。しかし、私はtwitter-bootstrapを私のサイトに使っているので、私はデフォルトのブートストラップとjqueryの機能を使うことに決めました。

「ブートストラップモーダル」があることがわかりました。ユーザーがリンクをクリックすると、私は大きな写真以上の何も表示するつもりはありません。

私はこれを試してみました：

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > 
     <img src=\"small-avatar-$username.jpg\" ></a>"; 
print '</td>'; 

。

print "<div id=\"$username\" class=\"modal\">"; 
     <img src=\"big-avatar-$username.jpg\"> 
print "</div>"; 

。

<script type="text/javascript" id="js"> 
     $('#username').modal(); 
</script> 

私はHTMLファイルが巨大になります私のページへのすべてのユーザーのために$('#username').modal();
を置くこととします。

しかし、私はこのようにアンカーのクラス名を試しました：$('.img-modal').modal();
しかし、これは動作しませんでした。

あなたはこの状況で何をお勧めしますか？

Answer 1

<a>タグにHTML5 Custom Data Attributesを使用して、ユーザー名を特定し、img-modalクラスを維持することをおすすめします。

"<a href="#myModal" data-username='".$username."' class="img-modal">... 

トリガー

$('.img-modal').click(function(event) { 

あなたはで、ユーザー名の値を取得することができます（あなたが「モーダル」=データトグルを必要としない）.imgの峰の上クリックでモーダル呼び出しあなたはユーザ名を持っているので

var username = $(this).attr('data-username') 

を使用して、あなたのようなもので、あなたのユニークなモーダルであなたの<img>タグのsrcプロパティを置き換えることができます。

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

とオープンあなたのモーダル

$('#myModal').modal('show') 

そして最後に、必ずブートストラップ・modal.jsまたはboostrap.jsが含まれています。