Воскресенье, 20.01.2019, 09:54
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Наш опрос
Лайкнули наши группы в соц-ых сетях?


Всего ответов: 203

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 6
Гостей: 6
Пользователей: 0


Зарегистрировано 30741 (сегодня + 0 новых, вчера + 2 новых), В каталоге файлов 1128 материала(ов), Оставлено 5147 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Контент в uLightbox uCoz + стили CSS для uCoz
Сергей Пахомов написал:
Можете подсказать а как в приведённый CSS добавить border-radius
Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
Aleksandrs написал:
ну кто уже получает посетителей для своего сайта? у кого сколько кредитов?
Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
написал:
Еще можно такой вариант, повторяю, только после (не удаляя $MESSAGE$)

<br><legend><img src="http://img15.lostpic.net/2018/12/27/19e957f8a56dd9216e82c18319ba85aa.gif"</legend>
<b><?substr($MESAGE$,0,550)?>
<?$RELATED_ENTRIES$(8)?>
<?substr($MESAGES$,550,50000)?></b>
Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
написал:
Заменять ни чего не надо, после $MESSAGE$
Вставить следующее (доработано):
<br><br><span style="color:#b22222;"><strong>Похожие новости</strong></span>
<?substr($MESAGE$,0,550)?>
<?$RELATED_ENTRIES$(5)?>
<?substr($MESAGES$,550,50000)?>

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [25.10.2013, 16:58]

Фото-слайдер книжка-аккордеон на uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Очередная уникальная адаптация различных классных готовых решений для uCoz сайтов от Apocalypse и на этот раз это удивительно красивый фото-слайдер книжка-аккордеон для сайта бесплатного хостинга uCoz, который сделан исключительно на CSS 3 и HTML кодах без использования каких-либо скриптов. Очень полезная штука, при правильном подходе сможет украсить любой сайт и привлечь большее количество пользователей.

При нажатие на одну из картинок в этом слайдере - она плавко открывается, как бы листая книжку. Очень красиво и прикольно. Смотрится отлично.

Не забудьте сменить в коде Ссылка на картинку на саму ссылку на картинку в слайдере.

Установка:

В самый низ вашего css вставляйте:


figure {
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

.ia-container {
width: 685px;
margin: 20px auto;
overflow: hidden;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
border: 7px solid rgba(255, 255, 255, 0.6);
}
.ia-container figure {
position: absolute;
top: 0;
left: 50px;
/* width of visible piece */
width: 335px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ia-container > figure {
position: relative;
left: 0 !important;
}
.ia-container img {
display: block;
width: 100%;
}
.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px;
/* just cover visible part */
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ia-container input:checked {
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 335px;
}
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption {
background: rgba(87, 73, 81, 0);
}
.ia-container input:checked + figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 50%;
}
.ia-container #ia-selector-last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
.ia-container input:checked ~ figure input {
z-index: 1;
}
@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}
.ia-container figure {
left: 40px;
width: 260px;
}
.ia-container input {
width: 40px;
}
.ia-container input:checked ~ figure {
left: 260px;
}
.ia-container figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}
.ia-container figure {
left: 20px;
width: 180px;
}
.ia-container input {
width: 20px;
}
.ia-container input:checked ~ figure {
left: 180px;
}
.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}

 


В то место, где должен быть слайдер, вставляйте:

 


<section class="main">
<div class="ia-container">
<figure>
<img src="Ссылка на картинку" alt="image01" />
<input type="radio" name="radio-set" checked="checked" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image02" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image03" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image04" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image05" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image06" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image07" />
<input type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
<figure>
<img src="Ссылка на картинку" alt="image08" />
<input id="ia-selector-last" type="radio" name="radio-set" />
<figcaption><span>Заголовок</span>

</figcaption>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</div>
<!-- ia-container -->
</section>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Фото-слайдер книжка-аккордеон на uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: HTML коды для uCoz | Добавил: scripts_for_ucoz | Теги: фото, Аккордеон, слайдер, книжка
Просмотров: 6360 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 1
1 kopna   (25.02.2014 12:34)
Установил. Слайдер не работает. При нажатии на фото - никакой реакции.

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

Хостинг от uCoz