Проблема со стилями CSS фотогалереи Jquery

Question

Привет всем участникам этого удивительного сообщества !!! В настоящее время я использую слайдер jQuery, в частности http://www.kyrielles.net/sliderkit/demos/photos-galleries.html, тот, что с заголовком feauture и клипом для просмотра миниатюр. Моя проблема в том, что когда я впервые тестировал галерею, она выглядела идеально, но когда я вставил на стартовую страницу моего текущего проекта пиктограммы навигационного клипа, а не упорядочил одну рядом с другой. Им приказывают один под другим. Так что в клипе я вижу только первый эскиз, а остальные скрыты. HTML-код:

 <div class="sliderkit photosgallery-captions">
 <div class="sliderkit-nav">
 <div class="sliderkit-nav-clip">
 <!---php for-loop that retrieves the thumbnail pics--->
 <ul>
 <li><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
 </ul>
 <!---end of loop--->
 </div>

Стили CSS:

   .photosgallery-captions{width:500px;height:335px;padding:0 0 76px;}

   /* Navbar */
   .photosgallery-captions .sliderkit- nav{left:0;bottom:0;width:480px;padding:10px;background:#000;}
  .photosgallery-captions .sliderkit-nav-clip ul li{float:left;margin:0;}
  .photosgallery-captions .sliderkit-nav-clip ul li  a{display:block;width:75px;height:50px;overflow:hidden;margin:0;padding:3px;}
  .photosgallery-captions .sliderkit-nav-clip ul li.sliderkit-selected a{padding:0;border:3px solid #fff;}

  .sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
   .sliderkit a,
   .sliderkit a:hover{text-decoration:none;}
   .sliderkit a:focus{outline:1px dotted #000;/*optional*/}
    .sliderkit img{border:0;}

   /*---------------------------------
   *  Navigation
   *---------------------------------*/
  .sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}

  /* Nav > Clip */
  .sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
  .sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-   style:none;margin:0;padding:0;}
  .sliderkit .sliderkit-nav-clip ul li{float:left;}
  .sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

Когда я изменяю свойство переполнения на видимое, я вижу, что все эскизы существуют, но в вертикальном порядке. Любые предложения о том, что я должен изменить, чтобы исправить это, будут высоко оценены! Спасибо, что нашли время, чтобы прочитать это ...

Answer 1

, отбрасывающие вещи в li, приведут их в порядок в вертикальном порядке.Что вы можете сделать, это настроить CSS для отображения вещей в любом количестве столбцов, которые вы хотите видеть.Ширина столбцов должна составлять менее 100%, иначе один будет сдвинут вниз.Затем добавьте пару переменных в php для каждого цикла.тот, который определяет, в каком столбце должна быть фотография (т. е. 1, 2, 3 и т. д.), и установите второй в class = "float-x", где x - столбец, в котором должно быть изображение. Затем вы можете добавить эту переменную втег li

например

<style type="text/css">
    .float-1 {
    float: left;
    width: 33%;
}
    .float-2 {
    float: left;
    width: 33%;
}
    .float-3 {
    float: left;
    width: 33%;
}
</style>

затем в коде (это c #, но концепция должна быть похожа на php)

<ul>
var i = 1;
@foreach(var item in Model.Application)
{
    var classStyle= "";
    if(i==3 || i%3== 0)
    {
        classStyle = "class=float-3";
    }
    else if(i==2 || i%3 == 2)
    {
        classStyle = "class=float-2";
    }
    else if (i==1 || i%3 == 1)
    {
        classStyle = "class=float-1";
    }
 }
 <li @classStyle><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
i++;
}
</ul>

Это работает для 3 столбцовно очевидно, что вы можете сделать это для 2 или 4 или любого количества столбцов довольно легко.