Детальное увеличение картинки или фото

Изображение в виде картинки или фотографии можно будет увеличить для детального просмотра, увеличение может происходить как внутри, так и в отдельно открывающемся окне. В эффекте увеличения применяется плагинjqzoom.js работающий при подключенной библиотеке  jQuery которая по умолчанию подключена на сайтах системы uCoz. Всё полностью настроено, а лишнее удалено чтобы не нагружать и и без того загруженные головы. Сами элементы разложены на 2 способа подключения в первом останется заменить картинки, а во втором Вы сможете сами настроить элемент, по умолчанию он так же настроен но имеет регулировки для индивидуального подгона под существующие обстоятельства.
Эффект детального увеличения

Для правильной работы Вам понадобится иметь 2 изображения, первое изображение может быть большим до разумных пределов, оно будет показывать детальный вид картинки или фото. Вторая картинка, это уменьшенная версия первой картинки, на сколько Вы её уменьшите, в таком виде она и будет показана. То есть чтобы изменить размер изображения до детального увеличения, нужно уменьшить размер самого изображения. В примере маленьким изображением является фотография (miska-m.jpg).
ВНИМАНИЕ!!!
Код для установки оснащён скриптом библиотекой jQuery для проверки его работоспособности в редакторе HTML, скрипт выделен в примере красным цветом, при установке эффекта на свой сайт (если он на uCoz) удалите скрипт, у Вас уже должна быть подключена библиотека.

<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script> <style> .zoomPad{ position:relative; float:left; z-index:99; cursor:crosshair; } .zoomWrapperTitle{ display:block; background:#777; /* - цвет фона названия вверху - */ color:#FFF; /* - цвет букв названия вверху - */ height:18px; line-height:18px; width:100%; overflow:hidden; text-align:center; font-size:10px; position:absolute; top:0px; left:0px; z-index:120; opacity: 0.6; filter: alpha(opacity = 60); } .zoomWrapperImage{ display:block; position:relative; overflow:hidden; z-index:110; } </style> <script type="text/javascript" src="//delaisait.ucoz.ru/script/effect/2014/js/jqzoom.pack.1.0.1.js"></script> <a href="//delaisait.ucoz.ru/script/effect/2014/img/miska.jpg" id="zoom" title="Моя фотография на даче"> <img src="//delaisait.ucoz.ru/script/effect/2014/img/miska-m.jpg" alt="zoom-images"></a> <script> jQuery(document).ready(function(){ jQuery('a#zoom').jqzoom({ zoomType: 'innerzoom' }); }); </script>



источник