Галерея с эффектом увеличения - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Галерея для сайта uCoz » Галерея с эффектом увеличения

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



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

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




Изящная галерея с необычным еффектом увеличения изображений для установки на сайт или блог.Картинки выстраиваются в прямоугольник в количестве 20 штук, при наведении на отдельную картинку она увеличивается увеличивая соседние изображения создавая интересный зрительный эффект.Сами картинки и фото могут иметь любые размеры, они будут масштабированы и примут те разме5ры которые установлены в файле стилей.Рекомендуется устанавливать галерею на страницу не подверженную наследованию индивидуальных свойств для тега img, если Вам не понятно о чём идёт речь просто попробуйте.В остальном всё полностью настроено для работы на сайте юКоз, галерея работает без скриптов, с применением свойств CSS3.Если у Вас есть предложения или вопросы по этому материалу воспользуйтесь формой комментариев.





Это просто оркестр из персонажей галереи :)

Мышиный оркестр для галереи


Установите весь код там где хотите видеть галерею


<link rel="stylesheet" media="all" type="text/css" href="http://delaisait.ucoz.ru/script/css/2013/gridzoom.css" />
<div id="gridzoom">
<b class="p1"><i></i></b>
<b class="p2"><i></i></b>
<b class="p3"><i></i></b>
<b class="p4"><i></i></b>
<b class="p5"><i></i></b>
<b class="p6"><i></i></b>
<b class="p7"><i></i></b>
<b class="p8"><i></i></b>
<b class="p9"><i></i></b>
<b class="p10"><i></i></b>
<b class="p11"><i></i></b>
<b class="p12"><i></i></b>
<b class="p13"><i></i></b>
<b class="p14"><i></i></b>
<b class="p15"><i></i></b>
<b class="p16"><i></i></b>
<b class="p17"><i></i></b>
<b class="p18"><i></i></b>
<b class="p19"><i></i></b>
<b class="p20"><i></i></b>
<div id="imageholder">
<span class="m1">
<img src="http://shrift.ucoz.ru/img/mouse_1.jpg" alt="" />
</span>
<span class="m2">
<img src="http://shrift.ucoz.ru/img/mouse_2.jpg" alt="" />
</span>
<span class="m3">
<img src="http://shrift.ucoz.ru/img/mouse_3.jpg" alt="" />
</span>
<span class="m4">
<img src="http://shrift.ucoz.ru/img/mouse_4.jpg" alt="" />
</span>
<span class="m5">
<img src="http://shrift.ucoz.ru/img/mouse_5.jpg" alt="" />
</span>
<span class="m6">
<img src="http://shrift.ucoz.ru/img/mouse_6.jpg" alt="" />
</span>
<span class="m7">
<img src="http://shrift.ucoz.ru/img/mouse_7.jpg" alt="" />
</span>
<span class="m8">
<img src="http://shrift.ucoz.ru/img/mouse_8.jpg" alt="" />
</span>
<span class="m9">
<img src="http://shrift.ucoz.ru/img/mouse_9.jpg" alt="" />
</span>
<span class="m10">
<img src="http://shrift.ucoz.ru/img/mouse_10.jpg" alt="" />
</span>
<span class="m11">
<img src="http://shrift.ucoz.ru/img/mouse_11.jpg" alt="" />
</span>
<span class="m12">
<img src="http://shrift.ucoz.ru/img/mouse_12.jpg" alt="" />
</span>
<span class="m13">
<img src="http://shrift.ucoz.ru/img/mouse_13.jpg" alt="" />
</span>
<span class="m14">
<img src="http://shrift.ucoz.ru/img/mouse_14.jpg" alt="" />
</span>
<span class="m15">
<img src="http://shrift.ucoz.ru/img/mouse_15.jpg" alt="" />
</span>
<span class="m16">
<img src="http://shrift.ucoz.ru/img/mouse_16.jpg" alt="" />
</span>
<span class="m17">
<img src="http://shrift.ucoz.ru/img/mouse_17.jpg" alt="" />
</span>
<span class="m18">
<img src="http://shrift.ucoz.ru/img/mouse_18.jpg" alt="" />
</span>
<span class="m19">
<img src="http://shrift.ucoz.ru/img/mouse_19.jpg" alt="" />
</span>
<span class="m20">
<img src="http://shrift.ucoz.ru/img/mouse_20.jpg" alt="" />
</span>
</div>
</div>



Галерея в подключенном состоянии



Можете проверить код для установки в HTML редакторе









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3129 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: эффект, галерея

    Всего комментариев: 2
    0   Спам
    1 автор   (25.02.2014 02:02)
    Аватар автор Как изменить размер изображений? Установила, но картинки очень маленькие и в сжатом виде.

    0   Спам
    2 IZOTOP   (26.02.2014 21:02)
    Аватар IZOTOP Вот здесь можно скачать программу для изменения разрешения изображений.
    Изображения должны иметь пропорциональные размеры, у Ваших фото высота больше ширины.


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