0

kwicks ul li 内に画像を配置しようとしています。li が折りたたまれているかどうかに関係なく、幅を 860px に固定しようとしています。そして、私は自分の画像のサイズを変更するのを止められません。

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

この画像でわかるように、最初の (展開された) li だけが CSS 幅プロパティ 860px を示していますが、他のものはサイズ変更されています。それを回避する方法はありますか？

各liにbackground-imageを割り当てるとすべてうまくいきますが、画像を動的に変更したいのですが、何らかの理由でjQuery経由でcss-backgroundプロパティを割り当てることができません。そのため、各li内にimgタグを動的に挿入できましたが、サイズ変更を止めることはできません。

どうぞ、どんな提案も素晴らしいでしょう。 

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

ありがとうございました。

4

3 に答える 3

0

質問を投稿してから15分後に実際に解決策を見つけました。

私がしたことは、すべての img タグを div でラップし、幅プロパティを割り当てたことです。

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

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

魅力のように機能し、li タグ内のすべての画像はサイズ変更されず、画像を kwicks スライドショーに動的に挿入できます。

于 2014-12-03T22:42:47.903 に答える
0

JS コードを削除minSizeして、もう一度お試しください。

$(function() {
    $('.kwicks-category').kwicks({
        spacing : 5,
        behavior: 'slideshow'
    });
});
于 2014-12-03T22:22:40.560 に答える