Возможно, вас заинтересует возможность разместить на странице своего сайта некий интерактивный тур - переходы по коридорам уютного своего офиса, иллюстрированный перечень строительных объектов на карте города, первое знакомство с сотрудниками вашей компании? и т.д. и т.п. - это лишь самое первое, что приходит в голову. Возможностей применения данного эффектного плагина на jQuery, как вы понимаете - очень и очень немало.

Мне, например, показалось интересным попытаться проиллюстрировать таким вот образом небольшой отрезок истории петербургского Невского проспекта; в самом центре которого - знаменитый Акимовский Театр Комедии. Вполне себе симпатичная презентация, не правда ли? - взгляните внимательно, присутствует и второй уровень вложенности изображений. Ах, jQuery, всемогущий jQuery...

jQuery — очень удобная в использовании библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.

А использование Image Zoom Tour крайне несложно; сам плагин можно совершенно свободно загрузить отсюда; файлы и папки распакованного архива кидаем куда-либо в public_html, создав для всего этого добра отдельную директорию (в целях пресечения перманентно возникающего беспорядка в публичной папке)... ваш размещенный на страничке HTML-код может выглядеть примерно так:

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<noscript>
<link rel="stylesheet" type="text/css" href="/css/styleNoJS.css" />
</noscript>
<div id="zt-container" class="zt-container">
<div class="zt-item" data-id="zt-item-1">
<img class="zt-current" src="/images/image1.jpg" />
<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="14" data-speed="950" data-delay="150" style="top:169px;left:195px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="850" data-delay="20" style="width:150px;height:111px;top:241px;left:135px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="9" data-speed="800" data-delay="70" style="top:227px;left:396px;"></div>
<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="12" data-speed="800" data-delay="150" style="top:183px;left:530px;"></div>
</div>
<div class="zt-item" data-id="zt-item-2">
<img class="zt-current" src="/images/image1_1.jpg" />
<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="6" data-speed="950" data-delay="150" style="top:68px;left:9px;"></div>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="14" data-speed="750" data-delay="80"></div>
</div>
<div class="zt-item" data-id="zt-item-3">
<img class="zt-current" src="/images/image1_2.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="550" data-delay="20"></div>
</div>
<div class="zt-item" data-id="zt-item-4">
<img class="zt-current" src="/images/image1_3.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="9" data-speed="700" data-delay="70"></div>
</div>
<div class="zt-item" data-id="zt-item-5">
<img class="zt-current" src="/images/image1_4.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="12" data-speed="700" data-delay="10"></div>
</div>
<div class="zt-item" data-id="zt-item-6">
<img class="zt-current" src="/images/image1_5.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="12" data-speed="700" data-delay="20"></div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.zoomtour.js"></script>
<script type="text/javascript">
$(function() {
$('#zt-container').zoomtour({
zoominEasing : 'easeOutBack'
});
});
</script>

Атрибуты данных (data attributes):

data-dir  //is either 1 or -1 depending on whether we want to “zoom in” (1) or “zoom back out” (-1)
data-link  //will indicate to which item we connect the tag to (based on the data-id we give to each item)
data-zoom  // is the factor of zooming. Set very low, the image we zoom into or zoom back to will only enlarge slightly. 
data-speed  // the animation speed in milliseconds
data-delay   //the delay time for the new image to appear

Вы без проблем сможете добавить новые div-ы, если необходимо большее их число (попросту скопировав и чуть подредактировав, например, уже имеющиеся), либо изменить расположение линков на основном изображении, отредактировав стили дивов (top, left); это несложно сделать даже "методом тыка":

<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="14" data-speed="950" data-delay="150" style="top:169px;left:195px;"></div>

Несложно ведь, правда? - совершенно несложно.

Слева на этой страничке вы можете видеть небольшую, субъективно и тщательно подобранную коллекцию плагинов, использующих в своей основе jQuery. Не поленитесь, пролистайте; наверняка что-то понравится, и что-то - отберете для своего блога. Движок сайта - Joomla, WordPress, Drupal или Prestashop - значения в данном случае не имеет. Да, эти плагины не написаны именно под вашу cms, вследствие чего вам придется, возможно, слегка повозиться с установкой. Но, кажется, результат стоит того, не правда ли?

Кстати. Чем jQuery - не замена, например, уже де-факто почившему в бозе флешу? Возможности этой библиотеки, кажется, почти безграничны; можно ведь и вот так, взгляните...