Hier sind ein paar Ansätze wie man sich eine eigene kleine Galerie bauen könnte:
1. im catalog template die entsprechenden Felder vorbereiten (Hauptbild, Thumbs)
- Mein Hauptbild-Feldname ist 'image', das Feld für die anderen Bilder heisst 'galerie'
- Ich überprüfe welches Feld gerade abgearbeitet wird, und dem Hauptbild verpasse ich zusätzlich die CSS Klasse 'preview' (später für mootools wichtig)
- Innerhalb der Galerie routine übergebe ich die url und einen index an einen Javascript Array, der später für das Durchschalten der Bilder nötig ist.
Hier snippets davon:
Javascript array, oben im template initialisieren
PHP-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
* Write image information in an array
*/
var imageArray = new Array();
function setImageArray(i, singleSRC)
{
imageArray[i] = new Array();
imageArray[i]['src'] = singleSRC;
//imageArray[i]['caption'] = caption;
}
//--><!]]>
</script>
Verarbeitung der Felder
PHP-Code:
<!-- image -->
<?php if($field == 'image'): ?>
<div class="field <?php echo $field; ?>">
<div class="label"><?php echo $data['label']; ?></div>
<div class="value preview"><?php echo $data['value']; ?></div>
</div>
<?php continue; ?>
<?php endif; ?>
<!-- gallery -->
<?php if($field == 'gallery'): ?>
<div class="field <?php echo $field; ?>">
<div class="label"><?php echo $data['label']; ?></div>
<div class="value"><?php echo $data['value']; ?></div>
<?php foreach($data['files'] as $index=>$files): ?>
<!-- write to image array -->
<script type="text/javascript">
<!--//--><![CDATA[//><!--
setImageArray("<?php echo $index; ?>", "<?php echo $files; ?>");
//--><!]]>
</script>
<?php endforeach; ?>
</div>
Anschließen brauch man noch ein bissel javascript, dass das Umschalten bei Klick auf die Vorschaubilder ermöglicht. Man tauscht einfach Thumb gegen Hauptbild usw.
(kann unterhalb des Hauptcodes im Template aufgerufen werden, oder innerhalb eine moo_meineScripts Datei)
PHP-Code:
/**
* Swap images in gallery with preview window
* in Catalog
*/
window.addEvent('domready', function()
{
if(typeof(imageArray) != 'undefined' )
{
var a = $$('.gallery .image');
a.setStyle('cursor', 'pointer');
//if(a.get('rel') != "") a.set('rel', "");
//if(a.get('href') != "") a.set('href', "");
var preview = $$('.field .preview');
var src = "";
var maxWidth = preview.getElement('img').get('width');
//var thumbSize = imageArray[0]['thumbSize'];
var last;
a.addEvents({
'click' : function(e)
{
var i = a.indexOf(this);
// set thumb
//var previewSrc = preview.getElement('img').get('src');
//var thumbSrc = a[i].getElement('img').get('src');
//this.getElement('img').set('src', previewSrc);
// set new preview
preview.getElement('img').set('src', imageArray[i]['src']);
preview.getElement('img').set({'width': maxWidth + 'px'});
}
});
}
});
In den entsprechenden Snippets noch die Feldnamen ersetzen mit den Feldnamen aus Eurem catalog.
Viel support kann ich dazu nicht geben. Das sollte alles relativ selbsterklärend sein.
Viele Grüße, und viel Erfolg beim Ausprobieren.
Tim
Lesezeichen