Главная » 2013 » Октябрь » 9 » Галерея с необычным эффектом увеличения картинок и фото (Javascript)
09.10.2013, 17:17

Галерея с необычным эффектом увеличения картинок и фото



Изящная галерея с необычным эффектом увеличения изображений для установки на сайт. Картинки выстраиваются в прямоугольник в количестве 20 штук, при наведении на отдельную картинку она увеличивается увеличивая соседние изображения создавая интересный зрительный эффект. Сами картинки и фото могут иметь любые размеры, они будут масштабированы и примут те размеры которые установлены в файле стилей. Рекомендуется устанавливать галерею на страницу не подверженную наследованию индивидуальных свойств для тега img, если Вам не понятно о чём идёт речь просто попробуйте. В остальном всё полностью настроено для работы на сайте ucoz, галерея работает с применением свойств CSS3.
Установите код там где хотите видеть галерею:
Код
<link rel="stylesheet" media="all" type="text/css" href="http://delaisait.ucoz.ru/script/css/2013/gridzoom.css" />
<div id="gridzoom"></div>
<script>
i=1;
while(i<21){
$("#gridzoom").append("<b class='p"+i+"'><i></i></b>");
i=i+1;
}
$("#gridzoom").append("<div id='imageholder'>");
i=1;
while(i<21){
$("#imageholder").append("<span class='m"+i+"'><img src='http://shrift.ucoz.ru/img/mouse_"+i+".jpg' alt='' /></span>");
i=i+1;
}
</script>

Если Вы ставите скрипт не на ucoz сайт - подключите библиотеку jquery:
Код
<script type="text/javascript" src="http://s29.ucoz.net/src/jquery-1.7.2.js"></script>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: IZOTOP. Переписано грамотно - InfoDusha
Категория: JavaScript's | Просмотров: 2046 | Добавил: InfoDusha | Рейтинг: 5.0/1 |
Теги: ГАЛЕРЕЯ, CSS3, картинки
Всего комментариев: 1
0  
1 chelsea01   (09.10.2013 21:51) [Материал]
Аватар пользователя
как поменять картинки на свои?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]