3

我无法显示单击以查看的特定图像的模式。

如果我使用带有类的链接，它将以单独的模式显示该专辑中的所有图像（必须将它们全部关闭）。我想为我单击“查看”的图像显示适当的模式，以便它是对应的。

如果我将此设置为 id 并在顶部 div 中创建一个 id，它将仅显示相册中的第一张图片，无论我点击什么图片。

我怎么能解决这个问题？

<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div class="modal hide fade"  tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="myModalLabel">Pansnap</h3>

</div>
<div class="modal-body">

<!--This is for the 360 viewer-->

<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.',     $image["ext"],'"/>'?>

<!--360 viewer end-->

  </div>
  <div class="modal-footer">
 <?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"],     '.', $image["ext"],'">Download</a>'?>

  </div>
</div>
4

1 回答 1

0

解决此问题的一种方法是将各种唯一数据组件存储在每个链接上，然后使用通用处理程序将这些数据加载到单个模式的相关元素中。

例如，类似于以下内容：

HTML

<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i>     View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade"  tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3 id="myModalLabel">Pansnap</h3>
  </div>
  <div class="modal-body">
    <img id="snap"/>
  </div>
  <div class="modal-footer">
      <a id="download" class="btn btn-link">Download</a>
  </div>
</div>

您可以通过 PHP 将每个图像的数据加载到数据属性中。

JS

$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
  $('#snap').attr('src',$(this).data('image'))
  $('#download').attr('href', $(this).data('download'))  
})

这将在模态元素中加载适当的数据。

JSFiddle

于 2013-03-23T16:35:25.783 回答