Catalog Bilder wie Slideshow2

[ElMariachi]

Hallo.

Ich habe eine Produktdetailseite auf der ein großes Bild ist und weitere als Thumbnails. Im Catalog gelöst durch ein Hauptbild und weitere Bilder, die dann eben kleiner sind...
Wenn ich nun auf ein Thumbnail klicke, dann werde mir die Bilder in einer in einer Lightbox angezeigt. Ich hätte es nun aber gerne, dass bei Klick auf ein kleines Bild dieses den Platz des großen Bildes einnimmt. Ähnlich wie in einer normalen Slideshow. Geht das?

Ganz einfach, so wie hier bei Bsp. 3:

http://www.tl-usertreffen.weitzeldesign.com/slideshow2.html

[MacKP]

Hallo ElMariachi,
du bekommst in den Roh-Daten vom Template die Files in einem Array. Die kannst du einzeln Ausgeben und dir so im Template so eine Slideshow selber zusammenbauen. Dann noch für die Reader Seite JS und CSS im Seitenlayout einbinden und das wars.

Also viel Erfolg beim nachbauen ;-)

Viele Grüße

[ElMariachi]

Hi,

danke für die schnelle Antwort. Ich bin leider noch nicht so erfahren, dass ich so etwas ohne "Step by Step-Anleitung" bewerkstelligen könnte. Aber danke trotzdem.

[xchs]

Eine Anleitung zum Bearbeiten der Templates gibt es hier: http://de.contaowiki.org/Catalog_Templates_anpassen

[ElMariachi]

Hi,

haltet mich für blöd, aber so etwas bekomme ich leider noch nicht hin. Bin noch nicht so fit was das programmieren betrifft...

Könnte mir einer eine Step-by-Step Anleitung schreiben? Natürlich gegen Bezahlung...

danke!

[Tim G]

Müssen die Thumbs auch scrollbar sein?
Hab dir ne PM geschickt...

[Tim G]

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

<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

<!-- 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)

/**
 * 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

[ElMariachi]

Hey, danke für deine Arbeit!

Hier wie ich Schritt für Schritt vorgegangen bin, denn es funktioniert leider noch nicht:

Mein Hauptbild heißt: produktbild
Meine weiteren Bilder: Weitere_Produktbilder

Ich überprüfe welches Feld gerade abgearbeitet wird, und dem Hauptbild verpasse ich zusätzlich die CSS Klasse 'preview'
-> Wo machst du das? Im Catalogfeld kann man keine CSS Klasse vergeben.


- 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.
-> Muss man hier noch etwas anpassen oder passiert das alles im Code darunter?

So, dann habe ich ein neues Template erstellt von catalog_full -> catalog_full_zwei:
Dort füge ich ganz oben deinen ersten Code ein: Hier muss ich nichts verändern oder? Oder muss ich imageArray in produktbildArray umbenennen?

<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> 

Den zweiten Code füge ich auch direkt unter dem ersten eingefügten ein:

<!-- produktbild -->
<?php if($field == 'produktbild'): ?>
<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; ?>

<!-- Weitere_Produktbilder -->
<?php if($field == 'Weitere_Produktbilder'): ?>
<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>

ganz unten in dem catalog_full_zwei Template füge ich dann noch deinen letzten Code ein:

/**
 * Swap images in gallery with preview window
 * in Catalog
 */
window.addEvent('domready', function() 
{
    if(typeof(imageArray) != 'undefined' )
    {    
        var a = $$('.produktbild .Weitere_Produktbilder');
        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'});
                   
                   
            }
        });
    }
}); 

[Tim G]

Der php kram muss innerhalb der foreach schleife in der mitte des templates.

Dort steht bereits ein ähnlicher block, der die einzelnen felder des catalogs.

Darunter einfach die beiden blöcke und namen anpassen nicht vergessen.


Sent from my iPhone using Tapatalk

[ElMariachi]

hey,

bist du bitte so nett und stellst einfach den catalog_full Quelltext rein.
Mit den Snippets komm ich nicht klar. Wie gesagt, habe einfach davon noch gar keine Ahnung. Weiß nicht genau wo was rein muss

Sry, aber ich bin eben noch recht am anfang

Fettes S 1-3 wo ich die Snippets einfügen würde:


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

