Catalog Bilder wie Slideshow2

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.weitzeldes...lideshow2.html

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

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.

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

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!

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

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

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?

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> 


---

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

PHP-Code:

---

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

PHP-Code:

---

/**
 * 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'});
                   
                   
            }
        });
    }
}); 


---

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

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

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

[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 :rolleyes:

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

Hab grad nur das handy zur hand


Sent from my iPhone using Tapatalk

Hey Tim,

Morgen kann ich auch ein template vorbereiten.

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

viele grüße

PHP-Code:

---

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

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::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 = $$('.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>

Musst die Felder auch im javascript teil unten umbenennen!


Sent from my iPhone using Tapatalk

aber da steht doch kein "image" oder "gallery" mehr das ich ersetzen könnte? :rolleyes:

-sry, dass ich mich so selten blöd anstelle-

Also,

1.
var a = $$('.weitere_produktbilder .image');
Feldname, Klassenname für Bilder-container innerhalb des catalogs

2. var preview = $$('.field .preview');
Ich vergebe oben (im Hauptbild phpb bereich) für das Hauptbild zusätzlich die Klasse .preview
(<div class="value preview"><?php echo $data['value']; ?></div>). So kann ich das Hauptbild am leichtesten von den anderen Feldern im javascript unterscheiden.

Ob die eigenen Variablennamen, oder eigenen Klassennamen sinnig sind, oder nicht sei dahingestellt. :) Kannst auch eigene Namen vergeben, die für Dich mehr Sinn ergeben. ;)

Tut mir leid wenn ich diesen alten Beitrag wieder ausgrabe, aber ich stehe vor dem gleichem Problem (Contao 2.11.2 und Catalog 2.0.0 beta2)
Ich habe den Code (Template) so wie er ist in mein Template eingefügt und im Modul als Katalog-Layout zugewisen. Die Hauptabbildung (file) im Katalog mit "image" bezeichnet, die anderen Bilder (file) mit "gallery" (=Bezeichnung und Beschreibung, keine Beschriftungsgruppe, "Link als Dateidownload oder Bilder-Lightbox erstellen" ist aktiviert)

Es wird zwar alles angezeigt, aber wenn ich auf die Bilder klicke, wird das Bild direkt als JPG im Browser geöffnet und nicht mit der Hauptabbildung getauscht. (Leider auch keine Lightbox, obwohl dies auf anderen Seiten auf der Homepage funktioniert)

Muss ich noch irgendwelche Einstellungen vornehmen oder im Quelltext anpassen? Bitte um eure Hilfe!

EDIT: Fehler gefunden ... ich hatte für jedes Bild einen eigenen Eintrag...