Увеличение изображения по клику в ucoz

Увеличение изображения по клику в ucoz А форуме меня спросили,как реализовать на ucoz увеличение по клику , используя стандартные средства Ucoz. Так, например, в фотоальбоме принажатии на фото всплывает окошко lightbox с увеличенной картинкой. Во всех других модулях это не реализовано. Так давайте реализуем. Сначала посмотрим, что мы имеем. 
Мы имеем уже установленную библиотеку jQuery и код $IMAGE$, который выводит уменьшенное изображение с ссылкой на увеличенное,которое открывается в новом окне. Его код выглядит следующим образом. 
<a href=»Адрес большой картинки» target=»_blank» title=»Нажмите, для просмотра в полном размере…»><img alt=»» style=»margin:0;padding:0;border:0;» src=»адрес превью» align=»» /></a>
Набрав в поиске lightbox, я попала на этот сайт, который как раз и удовлетворил нашим требованиям. Скачать архив можно прямо оттуда, но лучше сделайте это прямо здесь,так как я оставила только нужное и поправила адрес к служебным картинкам. 
Скачать

Итак, все,что вам нужно сделать — это скопировать из архива в корневую папку вашего сайта исходные файлы.В архиве 3 папки css, js и images — если у вас уже есть на сайте эти папки, то просто добавьте в них соответствующие файлы.  Если таковых папок не имеется, то нужно их создать. 
А теперь, внимание, помимо того, что вы скопировали скрипты, которые вы будете использовать, нужно прописать и их вызов. Если Вы хотите, чтобы эта функция работала только на определенных страницах Вашего сайта, то код вызова надо прописать в соответствующем шаблоне, если же на всем сайте, то можно использовать глобальный блок, например Нижняя часть сайта. А вызов состоит всего из нескольких строк
<script type=»text/javascript» src=»/js/jquery.lightbox-0.5.js»></script>
 <link rel=»stylesheet» type=»text/css» href=»/css/jquery.lightbox-0.5.css»  media=»screen» /> <script type=»text/javascript»>
$(function() {
$(‘a[href$=jpg]’).lightBox();//lightbox сработает,                             //если адрес в ссылке на файл с расширением jpg
$(‘a[href$=jpeg]’).lightBox();//lightbox сработает,                             // если адрес в ссылке на файл с расширением jpeg
$(‘a[href$=png]’).lightBox();//lightbox сработает,                             // если адрес в ссылке на файл с расширением png
}); </script>
Как видно из кода, Вы можете использовать не только встроенную функцию $IMAGE$ для показа увеличенного изображения, но и в любом другом месте. Достаточно того, что бы Ваш код имел вид
<a href=»Адрес большой картинки»><img src=»адрес превью» /></a>Причем, Вы можете использовать любые параметры внутри (ширина, высота , выравнивание)- это не отразится на возможности открытия увеличенного изображения.

Пример работы lightbox можно посмотреть щелкнув на картинке в начале статьи

Комментарии на Facebook