开发者

Calculate width based on dynamic number or elements generated from a foreach loop

I am working with prototype carousel. I am trying to do it with a dynamically generated number of elements so the quantity of inner divs will vary. Right now the script seems to require the width be fixed and coded into the script.

The inner content is generated with a foreach loop like this :

<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-&g开发者_开发问答t;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>   

How would I get a total count from the number of $_product divs that are generated in the foreach loop? Say there are 10, and then I multiply that for whatever the fixed width of the img is, say 50px, then I could populate the .inner width with 500px.


Calculate how much space [pixels] one item, including its padding, will take in the display area. Multiply that by the amount of items you are showing at any given time and this gives you your fluid width for your display area.

Look at this Pagination example for the Carousel by Yahoo

Pay special attention to numItems and the following CSS excerpt to get your fluidity:


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