Colorbox несколько изображений слайд-шоу, нажав на одно изображение - PullRequest
Новая
       11

Colorbox несколько изображений слайд-шоу, нажав на одно изображение

1 голос
/ 04 августа 2010

Пожалуйста, посмотрите на этот сайт в качестве ссылки: http://www.philsalesses.com/place-pulse/

Слева вы увидите скриншот изображения. Если вы щелкнете по изображению, оно откроет colorbox для этого одного изображения.

Я использую WordPress, поэтому с этим постом связано еще 4 скриншота, все в галерее.

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

Я новичок в WordPress, поэтому, пожалуйста, поговори со мной.

Ответы [ 2 ]

3 голосов
/ 04 августа 2010

Нет необходимости говорить - все начинают где-то. Что касается показа других ваших изображений, то как настроен плагин colorbox на вашей странице, так (псевдокод): 

for all links that contain an image {
    if the link is to an image {
        if the image has a CSS class of "colorbox-[0-9]+" {
            group it with all other images with the same CSS class
        }     
        if the image has a CSS class of "colorbox-manual" or no CSS class {
            don't group it with any other images
        }       
    }
}

Глядя на вашу страницу, я вижу две проблемы:

  1. Ваша ссылка на одно изображение имеет класс CSS "colorbox-manual".
  2. На вашей странице есть только одна ссылка, соответствующая вышеуказанным критериям:)

Самый простой способ исправить это - добавить остальные 4 изображения в ваш пост, чтобы они отображались в виде миниатюр, однако я подозреваю, что это не то, что вам нужно. Как хак, что вы можете сделать, это добавить остальные 4 изображения, а затем дать им стиль display: none. Таким образом плагин colorbox найдет их и сгруппирует с вашим основным изображением, но на самом деле не отобразит миниатюры на посте.

Примерно так для четырех изображений: 

<a href="image1.jpg" style="display: none;"><img src="image1-thumb.jpg" /></a>
<a href="image2.jpg" style="display: none;"><img src="image2-thumb.jpg" /></a>
<a href="image3.jpg" style="display: none;"><img src="image3-thumb.jpg" /></a>
<a href="image4.jpg" style="display: none;"><img src="image4-thumb.jpg" /></a>

Если это не сработает, проверьте в вашей разметке наличие class, которое плагин colorbox добавляет к вашим изображениям. Оно должно быть в форме colorbox-[0-9]+ (т.е. colorbox-123).

0 голосов
/ 19 августа 2010

Я использовал NextGen Gallery, импортировал изображения, используя это, установил «Эффект» в опциях на выключено Затем я вошел в источник nextgen и добавил colorbox-1 как класс под каждым img. Стилизирую CSS и все готово. 4 часа вершины.

Взгляните на http://www.philsalesses.com/seaswarm для демонстрации.

...