링크를 클릭하면 내 이미지의 오른쪽 테두리가 사라집니다 - CSS, jQuery

Question

구현은 seen here 일 수 있습니다.

'3 스퀘어'버튼을 클릭하면 가장 오른쪽 이미지의 가장 오른쪽 테두리를보고 사라집니다. '4 개의 사각형'을 클릭하면 같은 일이 발생합니다.

그러나 기본보기 (예 : 2 개의 정사각형)로 돌아 가면 테두리가 다시 나타납니다. 이 문제의 원인은 무엇이며 어떻게 수정합니까? CSS를 여기

<div id="compare_view"> 

    <div id="viewbar" class="compv-navbar"> 
     <a href=""><img src="images/2-up-icon-grey.png" alt="2-up-view" data-id="2"></a> | 
     <a href=""><img src="images/3-up-icon-grey.png" alt="3-up-view" data-id="3"></a> | 
     <a href=""><img src="images/4-up-icon-grey.png" alt="4-up-view" data-id="4"></a> | 
     <span id="viewname" class="view_name">2-up</span> 
    </div> 

<div id="slider-code"> 
    <a class="buttons prev" href="#"></a> 
    <div class="viewport"> 
     <ul class="overview">   
      <li><img src="images/red-stripe.jpg" /></li> 
      <li><img src="images/red-stripe-bw.jpg" /></li> 
      <li><img src="images/red-stripe-red.jpg" /></li>    
      <li><img src="images/red-stripe-dark.jpg" /></li> 
      <li><img src="images/red-stripe.jpg" /></li> 
      <li><img src="images/red-stripe-red.jpg" /></li> 
      <li><img src="images/red-stripe-dark.jpg" /></li>   
     </ul> 
    </div> 
    <a class="buttons next" href="#"></a> 
    </div> 

됩니다 :

여기

#slider-code { 
    height: 125px; 
    overflow:hidden; 
    margin: auto; /* top, right, bottom, left */ 
} 

#slider-code .viewport { 
/* margin-left: auto; -- With this enabled, the arrows don't work. 
    margin-right: auto; */ 
    margin: 0 auto; /* top, right, bottom, left */ 
    width: 540px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    float: left; 

} 

#slider-code .viewport .overview img { 
    border: 4px solid #f6f6f7; 
    margin: 0 auto; 
    -moz-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    -webkit-border-radius: 4px; 
} 

#slider-code .buttons { 
    display: block; 
    margin: 0 auto; /* top, right, bottom, left */ 
    float: left; 
    vertical-align: middle; 
} 

#slider-code .prev { 
    width: 32px; 
    height: 32px; 
    background: transparent url('../images/left-arrow.png') no-repeat 0 0; 
    vertical-align: middle; 
    margin: 0 0 0 5px; /* top, right, bottom, left */ 
    position: relative; 
/* top: 190.5px; */ 
} 

#slider-code .next { 
    width: 32px; 
    height: 32px; 
    background: transparent url('../images/right-arrow.png') no-repeat 0 0; 
    margin: 0 0 0 5px; /* 30px 0 0 10px; */ 
    vertical-align: middle; 
    position: relative; 
} 

#slider-code .disable { 
    /* for IE */ 
    filter:alpha(opacity=40); 
    /* for everything else */ 
    opacity:0.4; 
} 

#slider-code .overview { 
    list-style: none; 
    position: absolute; 
    padding: 0; 
    margin: 0 auto; 
    left: 0; 
    top: 0; 
} 

#slider-code .overview li { 
    float: left; 
    margin: 0 8px auto; /* top, right, bottom, left */ 
    padding: 1px; 
    height: 121px; 
    border: 0px solid #dcdcdc; 
    width: 236px; 
} 

.view_name { 
    font-family: "Helvetica", serif; 
    color: #f9f4c0; 
    font-style: normal; 
    font-weight: bold; 
    font-size: 11px; 
    word-spacing: 0px; 
    letter-spacing: 0px; 
    background: #1a1a1a;  
    padding: 1px 3px 1px 3px; /* top, right, bottom, left */   
    -moz-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

는 JS입니다 : 여기

는 관련 HTML입니다

//Go Global with our varibles 
    var oImg, sliderCode, sliderViewPort, win_width; 
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width; 
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width; 

    function setUp(numImages) { 
     oImg_height = oImg.height(); //size of original image height 
     oImg_width = oImg.width(); //size of original image width 
     oImg_ratio = oImg_height/oImg_width; //aspect ratio of original image 
     tImg_width = (win_width * 0.915)/num_of_images; // Target image width = (90% of the window)/2 
     tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
     sliderCode_w = $('#slider-code').width(); 
     sliderCode_h = $('#slider-code').height(); 
     var ul_width = $('#slider-code .viewport ul').width(); 

     // console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

     sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images 

     rImg_width = sliderCode.width(); // size of resized image width 
     rImg_height = sliderCode.height(); // size of resized image width 

     $('#slider-code .next').css({ 'top': rImg_height/2 }); //This needs to be resolved for various size windows 
     $('#slider-code .prev').css({ 'top': rImg_height/2 }); 
     $('#slider-code').css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
     $('#slider-code .viewport').css({ 'width': win_width * 0.94, 'height': rImg_height + 10 }); 
     $('#slider-code .overview li').css({ 'width': rImg_width + 5 }); 
     view_new_w = sliderViewPort.width(); 
     view_new_h = sliderViewPort.height(); 
     li_w = $('#slider-code .overview li').width(); 
     rUl_width = $('#slider-code .viewport ul').width(); 

     // console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

     $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 }); 

    } 

$(window).load(function() { 

//Cache Some Common Elements 
     oImg = $('#slider-code .viewport .overview img:eq(1)'); 
     sliderViewPort = $('#slider-code .viewport'); 

     // --------------------------- Begin Comparison Code --------------------------------------------------------   
     win_width = $(window).width(); 
     num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

     $("#viewbar img").click(function(e) { 
      num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.   
      $('#viewname').text(num_of_images + '-up'); 

      setUp(num_of_images); 

      e.preventDefault(); 
     }); 

     //Default set up 
     setUp(num_of_images); 

     // --------------- End Comparison Code -------------------------------------------------------------------------- 

}) 

Answer 1

귀하의 <li> 's의 넓은 664px이며, 귀하의 이미지는 659px입니다. 이미지 주위에 4px 경계선이 있으므로 실제적으로 659 + 4 + 4 = 667의 총 너비가 필요하므로 <li>의 3px이 좁아 지므로 경계의 오른쪽이 잘리지 않는 이유가됩니다.

Answer 2

처음에는 뷰포트 div의 너비가 테두리를 표시하기에 충분하지 않은 것처럼 보입니다. 못생긴 해킹으로

, 당신의 자바 스크립트에 다음 줄을 변경 :

sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images 

sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width + 6, 'height': tImg_height }); //resizes the images 

에 나는 그것이 도움이되기를 바랍니다.