이 회전식 구현을 어떻게하면 더 좋게 만들 수 있습니까?

Question

implementation here을 볼 수 있습니다.

이렇게하면 자동으로 창 크기를 감지하고 즉시 표시 할 이미지의 크기를 조정합니다. 즉, 모든 화면 해상도에서 비율이 동일하다는 것입니다.

가 여기에 내가 솔루션은 더 우아하고 '부드러운'하게 사랑한다고, 내가 발견 한 몇 가지 문제가 있습니다 :

• 그것은 (말 1280+) 좋은 큰 해상도에서 고급 기능을 보인다, 하지만 일단 1024 이하로로드하려고하면 이상하게 보이고 작동하기 시작합니다.
• 스크롤하는 동안 너무 부드럽게 스크롤하지 않습니다.
• 정렬 항목 중 일부가 꺼져 있습니다 (예 : '3 장'또는 '4 장보기'로 전환하면 가장 오른쪽 이미지의 흰색 테두리가 1680 해상도에서 사라짐).
• 오른쪽 위로 스크롤하면 이미지가 보이지 않아 이상하게 끝납니다.
• 반복적 인 JS가 있습니다. 내가 아는 것은 DRY가 아니며 현재 버전이 여러 '보기'에 대해 달성하는보다 우아한 방법을 좋아할 것입니다.
• 일단 처음로드되면로드하는 데 약 3 초가 걸리고 실제로 더 작은 버전을 볼 수 있습니다. 그러면 크기가 조절 된 이미지가 페이지에 표시 될 때를 볼 수 있습니다. 그것은 나에게 조금 '깔끔한 것 같다. 그래서 나는 그것을 깨끗하게하는 것이 좋을 것이다.
• 플러스 내가 어떻게 그것을 조이고 그것을 일반적으로 더 잘 기능하게하는지에 대한 조언.

당신은 할 수있는보기가 피드백 페이지 소스하지만 중 외부 코드는 그래서 여기에 관련된 부분이고, 거기이다

HTML : 여기

<div id="compare_view" align="center"> 

    <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" align="center"> 
    <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> 

    <div id="notice"> 
     Flip through the images using the <strong> buttons </strong> and your mouse. 
    </div> 

</div> 

가 관련 CSS입니다 :

,848,956 : 여기

#slider-code { 
    height: 125px; 
    overflow:hidden; 
    margin: 0 0 0 0; 
} 

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

} 

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

#slider-code .buttons { 
    display: block; 
    margin: 0 0 0 0; /* 10px 10px 0 0; */ 
    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 0; /* 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 0px; /* 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; 
    left: 0; 
    top: 0; 
} 

#slider-code .overview li { 
    float: left; 
    margin: 0 20px 0 0; 
    padding: 1px; 
    height: 121px; 
    border: 1px 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; 
} 

#compare_view .compv-navbar img { 
    margin: 3px 3px -4px 3px; 
} 

#compare_view .compv-navbar img a.hover { 
    margin: 3px 3px -4px 3px; 
} 

는 JS이고

Btw, JS를 window.load 함수에 넣습니다. 문서를 준비 할 때 코드가 이미지 크기를 조정하기 전에 창 크기를 감지해야했기 때문에 올바르게 작동하지 않았기 때문입니다. 적재물을 적재하지 않고 회전판에 올바른 이미지를 적재하지 마십시오.

나는 작업이 위압적이라고 생각하지만 실제로 커뮤니티가 나를 위해 나올 수 있기를 바란다.

감사합니다.

편집 : 아무도 찌르는 데 용감하지 않습니까?

편집 2 : JonP가 제안한 변경 사항을 적용했지만 지금은 새로운 문제가 생겨나 고 있습니다. 누구든지 정상으로 되돌릴 수있는 방법에 대한 제안이 있습니까? 새 버전을 보려면 위 링크를 다시로드하십시오.

Answer 1

나는 작은 carosel에 지나치게 익숙하지 않기 때문에 완전히 시험되지 않았고 어둠 속에서 찌르다.

일부 DRY 선택기를 캐싱하여 약간의 성능 향상 효과를 얻을 수 있습니다.

그것은 늘 당신의 사 업 문제에 도움이

//Go Global with our varibles 
    var oImg, sliderCode, sliderViewPort,sliderOverViewImg , 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 = sliderCode.width(); 
     sliderCode_h = sliderCode.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); 

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

     rImg_width = sliderOverViewImg.width(); // size of resized image width 
     rImg_height = sliderOverViewImg.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 }); 
     sliderCode.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 
     sliderViewport.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); 

     sliderCode.tinycarousel({ controls: true, animation: true, display: 1 }); 

    } 

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

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

    }) 

행운하지만.