<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
$('#tj_container').gridnav({
type: {
mode:'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed:500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing:'', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows  
factor:'', // for seqfade, sequpdown, rows
reverse:'' // for sequpdown
}
});
});
</script>

.tj_container {
width:800px;
height:400px;
position:relative;
margin:30px auto;
}
.tj_nav {
position:absolute;
right:-80px;
top:50%;
margin-top:-35px;
height:70px;
width:39px;
}
.tj_nav span {
width:39px;
height:25px;
background:transparent url(/images/prev.png) no-repeat top left;
position:absolute;
top:0px;
left:0px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-transition: all 0.2s ease-in-out;*/
}
.tj_nav span.tj_next {
background-image:url(/images/next.png);
top:auto;
bottom:0px;
left:0px;
}
.tj_nav span:hover {
opacity:1.0;
}
.tj_wrapper {
width:100%;
height:100%;
position:relative;
margin:0px auto;
}
.tj_wrapper ul li {
float:left;
list-style:none;
}
.tj_wrapper ul li a {
outline:none;
display:block;
margin:5px;
background:transparent url(/images/bg_thumb.jpg) no-repeat center center;
}
.tj_wrapper ul li a img {
display:block;
border:none;
opacity:0.7;
-moz-box-shadow:2px 2px 4px #8e8e8e;
-webkit-box-shadow:2px 2px 4px #8e8e8e;
box-shadow:2px 2px 4px #8e8e8e;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-transition: all 0.2s ease-in-out;*/
}
.tj_wrapper ul li a img:hover {
opacity:1.0;
}
/* Specific style for the examples */
.example10 .tj_container {
height:600px;
}

<div id="tj_container" class="tj_container">  
  <div class="tj_nav">  
  <span id="tj_prev" class="tj_prev">Previous</span>  
  <span id="tj_next" class="tj_next">Next</span>  
  </div>  
  <div class="tj_wrapper">  
  <ul class="tj_gallery">  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  </ul>  
  </div>  
  </div>