Миниатюры из галереи JS, размещенные в нижнем колонтитуле - PullRequest
0 голосов
/ 30 января 2012

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

http://img69.imageshack.us/img69/5923/bsade.jpg

Ссылка на то, что у меня сейчас есть, такова: http://www.marisaraskin.com/two.html.

(Границы - это всего лишь руководство для меня, пока я над этим работаю)

Код CSS для контейнера миниатюр:

.galleria-thumbnails-container {
    height: 100px;<br>
    bottom: 0;<br>
    position: absolute;<br>
    left: 10px;<br>
    right: 10px;<br>
    z-index: 1;<br>
    border:1px solid yellow;<br>
}

Я не уверен, чтодругие мои варианты для этого.Возможно, я думал, перекрывая контейнер содержимого над нижним колонтитулом с z-index.Хотя я сомневаюсь в этом, тем более что разрешение экрана у всех разное.Я могу опубликовать больше кода на запрос.Я не уверен, что еще вам нужно увидеть на данный момент.

В случае, если вам нужно знать, я использую галерею js под названием "Galleria" (classic).

1 Ответ

1 голос
/ 30 января 2012

На вашем месте я бы изменил скрипт js, чтобы вы могли заполнять блоки, которые не являются смежными в реальном HTML-коде, но вот грубый подход к выполнению всего этого через css:

  • удалить position:relative из # контейнера
  • удалить position:relative из .galleria-container
  • добавить position:absolute к .galleria-stage и удалить влево и вправо позиционирование. Кроме того, добавьте top:90px (или что-то похожее на это) и дать ему ширину: width:920px.
  • изменить .galleria-thumbnails-container на абсолютное позиционирование и используйте свойство bottom:___, чтобы указать, где вы находитесь.

По сути, вы здесь удаляете все относительное позиционирование в родительских элементах галереи, так что все сегменты галереи располагаются относительно страницы, а не любого из их родительских элементов. Как только это будет сделано, вы можете просто изменить абсолютное положение и ширину блока сцены и блока миниатюр, чтобы они располагались там, где вам нужно.

...