Search code examples
jquerycssresizekwicks

jquery kwicks resizes my image


I am trying to put image inside a kwicks ul li, and to make it's width fixed on 860px no matter if li is colapsed or not. And I just cant stop kwicks from resizing my image.

http://s1.postimg.org/gra40kmbz/kwicks.jpg

As you can see on this image, only first (expanded) li is showing my css width property 860px, but the other ones are resized. Is there a way around it?

Everything works fine if I assign background-image to each li, but I want images to dynamically change - and for some reason I cant assign css-background property vie jQuery. So now I managed to dynamicly insert img tag inside each li but I cant make it stop resizing.

Please, any suggestion would be great.

  <ul class="kwicks-category kwicks kwicks-horizontal">
 <li class="kwicks-selected slideshow1"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
 <li class="slideshow2"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
 <li class="slideshow3"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
 <li class="slideshow4"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
 </ul>

 .kwicks-category li {
  display: block;
  height: 300px;
  background: #999;
  position: relative;
  /* overridden by kwicks but good for when JavaScript is disabled */
  margin-left: 5px;
 float: left;
 }

 .kwicks-category li img {
  position: absolute;
  width: 860px;
  top: 0;
  left:0;
  }

$(function() {
    $('.kwicks-category').kwicks({
        minSize : 50,
        spacing : 5,
        behavior: 'slideshow'
    });
});

Thank you.


Solution

  • I actually found solution 15min after I posted the question.

    What I did was wrap all img tags with a div and assigned it width property.

     .kwicks-category li img {  
      width: 860px; 
     }
    
    .kwicks-category .img-wrap {
     position: absolute;
     top: 0;
     left:0;
     width: 860px;
     }
    

    Works like a charm, all images inside li tags do not get resized and I am still able to dynamically insert images into kwicks slideshow.