Hier wäre meine Lösung mit SlideItMoo.
Dabei steht folgendes in der mod_iso_productlist.tpl:
PHP-Code:
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>>
<?php echo $this->headline; ?>
</<?php echo $this->hl; ?>>
<?php endif; ?>
<?php $products = count($this->products); $product_list_width = $products * 207; ?>
<div class="product_list" style="width:<?php echo $product_list_width; ?>px;">
<div id="SlideItMoo_outer">
<!-- container inside used for hiding the elements outisde the view -->
<div id="SlideItMoo_inner">
<div id="SlideItMoo_items">
<?php foreach( $this->products as $product ): ?>
<div class="SlideItMoo_element">
<?php if($product['clear']): ?>
<div class="clear"> </div>
<?php endif; ?>
<div class="<?php echo $product['class']; ?>">
<?php echo $product['html']; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php if(count($this->products)>3){?>
<div class="SlideItMoo_back">
<!--slide back button-->
</div>
<div class="SlideItMoo_forward">
<!--slide forward button-->
</div>
<?php }?>
</div>
</div>
<?php echo $this->pagination; ?>
</div>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 222,
showControls:1,
startIndex:5
});
}
});
</script>
Lesezeichen