Действительно ли это возможно к лайтбоксу много изображений, но только покажите одно изображение для активации их?
Я использую Лайтбокс для отображения фотографий. Таким образом, Если бы у меня есть две категории фотографий, "работы" и "отпуска", я сделал бы...
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[work]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>
Это отображает 6 изображений, и когда я нажимаю одного из них, он запускает Лайтбокс.
Однако я хотел бы смочь отобразить только два изображения первоначально (один для 'работы', один для 'отпуска'), но когда один из них нажат, это ведет себя как первый пример, например, отобразите все фотографии в той категории через Лайтбокс.
Действительно ли это возможно? Если так, как?
Любая справка очень ценится!:)
Спасибо
2 ответа
Если вы просто не поместите ничего в значение узла привязки, они не появятся, хотя вы можете убедиться, что их нет ' t любые пробелы между этими пустыми якорями на случай, если пробелы появятся.
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]"></a>
<a href="images/image-3.jpg" rel="lightbox[work]"></a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #2</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]"></a>
<a href="images/image-6.jpg" rel="lightbox[vacation]"></a>
Добавьте класс CSS ко второму и третьему изображению в каждой категории, чтобы скрыть его от браузера. Например:
<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a class="hidden" href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a class="hidden" href="images/image-3.jpg" rel="lightbox[work]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a class="hidden" href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a class="hidden" href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>
Затем добавьте в свой файл css:
a.hidden {display: none;}