Плагин "WeZoom" v.1.0
WeZoom - новейший плагин для увеличения картинок, отличается от своих аналогов отсутствием JS-кода, плагин написан исключительно на CSS3. Доступно две версии увеличения:
- Увеличение картинки - при наведении курсором на нее; Уменьшение картинки - при отведении курсора от картинки;
- Увеличение картинки - при клике и удержании нажатой любой кнопки мыши на ней; Уменьшение картинки - при отпускании любой кнопки мыши;
1) ПУ -> Управление дизайном -> Таблица стилей (CSS) -> Вставляем стили:
2) Теперь в нужное место вставляем нужное нам изображение:
Установка завершена!
(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 - если вы хотите увеличение изображения при клике и удержании кнопки мыши
Code
.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);}
#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) Теперь в нужное место вставляем нужное нам изображение:
Code
<img src="ССЫЛКА_НА_ИЗОБРАЖЕНИЕ" class="web41k_img" id="hover_img">
Установка завершена!
Настройка скрипта
В первом коде меняем: Quote
.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);}
#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) Во втором коде меняем:
Quote
hover_img - если вы хотите увеличение изображения при наведении
click_img - если вы хотите увеличение изображения при клике и удержании кнопки мыши
Мне нравится 3
Просмотры: 1164 · Комментарии: 4 · Добавил: Kelin · Категория: Рецепты HTML и CSS
Я сам, готов поспорить, некоторых свойств не знаю.