Catalog Slideshow 2

Nachdem ich nun fleissig im Forum gelesen habe vorallem dieser Thread mir sehr weitergeholfen hat https://www.contao-community.de/show...l=1#post188194

Zitat:

---

Hi,
falls du das ganze ohne extra Erweiterung machen willst, ich hab mal catalog templates (für die Katalog-Liste) erstellt für die slideshow2 und den coinslider.

Hier gibts auch ne Demo und die Anleitung: http://debug.tim-gatzky.de/kataloge-...in-slider.html

Die Templates häng ich an:


Da musst du eigentlich nur noch die Feldnamen ersetzen und oben die jeweiligen Plugin-Pfade setzen. (der coinslider ist ein jquery plugin)


Grüße,
Tim
ps. das sind noch .tpls. Ich denke aber, dass die auch noch unter dem aktuellen catalog laufen.

Angehängte Dateien Angehängte Dateien

Dateityp: tpl catalog_simple_coin-slider.tpl (5,6 KB, 8x aufgerufen)
Dateityp: tpl catalog_simple_slideshow2.tpl (9,2 KB, 14x aufgerufen)

---

Was ich jetzt aber noch nicht hinbekomme das ich das ganze für den Catalog_Reader benutzen könnte um die Bildergallery in der Slideshow darzustellen. Könnte mir jemenda behilflich sein?

Du musst ebenfalls das Template anpassen. Diese Slider bestehen ja nur aus zwei Teilen. Dem passenden Markup (Template) und den zugehörigen JS Aufruf. Markup und JS bekommst du in der Doku des Slider (Kannst du nehmen was du willst)

Danke Wichteldesign. Jetzt hakt es nur noch an einer Stelle, sobald ich unter dem Katalogeintrag "image" die Mehrfachauswahl ankreuze funktioniert der Slide nicht mehr d.h. er wird nicht mehr angezeigt. Ich hab das ganze mal grob online im Moment http://www.hvmotor.es/inicio-reader/...20tes%201.html
das wäre nun die Readerseite eines Katalogeintrages. Wie kriege ich nun den Slide dazu alle bilder auszulesen?

Ohne mich jetzt weiter mit beschäftigt zu haben. Du musst gemäss der Vorgaben deines Sliders die einzelnen Elemente rendern, da die Bilder wahrscheinlich in einem Array liegen bietet sich eine Schleife an ;).

Hier ist mein Template was müsse ich da nun genau ändern?

PHP-Code:

---

<?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 if($entry['linkEdit']): ?><?php echo $entry['linkEdit']; ?><?php endif; ?>
<?php foreach ($entry['data'] as $field=>$data): ?>
<?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>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>

<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>
<?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
 */
$Beschreibungsfeld = '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'; // Das Feld in Deinem catalog, aus dem die Bilder benutzt werden sollen
#$Galeriefeld = 'gallery'; // baue ich noch ein


/**
 * Slideshow settings
 */
$slideshowEffect = ''; // Slideshow Effekt z.B.: 'Fold', 'KenBurns', 'Push', 'Flash'
$thumbnailPadding = 10; // Padding der Vorschaubilder
$thumbnailSize = 80;
$image_linked_to = 'catalog'; // 'lightbox', 'catalog'
$duration = 3500; // Laenge der Einblendung
$delay = 1500; // Dauer des Effekts
$loop = 'true';
$random = 'false'; // Zufall
$captions = 'true'; // Untertitel
$controls = 'true'; // Slideshow-Steuerung anzeigen
$paused = 'false'; // pausiert, kein autoplay
$thumbnails = 'true'; // Vorschaubilder anzeigen


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

// Gather images
$arrImages = array();
$arrUrl = array();
$arrSRC = array();
foreach ($this->entries as $entry)
{
    foreach ($entry['data'] as $field=>$data)
    {
        // work on image field. must be type 'file'
        if($data['type'] == 'file' && $field == $Bildfeld )
        { 
            // store image information
            $arrImages[] = array(
                'id' => $entry[id],
                'src' => $data['meta'][0]['src'],
                'thumbnail' => $data['meta'][0]['src'], // compressed image
                'raw' => $data['raw'],
                'size' => getimagesize($data['raw']), // can be outcommented for performance
                'width' => $data['meta'][0]['w'],
                'height' => $data['meta'][0]['h'],
                'wh' => $data['meta'][0]['wh'],
                'caption' => $entry['data'][$Beschreibungsfeld]['value'],
                'name' => $entry['data'][$Namesfeld]['value'],
                'url' => $entry['url'],
                'lightbox' => $data['meta'][0]['lb']
            );
            $arrUrl[] = $entry['url']; // store urls
            $arrSRC[] = $data['raw'];
        }
    }
}

