Catalog-Featured als Zufallsgalerie verwenden

[ElMariachi]

Hallo!

Ich habe auf einer Seite ein Catalog-Featured eingebaut, das Referenzen zeigt.
Ausgegeben wird ein Bild und zwei Textfelder.

Wenn ich die Seite aktualisiere, dann wird eine andere Referenz angezeigt. -> Soweit so gut.
Ich hätte aber nun gerne, dass die Referenzen "durchschalten", also genau so, wie bei einer Zufallsbildergalerie.

Ist das möglich? Wenn ja, wie? -> Natürlich über Templateanpassungen, aber hat so etwas schon mal wer gemacht und kann mir Tips geben oder gibt es irgendwo ein Tutorial dazu?

Viele Grüße

[Tim G]

Hey,
das sollte einfacher gehen, wenn ich dich richtig verstanden hab

In den Einstellungen zum Katalog-Referenz Modul Individuelle Reihenfolge aktivieren und als Anordnung nach:

RAND()

eintragen.

Das sollte sql die Anweisung geben zufällig die Einträge zu holen.

Grüße Tim

[ElMariachi]

Tut sich leider nichts, ich beschreibe mein Vorhaben nochmal genauer:

Also, meine Einstellungen:
Modultyp: Katalog-Featured
Weiterleitungsseite geht zur Detailseite der Referenz
Sichtbare Felder: Bild (:file); Name (:text); Bereich (:tags)

Standardlink überschreiben ist aktiv -> Verknüpfte Felder: Das Bild
Individuelle Reihenfolge: aktiv
Anordnung nach: RAND() -> Was bedeutet das?

Bildgröße überschreiben: Bildfeld einfach Bildbreite und Höhe angegeben.

Katalog-Layout: catalog_full
Katalog_template: mod_catalogfeatured


Wie ist der Stand? Wenn ich die Seite neu lade erhalte ich immer eine andere Referenz. Wie gesagt; Es wäre super, wenn die Referenzen automatisch (ohne Seite neu laden) alle xXXsek. durchschalten, wie Zufallsbildergalerien...

[lucina]

Wie ist der Stand? Wenn ich die Seite neu lade erhalte ich immer eine andere Referenz. Wie gesagt; Es wäre super, wenn die Referenzen automatisch (ohne Seite neu laden) alle xXXsek. durchschalten, wie Zufallsbildergalerien...

Ich denke, Du solltest das mit einem der vielen Mootools-Scroller und einer Ausgabe aller möglichen Elemente mittels oben beschriebener Zufallsauswahl lösen.

Das Ausgabetemplate um die benötigte .class ergänzen, Script einbinden, fertig. Eigentlich ganz einfach.

Carolina.

[ElMariachi]

Also geht es nicht so, wie TimG geschrieben hat?

Hmmm soetwas habe ich leider noch nicht gemacht - wärst du bitte so nett mir eine genauere Beschreibung zu geben? Wäre echt lieb!

grüße

[ElMariachi]

Also ich habe gestern einiges ausprobiert, aber ich komme nicht so wirklich weiter...

[Tim G]

Mein vorschlag war mehr für eine Katalogliste. Das Featured Modul (musste es mir erstmal angucken ) macht das per Standard (Zufallsausgabe)

Was haste denn schon?

und

Wie soll es am Ende aussehen? Soll die Liste sliden, oder einfach in einem Intervall neuladen. So, oder so wird es wohl eine Ajax Lösung, oder man wrappt die das ganze Template in eine funktion und benutzt eine Art Interval (register_tick_function) in PHP.

[ElMariachi]

Hi,

also ich will keine hohen Ansprüche stellen, da ich noch nicht so erfahren bin.
Optimallösung: http://www.arrivaldesign.co.uk/

Aber wichtig ist auch, dass ihr es mir so erklären könnt, dass ich das hinbekomme
Also lieber einfacher...

[Tim G]

Das ja nur nen Slider mit ein paar Bildern. Ist ja nicht wirklich dynamisch.

Du willst das ganze noch mit einer Zufallsauswahl an Bildern aus deinem Katalog, oder aus einer Galerie eines Katalog-Eintrags, richtig?

[ElMariachi]

Genau.

