24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » COLOR MATE » Каталог CSS|JS » Слайдер-аккордеон - Slidorion


Слайдер-аккордеон - Slidorion

Сообщений 1 страница 7 из 7

1

Делаем аккордеон - 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>

готово, радуемся результату)
источник

+3

2

шикарноооо *0* буду пробовать http://colormate.ru/wp-content/uploads/2011/12/afteryourownheart__by_arrioch.gif

0

3

.toffy написал(а):

шикарноооо *0* буду пробовать

пробуй, если будут вопросы, пиши)

0

4

Здрасьте!
У меня вопрос. Пытался тут  установить эту шнягу. Что вышло - можете поглядеть... Как это лечить? Заранее благодарю.

0

5

Упоротый Олень, автор темы кавычку в коде забыл убрать, и вы не заметили, у вас она перед autoPlay. Уберите и будет вам счастье.

Отредактировано dolen (29-07-2013 07:32:06)

0

6

разобрались (:

Все установила, но вот проблема: слайды ставятся один за другим и не прячутся, как на обоих демо. Функции перепробовала, запятые после каждой, кроме последней, ставила, но не помогает.
Что делать?..

Отредактировано on-coo (04-10-2013 20:41:25)

0

7

не работает. после вставки кода в свой стиль, ломает весь форум

0


Вы здесь » COLOR MATE » Каталог CSS|JS » Слайдер-аккордеон - Slidorion