0

我一直在使用 jPages 分页插件，但我对此有疑问。他们提供的一种模式是画廊（http://luis-almeida.github.io/jPages/gallery.html），您可以在其中单击缩略图，它会在上方显示放大版。我怎样才能做到这一点，以便在单击缩略图后，用户可以单击其开销的较大版本并被定向到嵌入其中的链接？

这是演示中显示的编码： $(function() {

/* initiate plugin */
$("div.holder").jPages({
  containerID : "thumbs",
  perPage     : 5,
  previous    : ".prev",
  next        : ".next",
  links       : "blank",
  direction   : "auto",
  animation   : "fadeInUp"
});

$("ul#thumbs li").click(function(){
  $(this).addClass("selected")
  .siblings()
  .removeClass("selected");

  var img = $(this).children().clone().addClass("animated fadeInDown");
  $("div#img").html( img );

});



<div id="img" class="animated"><img src="img/gallery/1.jpg"></div>


<ul id="thumbs" class="clearfix">
<li class="selected"><img src="img/gallery/1.jpg" alt="image"></li><li><img src="img/gallery/2.jpg" alt="image"></li><li><img src="img/gallery/3.jpg" alt="image"></li><li><img src="img/gallery/4.jpg" alt="image"></li><li><img src="img/gallery/5.jpg" alt="image"></li><li><img src="img/gallery/6.jpg" alt="image"></li><li><img src="img/gallery/7.jpg" alt="image"></li><li><img src="img/gallery/8.jpg" alt="image"></li><li><img src="img/gallery/9.jpg" alt="image"></li><li><img src="img/gallery/10.jpg" alt="image"></li><li><img src="img/gallery/11.jpg" alt="image"></li><li><img src="img/gallery/12.jpg" alt="image"></li><li><img src="img/gallery/13.jpg" alt="image"></li><li><img src="img/gallery/14.jpg" alt="image"></li>
    </ul>

    <!-- navigation holder -->
    <div class="holder"></div>

    <!-- custom buttons -->
    <div id="btns">
        <span class="prev"></span>
        <span class="next"></span>
    </div>


ul#thumbs { list-style: none; margin: 0px; padding:0px; margin-top: 10px; }
ul#thumbs li { float: left; margin-right: 10px; cursor:pointer; }
ul#thumbs li img { height: 75px; vertical-align: top; }
ul#thumbs li.selected { outline: 3px solid #FF4242; }

div#img img { width: 600px; height: 400px; }

div#btns{ position:relative; width: 600px; }
.prev, .next { width:29px; height:29px; position: absolute; top: -95px; cursor: pointer; }
.prev { background-image: url('img/back.gif'); left: -40px; }
.next { background-image: url('img/next.gif'); right: -40px; }

.jp-disabled{ display:none; }
4

1 回答 1

0

您可以使用 jquery onclick 来完成。当您在函数中创建 img 元素时，您可以为其添加另一个属性，例如。linkTo="一些链接"

你可以创建一个函数来监听点击主图像 div

$("div#img").on("click",'img', function()(
var linkValue = $(this).attr('linkTo');
     //do whatever you want with the link(open a popup or a new tab or change currentpage)
));
于 2013-06-02T18:49:58.863 回答