Diese Felder sollen dabei ausgegeben werden: Bild (:file); Name (:text); Bereich (:tags).
Klickt man auf das Bild, dann kommt man zur Katalog-Detailseite. Im Prinzip genau so, wie bei der Beispielseite. Nur dass eben bei mir ein Katalog dahinter steht.

[Tim G]

Verstehe.

Könnte man (wohl die eleganteste und edelste Lösung) mit der Slideshow2 lösen.
Ich schau's mir mal an. Könnte interessant werden.

Im Grunde könnte man jeden Slider nutzen innerhalb des Templates nutzen, da diese meistens nur die Bildquellen benötigen und halt die paar Optionen, wie sie aussehen sollen.
(die Slideshow2 macht nichts anderes)

[ElMariachi]

Ja - in die Richtung habe ich auch schon überlegt, denn die Slideshow ist ja nichts anderes, aber wie man die dann mit dem Catalog verknüpft, geht über meinen Wissenstand hinaus
DANKE DIR!

[Tim G]

Sollte gar nicht so schwer sein.
Wir suchen uns alle Quellen der Bilder bzw. der Galerie Felder zusammen und übergeben diese an die Initialisierungs-Routine der Slideshow2.

Ich bastel mal ein bissel. So ein Template wäre sehr nützlich.

[ElMariachi]

Super nett von dir!! DANKE!

[Tim G]

Hi,
ist noch recht rough, aber funzt.
Galerien werde ich noch einbauen, zur Zeit benutzt er einfach die Bildfelder.

Es gibt einige Einstellungen für die Slideshow, die direkt im Template oben gesetzt werden können.
Du kannst auch unterscheiden ob die Bilder als lightbox, oder auf den link des catalog Eintrags verlinken.

Die Variable dafür ist: $image_linked_to = 'catalog'; // 'lightbox', 'catalog'
Je nach dem ob 'lightbox' oder 'catalog' gesetzt ist.

Bissel Finetuning muss noch, aber im Großen und Ganzen ist das der Ansatz.

<?php
/**
 * Catalog : Cataloglist Template with Slideshow2 Support
 * @author: Tim Gatzky <info@tim-gatzky.de>
 */

?>

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


<!-- include slideshow 2 scripts -->
<?php 
$GLOBALS['TL_CSS'][] = 'plugins/slideshow2/css/slideshow.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.fold.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.kenburns.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.push.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.flash.js';
?>

<?php
/**
 * Catalog settings
 */
$Untertitelfeld = 'description'; // Das Feld in Deinem catalog, das fuer die ie Untertitel benutzt wird
$Namesfeld = 'name'; // Das Feld in Deinem catalog, das fuer den Name des Bildes und für den Anchor title benutzt wird
#$Bildfeld = 'image'; // wird zur Zeit nicht benutzt :)

/**
 * Slideshow settings
 */
$slideshowEffect = 'KenBurns'; // 'Fold', 'KenBurns', 'Push'
#$width = 350;
#$height = 350;
$thumbnail = true;
$captions = true;
$image_linked_to = 'catalog'; // 'lightbox', 'catalog'
$duration = 3500; // Laenge der Einblendung
$delay = 1500; // Dauer des Effekts
$loop = true;
$random = true;
$captions = false;
$controls = true;
$paused = false;
$thumbnails = false;

// -------------------------------------- do the work

// Gather images
$arrImages = array();
$arrUrl = array();
$arrSRC = array();
$image_linked = false; // tells the slideshow to link with a lightbox
foreach ($this->entries as $entry)
{
    foreach ($entry['data'] as $field=>$data)
    {
        // work on image field. must be type 'file' and must have a width="" and height="" string
        if($data['type'] == 'file' && $data['meta'][0]['wh'] != '' )
        { 
            // store image information
            $arrImages[] = array(
                'id' => $entry[id],
                'src' => $data['meta'][0]['src'],
                'thumbnail' => $data['meta'][0]['src'], // compressed image
                'raw' => $data['raw'],
                'width' => $data['meta'][0]['w'],
                'height' => $data['meta'][0]['h'],
                'wh' => $data['meta'][0]['wh'],
                'caption' => $entry['data'][$Untertitelfeld]['value'],
                'name' => $entry['data'][$Namesfeld]['value'],
                'url' => $entry['url'],
                'lightbox' => $data['meta'][0]['lb']
            );
            $arrUrl[] = $entry['url']; // store urls
            $arrSRC[] = $data['raw'];
        }
    }
}

