Всем привет, сегодня я решил предоставить небольшой вариант скрипта, благодаря которому можно провести парочку манипуляций с вашими изображениями на сайте, я думаю многие читатели блога не раз видели на том или ином сайте, некоторые манипуляции с изображением, к примеру при наведении стрелкой мыши на картинку, она меняла свой вид, из чёрного белого или размытого, превращалось в обычное цветное, если вы не понимаете о чём идёт речь, смотрим демо...
Шаг 1 - Установим JS:
Напоминаю, что в систему uCoz уже вшита библиотека jQuery, поэтому нам стоит лишь прописать в конце страницы перед тегом </body> два скрипта, отвечающие за манипуляцию вашего изображения:
JS
Code
<script type="text/javascript" src="http://www.center-dm.ru/data/demo/img/hoverizr/jquery.hoverizr.js"></script><script type="text/javascript">
$(window).load(function() {
$('.ex1').hoverizr({speedOut: 'slow'});
$('.ex2').hoverizr({speedOut: 'slow',effect:"blur",overlay: "bottom",container: "pipa",stretch: "no"});
$('.ex4').hoverizr({effect:'blur',speedOut:'slow'});
$('.ex3').hoverizr({speedIn: 'slow',effect:"invert"});
});
</script>
Обратите внимания, что во втором скрипте указанны классы .ex1 .ex2 .ex3 и .ex4 которые отвечают за один из четырёх видов отображения вашей картинки на сайте.
Шаг 2 - Установим HTML:
Теперь нам осталось прописать один из выше предоставленных классов, в ваше изображение:
HTML
Code
<img class="ex2" src="ссылка на изображение" alt="описание изображения" />
всё решение готово...
Примечание:
Но, что делать если к примеру вы столкнулись с такой проблемой, что нужному изображению нельзя прописать нужный вам класс, к примеру если вы заливаете изображение новостей через встроенную форму на странице добавление и редактирование материала, тут тоже всё просто как дважды два:
Нам стоит создать контейнер div с нужным классом, в который мы поместим системную переменную (IMAGE1) отвечающею за вывод отображения вашего изображения
HTML
Code
<div class="primer_ex1">системная переменная</div>
а в самом js, прописать нужный класс ячейки div и сказать ему, что в этой ячейки находиться картинка, благодаря метки img:
JS
Code
<script type="text/javascript">
$(window).load(function() {
$('.primer_ex1 img').hoverizr({speedOut: 'slow'});
$('.primer_ex2 img').hoverizr({speedOut: 'slow',effect:"blur",overlay: "bottom",container: "pipa",stretch: "no"});
$('.primer_ex3 img').hoverizr({effect:'blur',speedOut:'slow'});
$('.primer_ex4 img').hoverizr({speedIn: 'slow',effect:"invert"});
});
</script>
вот и всё, наше с вами решение готово.
В любой деятельности, если знаешь мало о работе, советуйся с опытным человеком. Мудрецом хоть и не назовут, но зато посчитают человеком основательным.Грасиан Бальтасар ©
931 | 
(5) 
Просто мало таких сайтов/блогов на ucoze, таких как твой - полезный, красивый, интересный.
Народ должен знать своих героев