Эпиграф в стиле tumblr (перевод windymind)
Делаем аккордеон - Slidorion
выглядит вот так: http://glee.spybb.ru/
теперь коды:
HTML-низ:
самыми первыми
<script>
$(document).ready(function(){
$('#slidorion').slidorion({
<!-- Сюда пишем опции. -->
' });
});
</script>
<script src="https://forumstatic.ru/files/000d/19/7b/61710.js"></script>
<script src="https://forumstatic.ru/files/000d/19/7b/51531.js"></script>Возможные опции:
autoPlay: 'true' - Автоматическая смена слайдов включена
autoPlay: 'false' - Автоматическая смена слайдов отключена
effect: 'fade' - Смена изображений через выцветание
effect: 'slideLeft' - Смена изображений замещением слева
effect: 'slideRight' - Смена изображений замещением справа
effect: 'slideDown' - Смена изображений замещением сверху вниз
effect: 'slideUp' - Смена изображений замещением снизу вверх
effect: 'overLeft' - Смена изображений наползание слева
effect: 'overRight' - Смена изображений наползание справа
effect: 'overDown' - Смена изображений наползание сверху вниз
effect: 'overUp' - Смена изображений наползание снизу вверх
hoverPause: 'true' - Пауза проигрывания при наведении курсора мыши включена
hoverPause: 'false' - Пауза проигрывания при наведении курсора мыши выключена
interval: число в миллисекундах без кавычек! - Задержка перед сменой изображения
speed: число в миллисекундах без кавычек! - Время смены одного слайда, то есть скорость анимации
ВАЖНО: после каждой опции ставьте запятую!
Цвета style_cs.css:
подгоняем под свой форум все.
/*
Стили для слидриона
*/
#slidorion {
width: 750px; /* Установим ширину контейнера. Равна сумме ширины #slider и #accordion */
height: 300px; /* Установим высоту контейнера. Равна высоте #slider и #accordion */
position: relative;
left: 50%;
margin-left: -384px;
padding: 10px;
background: #cbcbcb;
border: 1px solid #bbb;
-webkit-box-shadow: 0 0 34px #bbb;
-moz-box-shadow: 0 0 34px #bbb;
box-shadow: 0 0 34px #bbb;
}
#slider {
width: 200px; /* ширина контейнера с картинками */
height: 300px; /* Установим его высоту*/
position: relative;
float: left;
overflow: hidden; /* Скроем прокрутку */
}
.slider-image {
position: relative;
}
.slider-image img {
width: 180px; /* Ширина картинки*/
height: 300px; /* Высота картинки */
position: absolute;
}
#accordion {
width: 550px; /* Ширина контейнера с описателем*/
height: 300px; /* высота */
font-family: Verdana;
background: #eee;
-webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
-moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
position: relative;
z-index:999;
float: left;
}
#accordion .header { /* заголовок описания. Сложный стиль */
height: 36px;
color: #333;
background: #ededed;
/* градиентная заливка с css*/
background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 );
/* градиентная заливка с css - конец */
border: none;
border-top: 1px solid #ccc;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#accordion .header a { /* стиль ссылки внутри заголовка */
background: none;
padding: 8px 14px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: block;
}
#accordion .header a:hover { /* стиль ссылки внутри заголовка при наведении */
background: #ededed;
cursor: pointer;
}
#accordion .header a.active { /* стиль активной ссылки внутри заголовка */
border-bottom: none;
background-color: #676767 !important;
color: #fff;
}
#accordion .content {
height: 90px; /* Эту высоту нужно менять, поскольку она зависит от высоты контейнера с описанием и числа вкладок */
font-weight: bold;
font-size: 12px;
margin: 0;
padding: 16px;
border: none;
background: #d6d6d6;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 );Объявление:
подгоняем и заполняем так как вам нужно. У меня стоит на пять слайдов, количество слайдов меняется простым удалением.
<div id="slidorion">
<div id="slider">
<div class="slider-image" rel="section1">
<img src="sample.jpg" width="190" height="300" />
</div>
<div class="slider-image" rel="section2">
<img src="sample.jpg" width="190" height="300" />
</div>
<div class="slider-image" rel="section3">
<img src="sample.jpg" width="190" height="300" />
</div>
<div class="slider-image" rel="section4">
<img src="sample.jpg" width="190" height="300" />
</div>
<div class="slider-image" rel="section5">
<img src="sample.jpg" width="190" height="300" />
</div>
</div>
<div id="accordion">
<div class="header"><a class="slider-link" rel="section1">Заголовок1</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section2">Заголовок2</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section3">Заголовок3</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section4"> Заголовок4</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
<div class="header"><a class="slider-link" rel="section5">Заголовок5</a></div>
<div class="content">
<!-- Содержание располагается здесь -->
</div>
</div>
</div>готово, радуемся результату)
источник
