для Фурцивой
Галерея-1:
<p style="text-align: center;"> </p>
<link href="//delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css" media="all" rel="stylesheet" type="text/css" />
<link href="//delaisait.ucoz.ru/script/sluder/2014/flexslider/public.css" media="all" rel="stylesheet" type="text/css" /><script type='text/javascript' src='//delaisait.ucoz.ru/script/sluder/2014/flexslider/jquery.flexslider-min.js'></script>
<style type="text/css">#metaslider.flexslider li {
margin-right: 5px !important;
}
#ds-flexslider {
max-width:800px;
margin:0 auto;
}
</style>
<div class="metaslider metaslider-flex" id="ds-flexslider">
<div id="metaslider_container">
<div class="flexslider" id="metaslider">
<div class="caption-wrap">
<div class="caption">Екскурсія до шкільної бібліотеки 1 – Б клас</div>
</div>
<ul class="slides">
<li style="display: none;"><a href="#" target="_blank"><img alt="Эко-сказка, 72 школы Запорожье" src="http://zv72.ucoz.ru/72zp_ucoz/01_img/1.jpg" /> </a>
<div class="caption-wrap">
<div class="caption">Эко-сказка, 72 школы Запорожье</div>
</div>
</li>
<li style="display: none;"><a href="#" target="_blank"><img alt="Эко-сказка, 72 школы Запорожье" src="http://zv72.ucoz.ru/72zp_ucoz/01_img/2.jpg" /> </a>
<div class="caption-wrap">
<div class="caption">Эко-сказка, 72 школы Запорожье</div>
</div>
</li>
<li style="display: none;"><a href="#" target="_blank"><img alt="Эко-сказка, 72 школы Запорожье" src="http://zv72.ucoz.ru/72zp_ucoz/01_img/3.jpg" /> </a>
<div class="caption-wrap">
<div class="caption">Эко-сказка, 72 школы Запорожье</div>
</div>
</li>
<li style="display: none;"><a href="#" target="_blank"><img alt="Эко-сказка, 72 школы Запорожье" src="http://zv72.ucoz.ru/72zp_ucoz/01_img/4.jpg" /> </a>
<div class="caption-wrap">
<div class="caption">Эко-сказка, 72 школы Запорожье</div>
</div>
</li>
<li style="display: none;"><a href="#" target="_blank"><img alt="Эко-сказка, 72 школы Запорожье" src="http://zv72.ucoz.ru/72zp_ucoz/01_img/5.jpg" /> </a>
<div class="caption-wrap">
<div class="caption">Эко-сказка, 72 школы Запорожье</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<p><a href="#" target="_blank"><script>
$(document).ready(function () {
$('#metaslider').flexslider({
slideshowSpeed:3000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:600,
prevText:"<",
nextText:">",
easing:"linear",
slideshow:true,
itemWidth:800,
itemMargin:5,
useCSS:true
});
});
</script></a></p>
Галерея-2
<p style="text-align: center;"> </p>
<script src="http://delaisait.ucoz.ru/script/js/1/2013/flux.js" type="text/javascript">
</script><script type="text/javascript">
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#dsslidertiles3d', {
pagination: false,
controls: false, // Кнопки управления, можно (true)
transitions: ['tiles3d'],
autoplay: true // Автозапуск, можно (false)
});
});
</script>
<div id="dsslidertiles3d"><img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_1.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_2.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_3.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_4.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_5.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_6.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_7.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_8.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_9.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_10.jpg" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti5/228_11.jpg" /></div>
Галерея-3
<style type="text/css">.gallery {
width:490px;
height:140px;
padding-top:320px;
position:relative;
margin:50px auto;
}
.gallery form {padding:0; margin:0;}
.gallery input {position:absolute; left:-9999px;}
.gallery label {
display:block;
width:88px;
height:46px;
float:left;
margin:5px;
opacity:0.7;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.gallery label:hover {opacity:1;}
.gallery input + img {
position:absolute;
left:50%;
top:0;
z-index:50;
margin-left:-200px;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin:50% 50% -200px;
-o-transform-origin:50% 50% -200px;
transform-origin:50% 50% -200px;
}
.gallery label img {width:88px; margin:0;}
.gallery input:checked + img
{
opacity:1;
-webkit-animation:spin1 1s forwards linear; z-index:100;
-o-animation:spin1 1s forwards linear; z-index:100;
animation:spin1 1s forwards linear; z-index:100;
}
.gallery input:not(:checked) + img
{
-webkit-animation:spin2 1s forwards linear;
-o-animation:spin2 1s forwards linear;
animation:spin2 1s forwards linear;
}
@-webkit-keyframes spin1 {
0% {-webkit-transform: perspective(1200px) rotateY(-90deg);}
100% {-webkit-transform: perspective(1200px) rotateY(0deg);}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: perspective(1200px) rotateY(0deg);}
100% {-webkit-transform: perspective(1200px) rotateY(90deg);}
}
@-o-keyframes spin1 {
0% {-o-transform: perspective(1200px) rotateY(-90deg);}
100% {-o-transform: perspective(1200px) rotateY(0deg);}
}
@-o-keyframes spin2 {
0% {-o-transform: perspective(1200px) rotateY(0deg);}
100% {-o-transform: perspective(1200px) rotateY(90deg);}
}
@keyframes spin1 {
0% {transform: perspective(1200px) rotateY(-90deg);}
100% {transform: perspective(1200px) rotateY(0deg);}
}
@keyframes spin2 {
0% {transform: perspective(1200px) rotateY(0deg);}
100% {transform: perspective(1200px) rotateY(90deg);}
}
</style>
<div class="gallery">
<form action=""><input checked="checked" id="p1" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_02.jpg" /> <input id="p2" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_03.jpg" /> <input id="p3" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_04.jpg" /> <input id="p4" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_05.jpg" /> <input id="p5" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_06.jpg" /> <input id="p6" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_07.jpg" /> <input id="p7" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_08.jpg" /> <input id="p8" name="book" type="radio" /> <img alt="" src="http://72zp.ucoz.ru/img_novosti06/421_8.jpg" /> <label for="p1"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_02.jpg" /> </label> <label for="p2"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_03.jpg" /> </label> <label for="p3"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_04.jpg" /> </label> <label for="p4"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_05.jpg" /> </label> <label for="p5"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_06.jpg" /> </label> <label for="p6"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_07.jpg" /> </label><label for="p7"> <img alt="" src="http://72zp.ucoz.ru/img_novosti02/01_0638_08.jpg" /> </label></form>
</div>
|
