Карусель картинок вместе с эффектом zoom

Карусель картинок и увеличение при наведении мышкой - если в двух словах. В этом примере использованы два других плагина для jQuery это сама карусель сделанная с помощью Fancybox и плагин для увеличения Cloud-zoom

Карусель картинок вместе с эффектом zoom

Структура html кода не считая JavaScript 'а

<div class="item">
<div class="thumb_wrapper">
<div class="thumb">
<ul>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack1.jpg"><img src="images/thumbs/formstack1.jpg" alt="Formstack 1"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg" alt="Formstack 2"/></a></li>
<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg" alt="Formstack 3"/></a></li>
</ul>
</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
<span>Hover to zoom, click to view</span>
</div>
<div class="description">
<h2>Formstack</h2>
<p>Quickly create any type of web form with our easy to use drag and drop form builder.
Seamlessly create HTML forms and embed them on your website or use style templates
to match your color, logo and overall look and feel.</p>
</div>
</div>
<div class="item">
<div class="thumb_wrapper">
<div class="thumb">
<ul>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/knowapp1.jpg"><img src="images/thumbs/knowapp1.jpg" alt="Knowapp 1"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/knowapp2.jpg"><img src="images/thumbs/knowapp2.jpg" alt="Knowapp 2"/></a></li>
<li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/knowapp3.jpg"><img src="images/thumbs/knowapp3.jpg" alt="Knowapp 3"/></a></li>
</ul>
</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
<span>Hover to zoom, click to view</span>
</div>
<div class="description">
<h2>Know!</h2>
<p>Track and share status of just about anything. Know! simplifies the time-consuming
task of relaying the state of projects by consolidating information into
easy-to-follow dashboards.</p>
</div>
</div>