Question

我有一个缩略图库，我想在预览页面中用反向链接打开每个大图像。请建议我怎么做。

html

<ul>
    <li>
        <a href="big image link"><img src="thumb nail image"/></a>
    </li>
    <li>
        <a href="big image link"><img src="thumb nail image"/></a>
    </li>
    ....
</ul>

想要在预览页面中打开大图像 html

<div>
    <a href="back">Go back</a>
    <img src="holder for big image" />
</div>

请建议..

Answer 1

如果你想使用jquery，这将让你入门：

HTML：

<div id="holder"></div>
<ul><li><img class="pointer" src="http://bit.ly/Yx18em"/></li></ul>

的CSS：

#holder{
    position: absolute;
    display: none;
}

li{
    list-style: none;
}

li img{
    width:25px;
    height: auto;
}

.pointer{
    cursor: pointer;
    cursor: hand;
}

jquery的：

$("ul img").click(function() {
  $('#holder').html(
      '<img src="'+$(this).attr('src') 
      +'"><span id="close" class="pointer">back</span>'
  ).show();
  $("#close").click(function() {
      $(this).parent().hide();
  });  
});

工作示例：http://jsfiddle.net/qLEZ6/2/

Answer 2

如何使用插件 Photoswipe

this示例演示了您正在寻找的内容。

要在所选页面中打开的图库图像

2 个答案: