Отображение содержимого под слайд-шоу увеличенного размера

Я пытаюсь показать содержимое под полноэкранным слайд-шоу, которое работает нормально. Только при прокрутке вниз оставшееся содержимое должно быть раскрыто. Таким образом, при загрузке слайд-шоу должно быть 100% по высоте и ширине.

Я попытался установить верхнее поле того же размера, что и высота браузера (обнаруженная с помощью js), и установить абсолютную позицию слайд-шоу, но это не сработало...

Хотелось бы услышать ваше мнение по этому поводу, большое спасибо!

пример: http://www.fabrikgrafik.be/slider/ (я пытаюсь получить красный блок содержимого под слайд-шоу без потери функциональности слайд-шоу)


jquery slideshow supersized
person fabrikgrafik    schedule 11.11.2012    source источник
comment
Поместите элементы управления слайд-шоу и фон в div, установите его на position: fixed; и z-index: -1   -  person SpYk3HH    schedule 12.11.2012

Ответы (2)


arrow_upward
1
arrow_downward

Это действительно просто, ничего не меняйте по сравнению с тем, что было минуту назад, кроме добавления следующих двух строк jQuery:

// made edit to hide content till slideshow is rdy
$("#content-wrapper").css("margin-top", $("#supersized").height()).show();
$(window).resize(function(e) { $("#content-wrapper").css("margin-top", $("#supersized").height()); });

обновлен jsFiddle

Кроме того, вы можете изменить этот CSS:

#controls-wrapper { display: none; position: absolute; } /* from fixed */
person SpYk3HH    schedule 11.11.2012
comment
Спасибо, но это не моя проблема. Это я умею :). Проблема в том, что я бы хотел, чтобы красный (контент) div начинался там, где заканчивается слайд-шоу. Итак, теперь он загружается во всю ширину и высоту, и когда я прокручиваю, он делает именно то, что я хочу. но красный div должен начинаться ниже слайд-шоу, а не над ним. Поэтому я думаю, что мне нужно поместить верхнюю часть поля в оболочку содержимого, которая имеет тот же размер, что и высота браузера. Но я не уверен, как это сделать, и если это правильное решение. еще раз спасибо - person fabrikgrafik; 12.11.2012
comment
внес пару изменений, выглядит отлично - person SpYk3HH; 12.11.2012
comment
Большое спасибо! Я реально ломал голову по этому поводу :). это именно то, чего я хотел добиться. Рад, что мне не нужно менять свой дизайн. - person fabrikgrafik; 12.11.2012
comment
Jquery не нужен, это простое решение css... jsfiddle.net/videsignz/9wCHZ - person VIDesignz; 12.11.2012
comment
@VIDesignz, который не работает на его взгляде из-за нескольких других элементов, но jquery короткий и простой. Я уже пробовал чистое изменение css, но это включало изменение нескольких элементов, jQuery было проще - person SpYk3HH; 12.11.2012

arrow_upward
0
arrow_downward

Я понял это....стиль css

 #redDivId {position:absolute; top:100%;}

Ознакомьтесь с этим FIDDLE.

person VIDesignz    schedule 11.11.2012
comment
Большое спасибо, это действительно правда, и я пытаюсь это сделать. Но теперь только красный div должен начинаться именно там, где заканчивается нижняя часть слайд-шоу. Только под сгибом. И это, где я не могу добиться успеха. - person fabrikgrafik; 12.11.2012
comment
Я не вижу, как вы позиционируете красный div на странице? где это? - person VIDesignz; 12.11.2012
comment
Я вижу это ‹div id=content-wrapper style=margin: auto; ширина: 960 пикселей; непрозрачность: 0,5; ясно: оба; фон: красный; цвет: #FFFFFF;›, но без объявления margin-top. - person VIDesignz; 12.11.2012
comment
Нет, действительно, я вынул это, потому что я делал это неправильно :). Но я также не уверен, что это правильный путь, может быть, есть решение только для css, которого я не вижу. - person fabrikgrafik; 12.11.2012
comment
@fabrikgrafik Чувак, тебе для этого не нужен jquery!! - person VIDesignz; 12.11.2012
comment
ура, чувак, меньше jquery всегда лучше! Сейчас я почищу код этого эксперимента и начну проект. Спасибо за помощь. - person fabrikgrafik; 12.11.2012