// build data/images string for the slideshow
foreach($arrImages as $image)
{
    $strOptions = ':{';
    
    if($captions)
        $strOptions .= 'caption:' . "'" . $image['caption'] . "'";
    
    if($thumbnail)
        $strOptions .= ', thumbnail:' . "'"  . $image['thumbnail'] . "'"; 
    
    $strOptions .= '}'; // close options
    
    $strData .= "'" . $image['raw'] . "'";
    $strData .= $strOptions;
    $strData .= ','; // close string
}


?>





<?php $id = $this->moduleTemplate->arrData['id']; // set a unique id ?>
<div class="layout_simple catalog_slideshow<?php echo $id; ?>">

<script type="text/javascript">        
//<![CDATA[
window.addEvent('domready', function(){

// Init the slideshow
var images_<?php echo $id; ?> = {<?php echo $strData; ?>};
var show_<?php echo $id; ?> = 
<?php if(strlen($slideshowEffect)): ?>
new Slideshow.<?php echo $slideshowEffect; ?>('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php else: ?>
new Slideshow('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php endif; ?>
{ 
    height: <?php echo $arrImages[0]['height']; ?>,
    width: <?php echo $arrImages[0]['width']; ?>,
    delay: <?php echo $duration; ?>,
    duration: <?php echo $delay; ?>,
    transition: 'quad:in:out',
    loop: <?php echo $loop; ?>,
    paused: '<?php echo $paused; ?>',
    <?php if($image_linked_to == 'lightbox'): ?>
    linked: true,
    <?php endif; ?>
    random: '<?php echo $random; ?>',
    fast: 2,
    thumbnails: '<?php echo $thumbnails; ?>',
    captions: '<?php echo $captions; ?>', 
    controller: '<?php echo $controls; ?>', 
    hu: '',
    loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]}
});

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





<div id="show<?php echo $id; ?>" class="slideshow">
<div class="slideshow-images">

<!-- lightbox -->
<?php if ($image_linked_to == 'lightbox'): ?><a rel="lightbox" href="#" title="<?php echo $arrImages[0]['name']; ?>"><?php endif; ?>

<!-- link to catalog -->
<?php if($image_linked_to == 'catalog'): ?><a href="<?php echo $arrImages[0]['url']; ?>"  title="<?php echo $arrImages[0]['name']; ?>"><?php endif; ?>
<script type="text/javascript">
<!--//--><![CDATA[//><!-- 

// grab the current href string and use it to find the corresponding catalog entry
window.addEvent('domready', function() 
{
    var arrA = $$('#show<?php echo $id; ?> .slideshow-images a' );
    var strUrl = "<?php echo implode(',',$arrUrl); ?>";
    var arrUrl = strUrl.split(',');
    var strSRC = "<?php echo implode(',',$arrSRC); ?>"
    var arrSRC = strSRC.split(',');
    var arrTemp = new Array();
    arrUrl.each(function(elem, index)
    {
        arrTemp[index] = new Array(elem, arrSRC[index]);
    });
    
    // set a new href for the clicked image
    arrA.addEvents({
        'click' : function() 
        {
            var src = this.getElement('img').get('src');
            var newHref = '';
            arrTemp.each(function(elem, index)
            {
                if(elem[1] == src )
                {
                    newHref = elem[0];
                }
            });
            // set href
            this.set('href',newHref);
        }    
    });
});
//--><!]]>
</script>



    <img id="slide<?php echo $id; ?>-<?php echo $arrImages[0]['id']; ?>" src="<?php echo $arrImages[0]['thumbnail']; ?>" width="<?php echo $arrImages[0]['w']; ?>" height="<?php echo $arrImages[0]['h']; ?>" alt="<?php echo $arrImages[0]['name']; ?>" />
<?php if ($image_linked_to != ''): ?></a><?php endif; ?>
</div>
</div>


</div>

<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Spiel bissel mit rum...


Ich baue morgen noch bissel dran.

Grüße Tim