Галерея для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.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



Галерея для сайта

Галерея для сайта с эффектом




Красивая галерея с интересным эффектом смены изображений которую Вы можете установить на свой сайт.Достаточно скопировать скрипт примера и изменить картинки на свои.В галерее используются изображения 2 размеров, 640Х350 и 100Х55 в количестве 6 штук.Если Вам понадобится програмка для изменения размера изображений можете скачать её здесь.Галерея работает во всех известных браузерах включая Internet explorer 9 и 10, для работы используются свойства CSS3 без дополнительных скриптов.При наличии предложений или вопросов воспользуйтесь формой комментариев материала:





Скрипт для установки галереи


<style type="text/css">
.gallery {
margin:50px auto;
position:relative;
width:640px;
height:55px;
padding-top:360px;
}
input.fly {position:absolute; left:-9999px;}
.gallery label {
display:block;
float:left;
width:100px;
height:55px;
padding-left:8px;
}
.gallery label img {cursor:pointer;border-radius:5px;}
.gallery label:first-child {padding:0;}
.gallery .large {
position:absolute;
top:0;
left:0;
z-index:10;
border-radius:8px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
-webkit-transform-origin:left bottom;
-o-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform: translateX(-9999px) skewX(30deg);
-o-transform: translateX(-9999px) skewX(30deg);
transform: translateX(-9999px) skewX(30deg);
}
#p1:checked ~ .gallery img.p1,
#p2:checked ~ .gallery img.p2,
#p3:checked ~ .gallery img.p3,
#p4:checked ~ .gallery img.p4,
#p5:checked ~ .gallery img.p5,
#p6:checked ~ .gallery img.p6
{
-webkit-animation:flyIn 1s ease-in-out 0.25s forwards;
-o-animation:flyIn 1s ease-in-out 0.25s forwards;
animation:flyIn 1s ease-in-out 0.25s forwards;
}
.gallery img.large {
-webkit-animation: flyOut 1s ease-in-out forwards;
-o-animation: flyOut 1s ease-in-out forwards;
animation: flyOut 1s ease-in-out forwards;
}
#p1:checked ~ .gallery label:nth-of-type(1) img,
#p2:checked ~ .gallery label:nth-of-type(2) img,
#p3:checked ~ .gallery label:nth-of-type(3) img,
#p4:checked ~ .gallery label:nth-of-type(4) img,
#p5:checked ~ .gallery label:nth-of-type(5) img,
#p6:checked ~ .gallery label:nth-of-type(6) img
{
margin-top:-2px;
box-shadow:0 5px 10px -5px rgba(0,0,0,0.6);
}
@-webkit-keyframes flyIn {
0% {-webkit-transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {-webkit-transform: translateX(-50px) skewX(-30deg);}
80% {-webkit-transform: translateX(0) skewX(15deg);}
100% {-webkit-transform: translateX(0) skewX(0deg);}
}
@-webkit-keyframes flyOut {
0% {-webkit-transform: translateX(0) skewX(0deg);}
20% {-webkit-transform: translateX(0) skewX(-15deg);}
40% {-webkit-transform: translateX(50px) skewX(30deg);}
100% {-webkit-transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
@-o-keyframes flyIn {
0% {-o-transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {-o-transform: translateX(-50px) skewX(-30deg);}
80% {-o-transform: translateX(0) skewX(15deg);}
100% {-o-transform: translateX(0) skewX(0deg);}
}
@-o-keyframes flyOut {
0% {-o-transform: translateX(0) skewX(0deg);}
20% {-o-transform: translateX(0) skewX(-15deg);}
40% {-o-transform: translateX(50px) skewX(30deg);}
100% {-o-transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
@keyframes flyIn {
0% {transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {transform: translateX(-50px) skewX(-30deg);}
80% {transform: translateX(0) skewX(15deg);}
100% {transform: translateX(0) skewX(0deg);}
}
@keyframes flyOut {
0% {transform: translateX(0) skewX(0deg);}
20% {transform: translateX(0) skewX(-15deg);}
40% {transform: translateX(50px) skewX(30deg);}
100% {transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
</style>
<!--[if lt IE 10]>
<style type="text/css">
#p1:checked ~ .gallery img.p1,
#p2:checked ~ .gallery img.p2,
#p3:checked ~ .gallery img.p3,
#p4:checked ~ .gallery img.p4,
#p5:checked ~ .gallery img.p5,
#p6:checked ~ .gallery img.p6 {
transform: translateX(0px) skewX(0deg);
}
</style>
<![endif]-->
<!--[if lt IE 9]>
<style type="text/css">
.gallery .large {left:-9999px;}
.gallery label:hover {direction:ltr;}
.gallery label:hover + img {left:0;}
</style>
<![endif]-->
<form action="">
<input type="radio" name="fly" id="p1" class="fly" checked="checked" />
<input type="radio" name="fly" id="p2" class="fly" />
<input type="radio" name="fly" id="p3" class="fly" />
<input type="radio" name="fly" id="p4" class="fly" />
<input type="radio" name="fly" id="p5" class="fly" />
<input type="radio" name="fly" id="p6" class="fly" />
<div class="gallery">
<label for="p1" tabindex="1">
<img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t1.jpg" alt="Стрекоза 1" />
</label>
<img class="large p1" src="http://delaisait.ucoz.ru/script/galereya/img/5/p1.jpg" alt="Стрекоза 1" />
<label for="p2" tabindex="1">
<img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t2.jpg" alt="Стрекоза 2" />
</label>
<img class="large p2" src="http://delaisait.ucoz.ru/script/galereya/img/5/p2.jpg" alt="Стрекоза 2" />
<label for="p3" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t3.jpg" alt="Стрекоза 3" />
</label>
<img class="large p3" src="http://delaisait.ucoz.ru/script/galereya/img/5/p3.jpg" alt="Стрекоза 3" />
<label for="p4" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t4.jpg" alt="Стрекоза 4" />
</label>
<img class="large p4" src="http://delaisait.ucoz.ru/script/galereya/img/5/p4.jpg" alt="Стрекоза 4" />
<label for="p5" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t5.jpg" alt="Стрекоза 5" />
</label>
<img class="large p5" src="http://delaisait.ucoz.ru/script/galereya/img/5/p5.jpg" alt="Стрекоза 5" />
<label for="p6" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t6.jpg" alt="Стрекоза 6" />
</label>
<img class="large p6" src="http://delaisait.ucoz.ru/script/galereya/img/5/p6.jpg" alt="Стрекоза 6" />
</div>
</form>



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



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

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









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 3227 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: галерея, сайта, для

    Всего комментариев: 3
    0   Спам
    3 nhokhikyan   (19.08.2013 00:23)
    Аватар nhokhikyan а можно внести текст в большой картине ?

    0   Спам
    1 Admin0780   (09.06.2013 21:30)
    Аватар Admin0780 а как быть если требуется больше изображений внизу? как добавить или стрелки что бы можно было мотать или добавить еще один ряд в 6 изображений?

    0   Спам
    2 IZOTOP   (10.06.2013 11:11)
    Аватар IZOTOP Галерея расчитана только на 6 изображений, для добавления количества потребуется полное изменение существующего кода.


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