Эффект наведения лупы на картинку в Ucoz

Сегодня мы создадим эффект наведения лупы на картинку. Смотрится очень оригинально, а выполняется очень легко.Пример:Эффект наведения лупы на картинку в Ucoz
Оригинальное решение?Как оно работает.1. Скачайте архив2. В файловом менеджере создайте папку для Вашего скрипта и закачайте туда все файлы, что содержатся в архиве.3. Заходим в шаблон, который будет у нас отвечать за работу скрипта, например, Каталог статей — Страница материала и комментариев к нему.4. В верхней части сайта, желательно между <head> и </head> вставляем строчку<link type=»text/css» rel=»stylesheet» href=»http://otlichnica.ucoz.ru/scripts/zoomy/zoomy0.5.css»/>где,  http://otlichnica.ucoz.ru/scripts/zoomy/zoomy0.5.css — адрес css стилей согласно пункту 2.5. Далее, после кодаCode$MESSAGE$ , либо Code$CONTENT$ в зависимости от того, в каком шаблоне Вы вносите изменения вставляем следующий код

Code
<script type=»text/javascript» src=»http://otlichnica.ucoz.ru/scripts/zoomy/jquery.zoomy0.5.min.js»></script>
  <script type=»text/javascript»>  
  //This is it
  $(function(){
  $(‘.Lupa a[title]’).removeAttr(‘title’);  
  $(‘.Lupa a’).zoomy();
  });
  </script>
Поясняю, что он делает. Он находит ссылку (a) класса Lupa и
1) удаляет аттрибут title (так как он мешается при работе скрипта). Чтобы посмотреть, что он делает , можете сначала из приведенного кода убрать $(‘.Lupa a[title]’).removeAttr(‘title’);
2) вызываем сам скрипт.
5. Теперь нам остается только воспользоваться нашими настройками. Скрипт срабатывает для следующего html-кода:
Code<div class=»Lupa»><a href=»адрес большой картинки»><img src=»адрес превью»></a></div>
Т.е. в принципе, Вы можете добавлять любые картинки на сайт в таком варианте и они будут работать.
Но нас интересует другой момент. Как Вы знаете, если сделать правильные настройки изображений в настройках модуля, то при добавлении материала, выбрав в поле Изображение, большую картинку и вставив в тело статьи код
Code$IMAGE 1$
у нас как раз выведется уже уменьшенное изображение со ссылкой на исходное. Вот html-код, который формируется в этом случае автоматически
Code
<a href=»адрес большой картинки» target=»_blank» title=»Нажмите, для просмотра в полном размере…»><img alt=»» style=»margin:0;padding:0;border:0;» src=»адрес превью» ></a>

А ведь именно это нам и надо. Нужно только добавить класс Lupa.
Поэтому при использовании картинок, для которых Вы хотите видеть лупу, надо зайти в html-код статьи и заменить
Code$IMAGE 1$
на
Code<div class=»Lupa»>$IMAGE 1$</div>
Вот и все.

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