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

Question

Я разместил тестовый сайт на http://jobajoba.org, который показывает некоторые элементы фундамента.

Я использую каркас фундаментов 4 из кармана ванили, но у вас проблемы с большими пальцами лайтбокса, которые отображаются в виде элементов маркера в списке (они должны быть в строке, подобной примеру «сетка блоков», показанному на странице).

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

---

На редактирования:

Я забыл об этом вопросе, но примерно через месяц после того, как я отправил это, Zurb указал мне, что они использовали блок-сетки, чтобы создать эффект. Что-то вроде этого работало для меня:

<div> 
    <ul class="large-block-grid-4 small-block-grid-2" data-clearing> 
     <li> 
      <a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th"> 
      <img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1"> 
      </a> 
     </li> 
     <li> 
      <a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th"> 
      <img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2"> 
      </a> 
     </li> 
     <li> 
      <a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th"> 
      <img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption=""> 
      </a> 
     </li> 
     <li> 
      <a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th"> 
      <img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption=""> 
      </a> 
     </li> 
     </ul> 
    </div> 

Answer 1

примеров документации Фонда использует пользовательский docs.css файл: http://foundation.zurb.com/docs/assets/docs.css

Стилей для Расчетного Lightbox найденного под заголовком/* Удаление стилей */в точности такие же, как и в ванильной загрузке. Тем не менее, файл также имеет дополнительный раздел специально для примера документации.

/* Clearing Docs */ 
.clearing-thumbs { list-style: none; } 
.clearing-thumbs li { float: left; margin-right: 10px; } 

Добавление этих правил в ваш собственный файл css должно обеспечивать макет, который вы ищете.