// slideshow vars
$slideshowWidth = 0;
$slideshowHeight = 0;

// get slideshow size by dimensions of the field thumbnails settings
if($this->entries[0]['data'][$Bildfeld]['meta'][0])
{
    $slideshowWidth = $this->entries[0]['data'][$Bildfeld]['meta'][0]['w']; 
    $slideshowHeight = $this->entries[0]['data'][$Bildfeld]['meta'][0]['h'];
    $hasMeta = true;
}
// check if thumbnail override is set
else if($this->moduleTemplate->arrData['catalog_thumbnails_override'] && $this->entries[0]['data'][$Bildfeld]['meta'][0])
{
    $size = deserialize($this->moduleTemplate->arrData['catalog_imagemain_size']);
    $slideshowWidth = $size[0];
    $slideshowHeight = $size[1];
    // get slideshow size from image size
    if($size[2] == 'proportional')
    {
        $tmpImg = $this->entries[0]['data'][$Bildfeld]['raw'];
        $tmpImgSize = getImagesize($tmpImg);
        $prop = $tmpImgSize[0] / $tmpImgSize[1];
        if(!strlen($slideshowWidth))
            $slideshowWidth = $slideshowHeight * $prop;
        if(!strlen($slideshowHeight))
            $slideshowHeight = $slideshowWidth / $prop;
    }
    $hasMeta = true;
}
else
{
    // get slideshow size by image dimensions
    $tmpImg = $this->entries[0]['data'][$Bildfeld]['raw'];
    $tmpImgSize = getImagesize($tmpImg);
    $slideshowWidth = $tmpImgSize[0];
    $slideshowHeight = $tmpImgSize[1];
}



// Thumbnails
$thumbnailWidth = $thumbnailSize; //$arrImages[0]['width'];
$thumbnailHeight = $thumbnailSize; //$arrImages[0]['height'];
if($thumbnails)
{
    foreach($arrImages as $i => $image)
    {
        // create a new thumbnail
        // $width, $height, $mode=''
        $thumb = $this->getImage($image['raw'],$thumbnailSize,$thumbnailSize,'crop');
        $arrImages[$i]['thumbnail'] = $thumb;
    }
}


// build data/images string for the slideshow
foreach($arrImages as $image)
{
    $strOptions = ':{';

    if($captions)
    {    
        $strOptions .= 'caption:' . "'" . $image['caption'] . "'";
    }
    else
    {
        $strOptions .= 'caption:' . "'" . "'";
    }
    
    if($thumbnails)
        $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_full 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; ?>
{ 
    width: <?php echo $slideshowWidth; ?>,
    height: <?php echo $slideshowHeight; ?>,
    delay: <?php echo $duration; ?>,
    duration: <?php echo $delay; ?>,
    transition: 'quad:in:out',
    thumbnails: <?php echo $thumbnails; ?>,
    captions: <?php echo $captions; ?>, 
    loop: <?php echo $loop; ?>,
    paused: <?php echo $paused; ?>,
    <?php if($image_linked_to == 'lightbox'): ?>
    linked: true,
    <?php endif; ?>
    random: <?php echo $random; ?>,
    fast: 1,
    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="Katalogeintrag ansehen"><?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]['src']; ?>" 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>

<!-- stylesheet -->
<style type="text/css">
#show<?php echo $id; ?> {
    width:<?php echo $slideshowWidth; ?>px;    
    height:<?php echo $slideshowHeight + $thumbnailHeight +  $thumbnailPadding; ?>px;
    <?php if($this->play_image): ?>background: transparent url(<?php echo $this->play_image; ?>) top center no-repeat;<?php endif; ?>
}
#show<?php echo $id; ?> .slideshow-images {
    width:<?php echo $slideshowWidth; ?>px;
    height:<?php echo $slideshowHeight; ?>px;
}

<?php if($captions == true): ?>
/* Captions - Untertitel */
#show<?php echo $id; ?> .slideshow-captions {
    width:<?php echo $slideshowWidth; ?>px;
    bottom:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
}
.slideshow-captions-visible {
    height:30px;
    opacity: .7;
}
<?php endif; ?>

<?php if($controls): ?>
/* Controls - Steuerung */
#show<?php echo $id; ?> .slideshow-controller {
    margin:-44px 0 0 -119px;
    top:50%;
}
<?php endif; ?>

