Главная » 2013 » Июнь » 12 » "WeZoom" v.1.0 (Скрипты для ucoz)
12.06.2013, 17:59

"WeZoom" v.1.0




WeZoom - новейший плагин для увеличения картинок, отличается от своих аналогов отсутствием JS-кода, плагин написан исключительно на CSS3. Доступно две версии увеличения:

1. Увеличение картинки - при наведении курсором на нее; Уменьшение картинки - при отведении курсора от картинки;
2. Увеличение картинки - при клике и удержании нажатой любой кнопки мыши на ней; Уменьшение картинки - при отпускании любой кнопки мыши;

Установка:
1) ПУ -> Управление дизайном -> Таблица стилей (CSS) -> Вставляем стили:
Код
.web41k_img {max-width:300px; transition:all 0,1s ease;-webkit-transition:all 0,1s ease;-moz-transition:all 0,1s ease;-o-transition:all 0,1s ease; -ms-transition:all 0,1s ease;}
#click_img:active {background:#fff; border:2px solid #555; border-radius: 3px; -moz-transform: matrix(2, 0, 0, 2, 0, 0); -webkit-transform: matrix(2, 0, 0, 2, 0, 0); -o-transform: matrix(2, 0, 0, 2, 0, 0); -ms-transform: matrix(2, 0, 0, 2, 0, 0);}
#hover_img:hover {background:#fff; border:2px solid #555; border-radius: 3px; -moz-transform: matrix(2, 0, 0, 2, 0, 0); -webkit-transform: matrix(2, 0, 0, 2, 0, 0); -o-transform: matrix(2, 0, 0, 2, 0, 0); -ms-transform: matrix(2, 0, 0, 2, 0, 0);}

2) Теперь в нужное место вставляем нужное нам изображение:
Код

<img src="ССЫЛКА_НА_ИЗОБРАЖЕНИЕ" class="web41k_img" id="hover_img">

Установка завершена!

Настройка скрипта
В первом коде меняем:
Код

.web41k_img {max-width:300px; transition:all 0,1s ease;-webkit-transition:all 0,1s ease;-moz-transition:all 0,1s ease;-o-transition:all 0,1s ease; -ms-transition:all 0,1s ease;}
#click_img:active {background:#fff; border:2px solid #555; border-radius: 3px; -moz-transform: matrix(2, 0, 0, 2, 0, 0); -webkit-transform: matrix(2, 0, 0, 2, 0, 0); -o-transform: matrix(2, 0, 0, 2, 0, 0); -ms-transform: matrix(2, 0, 0, 2, 0, 0);}
#hover_img:hover {background:#fff; border:2px solid #555; border-radius: 3px; -moz-transform: matrix(2, 0, 0, 2, 0, 0); -webkit-transform: matrix(2, 0, 0, 2, 0, 0); -o-transform: matrix(2, 0, 0, 2, 0, 0); -ms-transform: matrix(2, 0, 0, 2, 0, 0);}

(2, 0, 0, 2, 0, 0) - первое число "2" отвечает за увеличение изображения в ширину, т.е. в ширину на данный момент увеличенное изображение будет в 2 раза больше оригинала. Второе число "2" отвечает за увеличение изображения в высоту, т.е. в высоту на данный момент увеличенное изображение будет в 2 раза больше оригинала. Внимание: рекомендую устанавливать одинаковые значения ширины и высоты, в противном случае изображение может "растянуться" и потерять качество.
max-width:300px - отвечает за ширину оригинала изображения.
2) Во втором коде меняем:
Код

img src="ССЫЛКА_НА_ИЗОБРАЖЕНИЕ" class="web41k_img" id="hover_img"

hover_img - если вы хотите увеличение изображения при наведении
click_img - если вы хотите увеличение изображения при клике и удержании кнопки мыши
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://web41k.ru
Категория: Скрипты uCoz | Просмотров: 1637 | Добавил: sold93 | Рейтинг: 5.0/2 |
Теги: WeZoom, v.1.0
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]