Der rechte Rand meines Bildes verschwindet, wenn auf den Link geklickt wird - CSS, jQuery

Question

Die Implementierung kann seen here sein.

Wenn Sie auf die Schaltfläche "3 Quadrate" klicken, sehen Sie sich den Rand ganz rechts an - er verschwindet. Das Gleiche passiert, wenn Sie auf die "4 Quadrate" klicken.

Wenn Sie jedoch zur Standardansicht zurückkehren - also die 2 Quadrate -, erscheint die Umrandung wieder. Was könnte das verursachen und wie repariere ich es?

ist die relevanten HTML:

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

Hier ist die CSS:

#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; 
} 

Hier ist die JS:

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

Ihre <li> ‚s sind 664px breit und Ihre Bilder sind um 659px breit. Sie haben eine 4px Grenze um die Bilder, so dass Sie tatsächlich eine Gesamtbreite von 659 + 4 + 4 = 667 benötigen, was die <li> 's 3px schmal macht, weshalb die rechte Seite der Grenze abgeschnitten wird.

Answer 2

Auf den ersten Blick scheint es, dass die Breite des Ansichtsfensters nicht ausreicht, um den Rand zu zeigen.

als hässliche Hack, die folgende Zeile in Ihrem Javascript ändern:

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

zu

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

Ich hoffe, es hilft.