carousFredSel 업데이트 이미지 컨테이너

내가해야 할 일은 제품 축소판을 클릭하면 주 이미지가 업데이트되지만 알아낼 수없는 경우입니다. 이것에 관한 이상한 부분은 페이지가로드 된 후 브라우저 페이지의 크기를 조정하면 스크립트가 다시 초기화되어 축소판 그림을 클릭하면 주 이미지가 업데이트되는 것입니다.carousFredSel 업데이트 이미지 컨테이너

http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/이 도와주세요 여기

데모 링크. 나는 여기 문서를 빗어 봤지만 나는 뭔가를 놓쳤을 것입니다. http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced

 <script type="text/javascript"> 
     var allVariants = ""; 

     jQuery(document).ready(function($) { 
      $('body').append('<div id="prod_var_images" />'); 

      if (typeof product_variations === 'undefined') { 
       allVariants = $('form.variations_form').data('product_variations'); 
      } else { 
       allVariants = product_variations; 
      } 

      $('input[name="variation_id"]').change(function() { 
       var variantID = $(this).val(); 
       var variantData = ""; 
       for (var p = 0; p < allVariants.length; p++) {   
        if (allVariants[p].variation_id == variantID) { 
         variantData = allVariants[p]; 
        }   
       } 

       //update SKU 
       if(variantData) { 
        if(variantData.sku) { 
         $('span.prod-sku').text('SKU: ' + variantData.sku); 
         $('*[class*="variation-VN"]:not([class*="variation-' + variantData.sku + '"])').hide(); 
         $('*[class*="variation-' + variantData.sku + '"]').show(); 
        } 
       } 

       if(variantData.sku) { 
        //pull all variation images out and append to #prod_var_images div 
        $('#product-images img[alt*="variation-VN"]').closest('a').appendTo('#prod_var_images'); 

        //only show main sku variation images below main images 
        $('#prod_var_images img[alt*="variation-' + variantData.sku + '"]').closest('a').appendTo($('#product-images')); 

        //reinitialize the slide for new the content 
        $('#product-images').carouFredSel({ 
         reInit:true, 
         height: 'auto', 
         width: 276, 
         items: 3, 
         scroll: { 
          easing: "elastic", 
          duration: 1000 
         }, 
         circular: false, 
         auto: false, 
         swipe: { 
          onMouse: true, 
          onTouch: true 
         }, 
         prev: ".product-prev", 
         next: ".product-next", 
        }); 

        //rebuild thumbnail links to go to correct images - NOT WORKING 
        $('#product-images a').each(function(i) {    
         $(this).bind('click', function() { 
          $('#product-images a').addClass('active');      
         });    
        }); 
       } 
      }); 
     }); 
    </script>

출처

2014-09-22 user2414

이 조각은 엄지 손가락에 부착 caroufredsel 플러그인으로 엄지 손가락을 클릭하여 미리보기 이미지를 업데이트합니다. 크기 조정 작업 방법 적응력이 뛰어나고 반응이 빠른 디자인에 대해 더 많이 읽어 드릴 수는 없습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <style> 
     #gallery_01 img { 
      border: 2px solid white; 
     } 
    </style> 
</head> 
<body> 
<img id='img_01' src='/small/image1.jpg' data-zoom-image='/large/image1.jpg'/> 

<div id='gal1'> 
    <a href='#' data-image='/small/image1.jpg' data-zoom-image='/large/image1.jpg'> 
     <img src='/thumb/image1.jpg'/> 
    </a> 
    <a href='#' data-image='/small/image2.jpg' data-zoom-image='/large/image2.jpg'> 
     <img src='thumb/image2.jpg'/> 
    </a> 
    <a href='#' data-image='/small/image3.jpg' data-zoom-image='/large/image3.jpg'> 
     <img src='thumb/image3.jpg'/> 
    </a> 
    <a href='#' data-image='/small/image4.jpg' data-zoom-image='/large/image4.jpg'> 
     <img id='img_01' src='thumb/image4.jpg'/> 
    </a> 
</div> 

<div id='controls'> 
    <span><a id='prev' href='#'><- Prev</a></span> 
    <span>&nbsp;</span> 
    <span><a id='next' href='#'>Next -></a></span> 
</div> 

<script src='/js/jquery-1.8.3.min.js'></script> 
<script src='/js/jquery.elevateZoom-3.0.8.min.js'></script> 
<script src='/js/jquery.carouFredSel-6.2.1-packed.js'></script> 
<script type='text/javascript'> 
    $(function() { 
     var zoom_config = { 
       gallery: 'gallery_01', 
       cursor: 'pointer', 
       galleryActiveClass: 'active', 
       imageCrossfade: true 
      }, 
      carousel_config = { 
       items: 3, 
       height: 100, 
       width: 300, 
       circular: true, 
       infinite: true, 
       direction: 'left', 
       scroll: {items: 1, easing: 'elastic', duration: 500, pauseOnHover: true}, 
       prev: '#prev', 
       next: '#next' 
      }, 
      $large_image = $('#img_01'), 
      $gallery = $('#gal1'), 
      $thumbs = $gallery.find('a'); 

     $large_image.elevateZoom(zoom_config); 
     $gallery.carouFredSel(carousel_config); 

     $thumbs.on('click', function (e) { 
      e.preventDefault(); 

      var self = $(this); 

      $large_image.removeData('elevateZoom'); 
      $large_image.attr('src', self.data('image')); 
      $large_image.data('zoom-image', self.data('zoom-image')); 
      $large_image.elevateZoom(zoom_config); 
     }); 
    }); 
</script> 
</body> 
</html>

출처

2014-09-23 21:03:29 tape88

carousFredSel 업데이트 이미지 컨테이너

답변

관련 문제