Code
<div class="example">
<div class="ppy" id="ppy3">
<ul class="ppy-imglist">
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
<li><a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание" /></a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-prev" title="Previous image">Предыдущее</a>
<a class="ppy-switch-enlarge" title="Enlarge">Развернуть</a>
<a class="ppy-switch-compact" title="Close">Закрыть</a>
<a class="ppy-next" title="Next image">Следующее</a>
</div>
</div>
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-caption">
<span class="ppy-text"></span>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var options2 = {
caption: false,
navigation: 'permanent',
direction: 'left'
}
var options3 = {
caption: 'permanent',
opacity: 1
}
$('#ppy3').popeye(options3);
});
</script>