Einleitung
Bei Produkten mit vielen Bildern kann es schnell dazu führen, dass es sehr unübersichtlich wird. Ein ganzer Block an Bildern stört auch meist das Design des Shops. Ein Slider könnte hier Abhilfe schaffen. Wie das gemacht wird, zeige ich euch heute in meinem ersten Beitrag in diesem Blog. Bei meinem Beispiel hat ein Handy 9 Vorschaubilder. In der Standardversion von Magento sieht das so aus:

Bearbeiten der Dateien

Die Veränderungen nehme ich nur in einer einzigen Datei vor, in der media.phtml . Diese findet Ihr unter  -app/design/frontend/default/Ihr-Theme/template/catalog/product/view/

Hier ersetzen wir den Code

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h4><?php echo $this->__('More Views') ?></h4>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

mit diesem (ändert bei Zeile 45 noch den Link zu eurem Shop)

<?php if (count($this->getGalleryImages()) < 3): ?>
	<div class="more-views">
    	<h4><?php echo $this->__('More Views') ?></h4>
    	<ul>
    		<?php foreach ($this->getGalleryImages() as $_image): ?>
        		<li>
            		<a href="<?php print $this->helper('catalog/image')->init($_product, 'image', $_image->getFile()) ?>" onclick="$('image').src = this.href; return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        		</li>
    		<?php endforeach; ?>
    	</ul>
	</div>
<?php endif; ?>

<?php if (count($this->getGalleryImages()) > 3): ?>
	<div class="more-views">
    	<h4>Bewegen Sie den Slider um <?php echo $this->__('More Views') ?> zu erhalten.</h4>
		<div style="position:relative;">
			<div id="more-views-slider">
				<span id="slider-images">
    				<?php
    					$imgLoopCnt = 1;
    					@$modulValue = abs(count($this->getGalleryImages())/2);

    			foreach ($this->getGalleryImages() as $_image): ?>
						<? $anzahl_bilder = count($this->getGalleryImages()) ?>
						<? @$divider = $anzahl_bilder / 2 ?>
						<? $counter_i = 1 ?>

            			<a href="<?php print $this->helper('catalog/image')->init($_product, 'image', $_image->getFile()) ?>" onclick="$('image').src = this.href; return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

						<? if($counter_i==$divider){
						echo '<br style="clear: both;" />';
					}?>
						<? $counter_i++ ?>

    				<?php
						try {
							#if($imgLoopCnt++ % $modulValue == 0) { print "<br style=\"clear: both;\">\n";}
							throw new Exception();
							}
						catch (Exception $e){
							echo $e->getMessage();
							}

				endforeach; ?>
				</span>

		<div id="h-scroll">
			<div id="h-track-left"></div>
			<div id="h-track">
				<div style="left: 0px; position: relative;" class="selected" id="h-handle"><img src="http://www.sebastian-tobias.de/magento/skin/frontend/default/default/images/h-handle.png" alt=""></div>
			</div>
		</div>
		</div>
		</div>

		<script type="text/javascript" language="javascript">
		// <![CDATA[

			var Slide = new Control.Slider('h-handle', 'h-track', {
				onSlide: function(v) { scrollHorizontal(v, $('slider-images'), Slide);  },
				onChange: function(v) { scrollHorizontal(v, $('slider-images'), slide); }
			});
			function scrollHorizontal(value, element, slider) {
				element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
			}

		// ]]>
		</script>

</div>
<?php endif; ?>

Der Grundgedanke ist der, dass bei weniger als 3 Bildern

<?php if (count($this->getGalleryImages()) < 3): ?>

die Standardansicht beibehalten wird. Bei mehr als 3 Bildern

<?php if (count($this->getGalleryImages()) > 3): ?>

kommt der neue Slider hinzu.

So…danach editieren wir noch die boxes.css, welche Ihr unter -skin/frontend/default/Ihr-Theme/css/ findet. Dort fügen wir folgene Styles hinzu:

#more-views-slider {
	position: relative;
	border: 1px solid #ccc;
	width: 265px;
	height: 140px;
}

#slider-images {
	position: absolute;
	left: 20px;
	float: left;
	width: 209px;
	height: 67px;
	padding: 8px;
	overflow: hidden;
	white-space: nowrap;
	display:inline;
}

#h-scroll {
	position: absolute;
	float: left;
	clear: both;
	top: 100px;
	left:0px;
	width: 245px;
	height: 15px;
	background: transparent url(../images/h-scroll.png) no-repeat top right;
}

#h-track {
	position: relative;
	width: 260px;
	height: 15px;
}

#h-handle {
	width: 37px;
	height: 15px;
}

Zum Schluss fügt Ihr noch die beiden Grafiken, die Ihr im Anhang findet, dem Ordner -skin/frontend/default/Ihr-Theme/images/ hinzu.

Am Ende sieht die neue Sliderfunktion so aus:

Download der media.phtml und der beiden Grafiken: media_phtml.zip

Demo: Klicken