Twitter引导模式的图像

Question

我有一个页面，其中包括注册用户的详细信息。 每个html表格都包含80-90个用户。 对于每个用户都有一个$ username变量。 我通常会在下面的代码中显示他们的图片。

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

但是用户可以在新选项卡中打开图像。我想很容易地展示大型头像。 我的第一个选择是lightbox-jquery。但是因为我在我的网站中使用了twitter-bootstrap，我决定使用默认引导程序和jQuery特性。

我看到有“bootstrap-modals”。当用户点击链接时，我不打算展示比我大的图片。

我尝试这样做：

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> 

我想，把$('#username').modal();
为每一位用户到我的网页将会使HTML文件巨大。

但后来我试过类似这样的锚点名称：$('.img-modal').modal();
但这没有奏效。

你会在这种情况下推荐什么？

Answer 1

我建议你在你的<a>标签中使用HTML5 Custom Data Attributes来标识用户名并保留你的img-modal类。

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

触发调用上点击模态上.IMG模态（你不需要的数据切换=“莫代尔”）

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

您可以通过获取用户名的值使用

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

既然你的用户名，您可以用类似替换你的独特模式的<img>标签的src财产。

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

，并打开模式

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

最后，确保引导，modal.js或boostrap.js是包括在内。