How to make larger image active link after click on its thumbnail

I have been using jPages pagination plugin but I had a question about it. One mode they offer is gallery (http://luis-almeida.github.io/jPages/gallery.html) where you can click on the thumbnail and it will show an enlarge version of it overhead. How can I make it so that after clicking the thumbnail, the user can click the larger version of it overhead and be directed to the link that is embedded in it?

Here is the coding as show in the demo: $(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; }

Solution

You can do it using jquery onclick. when you create img element in your function you can add another attribute to it eg. linkTo="some link"

and you can create a function which would listen to click on main image 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)
));