<?php if($thumbnails): ?>
/* Thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails {
    height:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
    width:<?php echo $slideshowWidth; ?>px;
    bottom:0;
    left:0;
    overflow:auto;
}
#show<?php echo $id; ?> .slideshow-thumbnails ul {
    height:<?php echo $thumbnailHeight; ?>px;
    width:<?php echo ( ($thumbnailWidth + $thumbnailPadding) * count($arrImages) ); ?>px;
}
/* Add a margin to the thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails li {
    margin:0;
}
#show<?php echo $id; ?> .slideshow-thumbnails a {
    float:left;
    opacity:.5;
    background-color: #FFF !important;
}
#show<?php echo $id; ?> .slideshow-thumbnails a:hover {
    background-color: #000 !important;
    opacity: 1;
}
#show<?php echo $id; ?> .slideshow-thumbnails a img {
    border:0;
}
<?php endif; ?>


</style>








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

---

Hui, das ist je eine ganze Menge Code. Ist der von die und passt der auch zum Slider? Ist leider nicht ganz so einfach da direkt eine diagnose zu stellen ohne wirklich was zu sehen.

Versuch mal erst das Markup korrekt hinzubekommen und erst dann den Slider drauf zu setzten. Einfach Step by Step aufbauen.

Hi florilein,

lies meine Anleitung mal genau: https://www.contao-community.de/show...l=1#post216162

Dort habe ich unter 1c) auf das Feld verwiesen, dass bei Dir im Backend die Bilder hat...

Wer, wie ich, die Slideshow2 inzwischen meiden möchte, weil diese eh nicht mit Theme+ funktioniert:
Hier ein Template für die NivoSlider Galerie (http://nivo.dev7studios.com/)

Oben noch die Pfade angeben und der Variablen: $arrImageFields die Galerie/Bilder-Felder angeben, die der NivoSlider als Quelle nutzen soll.

Viele Grüße,
Tim

PHP-Code:

---

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

<?php
// include jquery and nivoslider script
$GLOBALS['TL_JAVASCRIPT'][] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'; 
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/nivo-slider/jquery.nivo.slider.js';
$GLOBALS['TL_CSS'][]         = 'plugins/nivo-slider/nivo-slider.css';
$GLOBALS['TL_HEAD'][] = '<script>$.noConflict();</script>';
$arrImageFields = array('images');
?>


<div class="layout_full gallery nivoslider">

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

<?php // build nivo slider html
if(in_array($field,$arrImageFields) && count($data['files']) > 0): ?>
<div class="field <?php echo $field; ?> slider-wrapper">
    <div class="nivoslider cat_slider_<?php echo $entry['pid'] .'_'. $entry['id'];?>">
        <?php foreach($data['meta'] as $file): ?>
        <?php // build html image
        $strImage = sprintf('<img src="%s" alt="%s" %s />', $file['src'], $file['alt'], $file['wh']);
        echo $strImage;
        ?>
        <?php endforeach; ?>
    </div>
</div>

<?php else: // handle normal catalog fields as fallback ?>
<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 endif; ?>
<?php endforeach; ?>

</div>

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

/**
 * Nivoslider
 */
// A list of all settings can be found here: http://nivo.dev7studios.com/support/jquery-plugin-usage/
jQuery(document).ready(function($)
{
    $('.cat_slider_<?php echo $entry['pid'] .'_'. $entry['id'];?>').nivoSlider(
    {
        effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 800, // Slide transition speed
        pauseTime: 4500, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        keyboardNav: true,
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false // Start on a random slide
    });
});
/* ]]> */
</script>

<?php endforeach; ?>
</div>

<?php else: ?>
<p class="info"><?php echo $this->noItemsMsg; ?></p>
<?php endif; ?>

---

Hallo Tim,
das ist ja super. Dein Template ist allerdings für einen Katalog-Reader ausgelegt, sehe ich das richtig? Ich versuche nämlich, eine Veranstaltungsliste als Slider aufzubauen (quasi als Banner-Modul) und die Bilder mit den Einträgen zu verlinken und jeweils den Titel und Datum einzublenden. Ich krieg es nur nicht hin, dass die Bilder alle in einen einzigen Slider hineingeladen werden anstatt eine Reihe von Slidern zu erzeugen. Dazu müsste ich wohl ein catalog_list Template schreiben... Da hapert es allerdings an meinen Programmierfähigkeiten. Hast du so was schon mal gemacht?
Anhand der Anleitung für die Slideshow2 hatte ich mein Ziel schon fast ereicht. Aber irgendwie haben die Links oft nicht zuverlässig funktioniert und ich konnte nicht verstehen wieso. Deshalb der erneute Ansatz mit Nivo-Slider. Mal sehen, ob ich damit weiter komme.