JQuery Kwicks изменяет размер моего изображения

Я пытаюсь поместить изображение в область kwicks ul li и установить ее ширину на 860 пикселей независимо от того, свернут ли li или нет. И я просто не могу удержать Kwicks от изменения размера моего изображения.

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

Как вы можете видеть на этом изображении, только первый (расширенный) li показывает мое свойство css width 860px, но остальные изменяются в размере. Есть ли способ обойти это?

Все работает нормально, если я назначаю background-image для каждого li, но я хочу, чтобы изображения динамически изменялись - и по какой-то причине я не могу назначить свойство css-background vie jQuery. Так что теперь мне удалось динамически вставить тег img внутри каждого li, но я не могу остановить его изменение размера.

Пожалуйста, любое предложение было бы здорово.

  <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'
    });
});

Спасибо.

Источник

3 ответа

Решение

Я действительно нашел решение 15 минут после того, как я отправил вопрос.

Я обернул все теги img тегом div и присвоил ему свойство width.

 .kwicks-category li img {  
  width: 860px; 
 }

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

Работает как шарм, все изображения внутри тегов li не меняются, и я все еще могу динамически вставлять изображения в слайд-шоу Kwicks.

Источник

Я сделал комбинацию background-image и обернутого div в теге li для 2 изображений. вот код, который работает нормально:

<style type='text/css'>
    .kwicks {height: 350px;}
    .kwicks > li {height: 350px;}
    #panel-1 { background-color: #53b388; background-image: url("***imageurl***");}
</style>

<ul class='kwicks kwicks-horizontal'>
    <li id='panel-1'></li>
    <li id='panel-2'><div style="width:1170px"><img src="***imageurl***"></div></li>
</ul>
Источник

Удалить minSize в вашем коде JS и попробуйте еще раз.

$(function() {
    $('.kwicks-category').kwicks({
        spacing : 5,
        behavior: 'slideshow'
    });
});
Источник
Другие вопросы по тегам