слайд панели
 

Добрый день.
Подскажите, пожалуйста, кто-нибудь может видел или знает плагин, который позволит сделать вот такие красивые панели? Даже не представляю как их гуглить. Нашел пример на 960grid, но я так понял это mootols, плюс еще тяжелый, а мне нужен легкий jquery =) если кто-нибудь видел, очень прошу — поделитесь, времени на эту штуку 2 дня всего.

Ну посмотрите в исходниках сайта-то.

что-то там такая дикая каша, даже не представляю как посмотреть. консоль хрома не поможет, просто в исходниках лазить тоже неэффективно.

почему это не поможет ?

функция, инициализирующая слайдер (или как его назвать), называется

initializePromotions

отсюда и пляшите

аккордеон?

а зачем там что-то готовое использовать???

на jquery и сам можешь написать за 20 минут..

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

при клике на слой: все, что слева от него сдвигаешь влево, а все, которые справа — в право, и заменяешь содержимое текущего слоя тем, что там должно отображаться :)

а все остальные примочки — обычная анимация, хоть на jquery, хоть на css3 делай.

T-sh, сдвигать — это меня марджин?

можно марджины, можно абсолютные позиции (left, right) :)

ок, спасибо.
а еще вопрос, как из разместить друг под другом? ну т.е. я разместил, а текст накладывается, не красиво. как сделать, чтобы текст одного под вторым было не видно?

не совсем понимаю, как накладывается?

можешь показать скриншот?

я если честно, очень сильно затупил))

имел ввиду background:white;

спасибо вам еще раз!


----
не всё так просто. надо поиграться с z-index еще. в общем, выложу попозже, как закончу опыты)

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

в общем, запутался я окончательно. еще раз задача, есть 4 дива, в них разное кол-во информации (они разные по высоте могут быть). нужно, чтобы они красиво разъезжались при клике.

html:

<div class="firstCat cat current" data-id="1">
</div>
<div class="secondCat cat" style="margin-left:700px;" data-id="2">	
</div>
<div class="thirdCat cat" style="margin-left:800px;" data-id="3">
</div>
<div class="fourthCat cat" style="margin-left:900px;" data-id="4">
</div>

css:

.cat {
	width:720px;
	position: absolute;
	background:white;
	color: gray;
	cursor:pointer;
}
.cat.current {
  color:black;
  cursor:auto;
}
body {
  overflow:auto; 
  overflow-x: hidden;
}

ну и на jquery у меня при клике на элемент меняются марджины других элементов, визуально они «разъезжаются». тольок возник целый ряд проблем, с моими слабыми знаниями вёрстки они просто нерешаемые)

1. слои уехали за страницу (появился горизонтальный скролл, overflow:hidden; не подходит, т.к. страница всё равно растягивается, только скролл пропадает).
2. если один блок больше другого по высоте, его текст видно под ним, см. скриншот.
3. выглядит отвратительно, не представляю что сделать, чтобы можно было нормально воспринимать информацию.
4. т.к. ширина задана абсолютно, проблемы на другом мониторе. как лучше задать ширину и отступ?

скриншот:

чего-нибудь понятно из скриншота?)

что-то ты намудрил :)

высота у слайдов должна быть одинаковая, это никак не обойти.

вот, накидал на скорую руку, возможны косяки, но принцип тот же :)

css:

<style type="text/css">
#acc{
display: block;
position: relative;
width: 960px;
height: 100%;
min-height: 800px !important;
margin: 0 auto;
overflow: hidden;
}
.slide{
display: block;
position: absolute;
width: 960px;
height: 800px; 
float: left;
}
.miniText{
position: relative;
height: auto;
width: 220px;
}
.maxiText{
position: relative;
height: auto;
width: 100%;
display: none;
}
</style>

jquery:

var thisIndex,
	thisMargin;
$(document).ready(function(){
	$("body").click(function(){
	
	});
	
	$(".slide").data("open", false);
	
	$(".slide").click(function(){
	thisIndex = $(this).index();
	if (!($(this).data("open"))){
		$(this).data("thisMargin", $(this).css("marginLeft"));
		$(this).find(".miniText").hide();
		$(this).find(".maxiText").show("slow");
		$(this).animate({"marginLeft": 0}, 1000);
		$(".slide").data("open", true);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 slide.data("defaultML", slide.css("marginLeft"));
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft": 0}, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft": 960}, 1000);
			 }
		});
	
	}
	else {
		$(this).find(".miniText").show("slow");
		$(this).find(".maxiText").hide();
		$(this).animate({"marginLeft": $(this).data("thisMargin")}, 1000);
		$(".slide").data("open", false);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
		});
			
	}
	
	});
});

<div id="acc">
	<div class="slide" style="background-color: red; ">
		<p class="miniText"> Текст закрытого блока 1</p>
		<p class="maxiText"> Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1</p>
	</div>
	<div class="slide" style="background-color: green; margin-left: 220px;">
		<p class="miniText"> Текст закрытого блока 2 </p>
		<p class="maxiText"> Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2</p>
	</div>
	<div class="slide" style="background-color: blue; margin-left: 440px;">
		<p class="miniText"> Текст закрытого блока 3 </p>
		<p class="maxiText"> Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3</p>
	</div>
	<div class="slide" style="background-color: orange; margin-left: 680px;">
		<p class="miniText"> Текст закрытого блока 4 </p>
		<p class="maxiText"> Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4</p>
	</div>
</div>

сделал чуть по-другому, но также))

теперь другой вопрос, самый проблемный для меня: как сделать ширину и отступ динамическими?

нашел вот такую статью, но таким способ в моём случае крайне неудобно делать, задавать абсолютные значения отступов через left и right.

а зачем изменять ширину? пусть ширина слайдов всегда 100%, это ведь не мешает, а отступы можно сделать так:

var a = $(this).index()-2; // получаем порядковый номер предыдущего слайда (индексы начинаются с 1, а eq —с нуля, поэтому минус 2) 
var preSlide = $('.slide').eq(a);
var b = preSlide.css("marginLeft")+preSlide.find('.miniText').width(); // получаем отступ текущего слайда, складывая отступ предыдущего + ширину блока с текстом 

$(this).css("marginLeft", b)

только проверку надо ещё добавить:

если b < 0, то b = 0;

T-sh, а как сделать отступы одинаковокрасивыми и на большом экране, и на ноутбуке?

ну, смотря что там внутри каждого и слайдов.. вообще, я бы советовал задавать точные отступы, если просто используешь это на сайте.

сразу пропиши margin-left'ы все.

а потом при помощь css media queries выставить их под все стандартные разрешения экранов :)

а я опять по другому сделал =)

ширина внешнего развернутого блока в процентах, внутреннего (чтобы текст не переносился) в пикселях, но равен внешнему

$('.cat').css('width', $('.parentCat.current').css('width'));

развернутый блок занимает 50% ширины, свернутые по 10%, марджины соответственно 10% * n и width + margin. вроде работает :)

----
не могу вам еще сто плюсов оставить, но спасибо огромное за помощь =))

да, так даже намного лучше и удобнее, хороший способ.

:) да не за что