Question

您好，这个真棒社区的每个成员！我目前正在使用jQuery滑块，特别是http://www.kyrielles.net/sliderkit/demos/photos-galleries.html，带有标题功能的缩略图和缩略图导航剪辑。我的问题是，当我第一次测试时，画廊看起来很完美，但当我插入当前项目的起始页时，导航剪辑的缩略图，而不是被订购旁边的那个。他们被命令一个在另一个之下。所以在剪辑中我只能看到第一个缩略图而其他缩略图是隐藏的。 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;}

当我将overflow属性更改为visible时，我可以看到所有缩略图都存在，但是按垂直顺序排列。任何关于我应该改变以解决这个问题的建议都将受到高度赞赏！感谢您花时间阅读此内容......

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或任意数量的列。

Jquery照片库的CSS样式问题

1 个答案: