Filmstrip Style Галерея изображений

Question

Я пытаюсь выяснить, как создать галерею изображений, как показано на рисунке ниже, чтобы я мог разместить ее на своем веб-сайте. Мне интересно, может ли кто-нибудь указать мне правильное направление для учебника? Я нашел много хороших галерей, в которых будут отображаться мои изображения, но ни один из них не отображает изображения, как в стиле диафильма, которым я пользуюсь.

Требования галереи:

1. При нажатии на стрелки, галерея полосы либо сдвиг влево/вправо на одну картину
2. парит над изображением будет изображение темнее, и отображать некоторые подпись об образе

Answer 1

Я только что ответил на вопрос, где кто-то использовал carouFredSel. Этот плагин jQuery выглядит так, как будто он будет работать очень хорошо, хотя я не думаю, что он имеет встроенный эффект зависания. Честно говоря, это самая легкая часть.

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

Для иллюстрации это jsfiddle.

---

ОБНОВЛЕНИЕ:
ОП спросил, можно ли переместить ссылки на страницы навигации. Я изменил jsfiddle, чтобы работать таким образом. Дополнения были следующие:

.list_carousel { 
    position: relative; 
} 
#prev2 { 
    position: absolute; 
    top: 35px; 
    left: 0; 
} 
#next2 { 
    position: absolute; 
    top: 35px; 
    right: 0; 
} 

Если вы имеете относительно расположенного элемента контейнера, вы можете абсолютно позиционные дочерние элементы. Я добавил относительное позиционирование к контейнеру list_carousel, после чего я смог полностью позиционировать навигационные стрелки внутри контейнера. Измените значение top на положение по вертикали, а влево/вправо - горизонтально.

Я также удалил пейджер вместе, поскольку это не было требование, основанное на исходном примере. Если вы измените стрелки страниц на изображения, это в значительной степени то, что вы хотите.

---

ЕЩЕ ОБНОВЛЕНИЕ
я решил сделать еще один шаг дальше и сделать работу hover эффекта больше похож на пример. См. Новый jsfiddle.Изменения:

• Добавлен пролетные обертки вокруг всего текста в элементах списка
• Добавлено $(".list_carousel li span").hide();, чтобы скрыть все пролеты
• Modified события парения для переключения пролетов

Я также добавил немного CSS для расположить текст SPAN:

.list_carousel li { 
    position: relative; 
} 
.list_carousel li span { 
    position: absolute; 
    bottom: 0; 
    display: block; 
    text-align: center; 
    width: 100%; 
} 

---

FINAL UPDATE (! Обещаю)
я решил пойти олл-ин и добавить слой прозрачности тоже: jsfiddle

Hover модификации:
$(this).prepend($("<div class='hover-transparency'></div>")); и $(this).find("div:first").remove(); добавить/удалить прозрачность слоя при наведении курсора мыши в/из.

модификации CSS:

.hover-transparency { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.60); 
} 

Это стиль прозрачность слоя. Измените свой вкус.

Answer 2

Что-то вроде jCarousel должен сделать трюк. После того, как у вас есть функциональность карусели, вы можете добавить эффект наведения с помощью CSS и диапазон, который содержит надпись.

Answer 3

Я просто смотрел ContentFlow Plugin, который основан на JavaScript.

Они включают в себя отдельную библиотеку дополнительного плагина, который вы можете использовать, который отвечает за ваши требования к слайд-шоу, в частности, этот HERE. Когда вы используете колесико мыши над 3-мя изображениями, оно прокручивается на 1. Тем не менее, вы можете модифицировать плагин, чтобы сделать то же самое при нажатии на кнопки со стрелками.

Пример плагин разметки выглядит следующим образом:

{ 
    shownItems: 3, //number of visible items 
    showCaption: true // show item caption 
    width: 100,  // relative item width 
    height: 100,  // relative item height 
    space: 0.4  // relative item spacing 
} 

Для решения, что заголовки должны быть видны только при наведении курсора мыши, я установил бы showCaption всегда быть верным наряду с использованием JQuery .hover(); Event Listener, который будет используйте .show(); и .hide(); на подпись Название класса .caption при необходимости. Кроме того, использование jQuery для установки непрозрачности может быть выполнено также в событии .hover();.

Последняя версия ContentFlow v1.0.2 поддерживает несколько экземпляров на одной и той же веб-странице, если это требуется.