Question

我一直在使用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; }

Answer 1

你可以使用jquery onclick来做到这一点。当你在你的函数中创建img元素时，你可以添加另一个属性，例如。 linkTo =“some link”

你可以创建一个听取主图像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)
));

如何在单击其缩略图后制作更大的图像活动链接

1 个答案: