在选定页面中打开的图库图像

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 示例准确地展示了您正在寻找的内容。