CODEWITHSUNDEEP
cssxhtml
user926652
user926652

Reputation: 145

Issue with CSS styles of a Jquery photo gallery

Hello to every member of this awesome community!!! I am currently using a jQuery slider in particular http://www.kyrielles.net/sliderkit/demos/photos-galleries.html , the one with the caption feauture and the thumbnails navigation clip. My issue is that when i first tested the gallery was looking perfect, but when i inserted into the startpage of my current project the thumbnail pics of the navigation clip instead of being ordered the one next to the other. They are ordered the one beneath the other. So in the clip i can see only the first thumbnail and the others are hidden. The html code is:

 <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>

The CSS styles are:

   .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;}

When i change the overflow property to visible i can see that all thumbnails exist but in vertical order. Any suggestions of what i should change to fix this would be highly appreciated! Thanks for taking the time reading this...

Upvotes: 1

Views: 608

Answers (1)

Brian
Brian

Reputation: 2229

dropping things in to the li is going to put them in to a verticle order. What you can do is set up the css to display things in however many columns you want to see. The column widths will have to total up to less than 100% or one will get pushed down. Then add a couple of variable in the php for each loop that. one that determines which column the photo needs to be in (i.e. 1, 2, 3 etc) and set the second to class="float-x" where x is the column the image should be in. Then you can add that variable to the li tag

for example

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

then in the code (this is c# but concept should be similar for 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>

This works for 3 columns but obviously you can make it for 2 or 4 or any number of columns pretty easily.

Upvotes: 1

Related Questions