ЭФФЕКТ ЛУПЫ НА ИЗОБРАЖЕНИИ - ZOOMY


ЭФФЕКТ ЛУПЫ НА ИЗОБРАЖЕНИИ - ZOOMY


Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия показываемая на экране (или уменьшенный вариант), а вторая - копия оригинального изображения (увеличенный вариант). Реализовать очень просто. Указываете ссылку на Увеличенное изображение и обрамляете этим
<a />

тегом, уменьшенную копию изображения (тег
<img />
). Ну и указать класс для ссылки, чтобы плагин мог с ним работать.


Как использовать Zoomy
Нужно просто прикрутить JQuery, файл стиля "zoomy.css", и сам файл плагина Zoomy (либо jquery.zoomy0.5.min.js или jquery.zoomy0.5.js)

<link type="text/css" rel="stylesheet" href="Путь_до/zoom.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="Путь_до/jquery.zoomy0.5.min.js."></script>


Убедиться, что пути и названия zoom - оригинального (увеличенного) изображения, и display - показываемого на экране (уменьшенного), правильные.

<a href="zoom_image.jpg" class="zoom">
<img src="display_image.jpg" alt=""Это изображение отображается на экране" />
</a>

И добавить javascript - чтобы запустить zoomy:
<script type="text/javascript">
$(function(){
    $('.zoom').zoomy();                
})(jQuery)
</script>


Zoomy использует три различных CSS3 стиля. Это border-radius, gradient-fill и селекторы RGBA цвета. Эти параметры можно отключить, чтобы zoomy отображался во всех браузерах одинаково. Кроме того, на некоторых изображениях большого размера - значение зума по умолчанию 200х200 будет маловато, и нужно будет изменить его. И также отключена кликабельность изображения - иначе произойдет не увеличение, а переход по ссылке на увеличенное изображение.
Данный плагин, кстати будет успешно работать и с lightbox.

Скачать исходник:
zoomy0.5.rar


скрипт скрипт ЭФФЕКТ ЛУПЫ НА ИЗОБРАЖЕНИИ - ZOOMY
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация