동적 숫자 또는 foreach 루프에서 생성 된 요소를 기반으로 너비를 계산하십시오.

Question

prototype carousel으로 작업하고 있습니다. 내가 동적 div 요소의 수량이 다를 수 있도록 요소의 수를 생성하려고 노력하고 있습니다. 지금 스크립트는 너비가 고정되어 스크립트에 코드화되도록 요구합니다.

내부 내용이 같은 foreach 루프로 생성됩니다

나는 foreach 루프에서 생성 된 $ _product 된 div의 수와 총 수를 얻을 것 어떻게

<div class="carousel" id="example-2"> 
<a href="javascript:" class="carousel-control next" rel="next">&rsaquo;</a> 
<a href="javascript:" class="carousel-control prev" rel="prev">&lsaquo;</a> 
    <div class="middle"> 
    <!-- how can this inner width be dynamically populated ? --> 
     <div class="inner" style="width: 3000px"> 
     <?php foreach ($_productCollection as $_product): ?> 
     <?php if($_product->isSaleable()): ?> 
     <img class="<?php echo $_product->getId() ?>" src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /> 
     <?php endif; ?> 
     <?php endforeach ?> 
     </div> 
    </div> 

    <script type="text/javascript"> 
    new Carousel($('example-2').down('.middle'), $('example-2').down('.inner').select('img'), $('example-2').select('a'), { 
           duration: 0.5, 
           transition: 'sinoidal', 
           visibleSlides: 6, 
           circular: true 
          }); 
         </script> 
       </div> 

? 거기에 10이라고 말하면, img의 고정 폭, 즉 50px가 무엇이든간에 곱하면, 500px로 .inner 너비를 채울 수 있습니다.

Answer 1

패딩을 포함하여 한 항목이 표시 영역에서 차지하는 공간 [픽셀]을 계산합니다. 주어진 시간에 표시되는 항목의 양을 곱하면 표시 영역의 너비가 넓어집니다. 이 Pagination example for the Carousel by Yahoo

에서

봐 당신의 유동성 얻을의 numItems 특별한주의 다음과 같은 CSS 발췌을 지불 :

/* Always be sure to give your carousel items a width and a height */ 
    .yui-carousel-element li { 
     height: 75px; 
     width: 75px; 
    }