jquery kwicks가 내 이미지 크기를 조정합니다

Question

저는 kwicks ul li 내부에 이미지를 넣으려고합니다. 그리고 li이 콜크되고 있는지 여부에 상관없이 860px로 고정됩니다. 그리고 kwicks가 내 이미지의 크기를 변경하는 것을 막을 수 없습니다.

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

당신은 단지 첫 번째 (확장) 리튬 내 CSS를 폭 속성 860px 표시되고,이 이미지에서 볼 수 있듯이, 그러나 다른 것들은 크기가 조정됩니다. 주위에 방법이 있습니까?

각 li에 배경 이미지를 할당하면 모든 것이 잘 작동하지만 이미지가 동적으로 변경되기를 원합니다. 그리고 어떤 이유로 css-background 속성과 jQuery를 할당 할 수 없습니다. 그래서 지금 나는 동적으로 각 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' 
    }); 
}); 

감사합니다.

Answer 1

내가 질문을 게시 한 후 실제로 해결책을 찾았습니다.

div로 모든 img 태그를 감싸고 width 속성을 할당했습니다. 마법처럼

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

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

작품, 리 태그 내부의 모든 이미지는 크기가 조정되지 않고 여전히 kwicks이 슬라이드 쇼로 동적 이미지를 삽입 할 수 있어요.

Answer 2

JS 코드에서 minSize을 제거하고 다시 시도하십시오.

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

Answer 3

2 개의 이미지에 대해 li 태그의 background-image와 wrapped div를 조합했습니다. 여기에 잘 작동하는 코드가 있습니다 :

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