Скрыть миниатюры для полноэкранного слайд-шоу HTML5 jQuery (только текстовая ссылка для инициализации слайд-шоу)

Мне очень понравилось это полноэкранное слайд-шоу HTML5/jQuery:

http://eikes.github.com/jquery.fullscreen.js/

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

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

Разметка Lightbox 2 выглядит следующим образом:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Это похоже на "полноэкранное слайд-шоу jQuery HTML5", о котором я упоминал ранее. Похоже, я могу легко получить текстовые ссылки, просто поместив текст внутри тега привязки вместо обычного тега img, который отображает миниатюру.

А теперь главный вопрос: Могу ли я скрыть две другие ссылки и отобразить только одну? Таким образом, отображается одна ссылка, но слайд-шоу по-прежнему выводит три изображения. Я думал просто использовать css, добавляя display:none к ссылкам, но это не казалось правильным. Есть и другие способы визуально скрыть это с помощью css, но я подумал, что, возможно, будет лучший способ с помощью javascript. К сожалению, я не очень разбираюсь в javascript.

Вот мой тестовый сайт, на котором работает Полноэкранное слайд-шоу jQuery HTML5. По какой-то причине для инициализации слайд-шоу требуется img в теге привязки.


html jquery lightbox slideshow fullscreen
person davecave    schedule 13.05.2012    source источник
comment
Вам нужно расширить текущий javascript. Показать только один слайд, скрывая другие с помощью jQuery css()   -  person Gabriel Santos    schedule 13.05.2012
comment
Итак, я бы добавил CSS к ссылкам, которые я хотел скрыть с помощью jQuery? Могу ли я поставить что-то вроде display:none на эти ссылки? Кроме того, как бы я написал это?   -  person davecave    schedule 13.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

У вас уже есть jQuery, так почему бы не использовать его hide() функцию: http://api.jquery.com/hide/ Похоже, вы можете подключиться к запуску и остановке отображения событий, поэтому, если их отсутствие является проблемой, вы можете отобразить и скрыть соответственно.

Однако нет никаких причин, по которым вы не можете использовать display: none в своих якорях либо через встроенный css, либо через файл css. Это кажется вполне разумным.

person pms1969    schedule 22.05.2012
comment
Затем я буду загружать дополнительные эскизы, которые посетитель не увидит. В этом случае я мог бы просто оставить src пустым в тегах img, может быть? Это действительно? Я бы просто удалил теги img, но полноэкранный плагин HTML5/jQuery, о котором я упоминал в посте, требует для работы img в тегах привязки. Извините, я не включил этот бит в приведенный выше пример. Я попытался просмотреть javascript, чтобы увидеть, могу ли я его изменить, но не смог заставить его работать без тега img. - person davecave; 23.05.2012
comment
пока ваши миниатюры имеют соответствующий размер, это не должно быть большой проблемой. Но вы можете изменить начало загрузки изображений при запуске слайд-шоу. - person pms1969; 23.05.2012
comment
Кажется, display:none - самое простое решение. - person davecave; 24.05.2012