<div class="layout_full">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
S1
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo'))): ?>
<div class="field <?php echo $field; ?>">
<div class="label"><?php echo $data['label']; ?></div>
<div class="value"><?php echo $data['value']; ?></div>
S2
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>

<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>
S3

[Tim G]

[QUOTE=ElMariachi;133994]hey,

bist du bitte so nett und stellst einfach den catalog_full Quelltext rein.
Mit den Snippets komm ich nicht klar. Wie gesagt, habe einfach davon noch gar keine Ahnung. Weiß nicht genau wo was rein muss

Sry, aber ich bin eben noch recht am anfang

Fettes S 1-3 wo ich die Snippets einfügen würde:


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

<div class="layout_full">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>

<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo'))): ?>



Hier nach, und den anderen field block ebenfalls.

Morgen kann ich auch ein template vorbereiten.




Sent from my iPhone using Tapatalk

[Tim G]

Hab grad nur das handy zur hand


Sent from my iPhone using Tapatalk

[ElMariachi]

Hey Tim,

Morgen kann ich auch ein template vorbereiten.

-> Ich wäre dir soooo DANKBAR!!!

viele grüße

[Tim G]

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

<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>


<div class="layout_full instruments">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo')) || $field == 'notelist'): ?>

<!-- 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>
<?php continue; ?>
<?php endif; ?>

<!-- default -->
<div class="field <?php echo $field; ?>">
    <div class="label"><?php echo $data['label']; ?></div>
    <div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>

</div>
<?php endforeach; ?>

</div>

<?php else: ?>
    <?php #if( $this->replaceInsertTags('{{env::page_id}}') != 10 ): ?>
    <p class="info">No items found or invalid catalog referencex</p>
    <?php #endif; ?>
<?php endif; ?>

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

/**
 * Swap images in gallery with preview window
 * in Catalog
 */
window.addEvent('domready', function() 
{
    if(typeof(imageArray) != 'undefined' )
    {    
        var a = $$('.gallery .image'); // 1. Feldname Galerie
        a.setStyle('cursor', 'pointer');
        
        var preview = $$('.field .preview'); // Hauptbild - Klassenname
        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
               
                   // set new preview
                   preview.getElement('img').set('src', imageArray[i]['src']);
                   preview.getElement('img').set({'width': maxWidth + 'px'});
                   
                   
            }
        });
    }
});
//--><!]]>
</script>

Feldnamen noch anpassen.

Grüße Tim

[ElMariachi]

SPITZE!!! SUPER!! VIELEN DANK!

Wenn ich meine Felder so wie du benenne, also "image" und "gallery" dann funktioniert es einwandfrei. Mich würde aber nun noch interessieren, wieso es nicht geht, wenn meine Felder anders heißen:
image -> produktbild
gallery -> weitere_produktbilder

Hier der Code: Fett wo ich was geändert habe:

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

<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>


<div class="catalog_full">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo')) || $field == 'notelist'): ?>

<!-- image -->
<?php if($field == 'produktbild'): ?>
<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 == 'weitere_produktbilder'): ?>
<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>
<?php continue; ?>
<?php endif; ?>

<!-- default -->
<div class="field <?php echo $field; ?>">
<div class="label"><?php echo $data['label']; ?></div>
<div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>

</div>
<?php endforeach; ?>

</div>

<?php else: ?>
<?php #if( $this->replaceInsertTags('{{env:age_id}}') != 10 ): ?>
<p class="info">No items found or invalid catalog referencex</p>
<?php #endif; ?>
<?php endif; ?>

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

/**
* Swap images in gallery with preview window
* in Catalog
*/
window.addEvent('domready', function()
{
if(typeof(imageArray) != 'undefined' )
{
var a = $$('.weitere_produktbilder .produktbild'); // 1. Feldname Galerie
a.setStyle('cursor', 'pointer');

var preview = $$('.field .preview'); // Hauptbild - Klassenname ->Woher kommt das .field und das .preview? Denn wenn ich nur meine Feldnamen ändere, also so wie deine heißen, dann funktioniert es, ohne dass ich hier was geändert habe...
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

// set new preview
preview.getElement('img').set('src', imageArray[i]['src']);
preview.getElement('img').set({'width': maxWidth + 'px'});


}
});
}
});
//--><!]]>
</script>