Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Zoomy - красивый эффект лупы на изображении

Zoomy - красивый эффект лупы на изображении

10 янв 2014 | Комментариев: 0 | Просмотров: 2191

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.

Скачать файл Скачек: 42 | Размер: 247,96 Kb
Демо-версия


Теги: лупа, zoom

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Иконка на внешнюю ссылку

Иконка на внешнюю ссылку

Иконка для внешней ссылки - используется jQuery плагин для показа внешней ссылки.
Анимированный фон при наведении на ссылку

Анимированный фон при наведении на ссылку

Простой эффект анимированного фона при наведении курсора на ссылку
Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Красивая анимация заголовка изображения

Красивая анимация заголовка изображения

Красивый эффект анимации при наведении на картинку, у которой по верх отображается ее название.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.