Vegas Background Slideshow mit Rocksolid Custom Elements

Hallo,

die letzten Tage hatte ich via RSCE einen Backgroundslider mit dem Vegas Background Slideshow umgesetzt.
Es kann als Contentelement oder als Modul eingesetzt werden.
Im Backend abgefragt werden einige Felder, die der Slider benötigt bzw. die den Optionen dazu dienen.
In einem Bereich 'Slider Bilder' können dann Bilder ausgewählt werden » mind. 1 Bild und erweiterbar auf x Bilder.
Der anzuwendende Bereich ist frei beschreibbar und bezieht sich auf den Bereich, welcher mit einem Hintergrund-slider ausgefüllt werden möchte.


Hier gebe ich gerne die Dateien weiter:

rsce_vegas.html5

PHP-Code:

---


<script type="text/javascript">
    $(document).ready(function(){ 
        $('<?php echo $this->vegasBackground ?>').vegas({

            <?php if ($this->vegasAnimation != ""): echo "animation: "; endif; ?>
                <?php foreach (deserialize($this->vegasAnimation, true) as $animation): ?><?php if ($animation == 'random'): echo ""; else: echo "[";  endif; break; ?><?php endforeach; ?>
                    <?php foreach (deserialize($this->vegasAnimation, true) as $animation): ?>
                        <?php if ($animation == 'random'){
                            echo "'random'"; break;}
                            echo "'" , $animation , "',"; ?>
                    <?php endforeach; ?>    
                <?php foreach (deserialize($this->vegasAnimation, true) as $animation): ?><?php if ($animation == 'random'): echo ""; else: echo "]";  endif; break; ?><?php endforeach; ?>
            <?php if ($this->vegasAnimation != ""): echo ","; endif; ?>
            
            delay: '<?php echo $this->vegasDelay ?>',    
            overlay: '<?php if (null !== ($objFile = Contao\FilesModel::findByUuid($this->vegasOverlay))): ?><?php $overlayImagePath = $objFile->path; ?><?php echo $overlayImagePath ?><?php endif; ?>',
            animationDuration: '<?php echo $this->vegasAnimationDuration ?>',
            transition: '<?php foreach (deserialize($this->vegasTransition, true) as $transition): ?><?php echo $transition ?><?php endforeach; ?>',
            transitionDuration: '<?php echo $this->vegasTransitionDuration ?>',        
            firstTransition: '<?php foreach (deserialize($this->vegasTransitionFirst, true) as $transitionFirst): ?><?php echo $transitionFirst ?><?php endforeach; ?>',
            firstTransitionDuration: '<?php echo $this->vegasTransitionDurationFirst ?>',                
            shuffle: <?php if($this->vegasShuffle == 'y'): echo "true"; else: echo "false"; endif; ?>,
            timer: <?php if($this->vegasTimer == 'y'): echo "true"; else: echo "false"; endif; ?>,
            preloadImage: <?php if($this->vegasPreloadImage == 'y'): echo "true"; else: echo "false"; endif; ?>,
            
            slides: [
                <?php foreach ($this->vegasImages as $vegasSlideImage): ?>
                    { src: "<?php if (null !== ($objFile = Contao\FilesModel::findByUuid($vegasSlideImage->vegasImage))): ?><?php $imagePath = $objFile->path; ?><?php echo $imagePath ?><?php endif; ?>" },
                <?php endforeach; ?>
            ]

        });
    });
</script>

---

rsce_vegas_config.php

PHP-Code:

---

<?php
return array(
    'label'    => array(
            'de'    => array('Vegas Slider','Vegas - Hintergrundbilder/Slider'),
            'en'    => array('Vegas Slider','Vegas – Backgrounds and Slideshows'),
    ),
    'types'                => array('content', 'module'),
    'contentCategory'    => 'beRecont',
    'moduleCategory'    => 'beRecont',
    'standardFields'    => array('cssID'),
    'fields' => array(
    
        // begin group general
        'vegasGroupGeneral' => array (
            'label' => array(
                'de' => array('Allgemein','<strong>Voraussetzungen:</strong><br>das Vegas Background Slideshow jQuery Plugin muss eingebunden sein.<br>
                                Weiterführende Infomationen finden Sie auf der Projektwebseite von Jay Salvat:<br>
                                <a href="https://vegas.jaysalvat.com/">https://vegas.jaysalvat.com/</a>'),
                'en' => array('general','<strong>Requirement:</strong><br>the Vegas Background Slideshow jQuery plugin must be integrated.<br>
                                For ore details and informatios visit website of Jay Salvat:<br>
                                <a href="https://vegas.jaysalvat.com/">https://vegas.jaysalvat.com/</a>'),
            ),
            'inputType' => 'group',
        ),
        'vegasBackground' => array(
            'label' => array(
                'de' => array('Anzuwendender Bereich','Geben Sie hier den Bereich [z.B. body, .myClass, .myDiv] ein, in dem der Hintergrund angewendet wird'),
                'en' => array('Area','Here you can name the using area [e.g. body, .myClass, .myDiv] where you are use the backgroundslider'),
            ),    
            'inputType' => 'text',
            'default' => 'body',
            'eval' => array('tl_class' => 'w50', 'decodeEntities' => 'false'), 
            //in this case 'decodeEntities=>false' is mandatory, so e.g. #myDIV will not be #myDIV 
            //https://community.contao.org/de/showthread.php?74781-Template-gibt-amp-35-statt-aus
        ),
        'vegasOverlay' => array(
            'label' => array(
                'de' => array('overlay','Hier können Sie ein overlay auswählen'),
                'en' => array('overlay','Here you can use an overlay'),
            ),    
            'inputType' => 'fileTree',
            'eval' => array(
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => 'jpg,jpeg,JPG,JPEG,png,PNG,svg',
                'tl_class' => 'w50 clr',
            ),
        ),
        'vegasDelay' => array(
            'label' => array(
                'de' => array('delay','Verzögerung zwischen den slides in Millisekunden [Standard 5000]'),
                'en' => array('delay','Delay beetween slides in milliseconds [default 5000]'),
            ),
            'inputType' => 'text',
            'default' => 5000,
            'eval' => array('tl_class' => 'w50'),
        ),
        'vegasPreloadImage' => array(
            'label' => array(
                'de' => array('preloadImage','Lädt Bild vor dem Start'),
                'en' => array('preloadImage','Preload images at start'),
            ),        
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['vegasSliderLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50 clr'),                
        ),
        //'vegasPreloadVideo' => array(
        //    'label' => array(
        //        'de' => array('preloadVideo','Lädt Video vor dem Start'),
        //        'en' => array('preloadVideo','Preload video at start'),
        //    ),        
        //    'inputType' => 'radio',
        //    'options' => array('y','n'),
        //    'reference' => $GLOBALS['TL_LANG']['vegasSliderLanguages'],
        //    'default' => 'n',
        //    'eval' => array('tl_class' => 'w50'),                
        //),
        
        // end group general
        
        // begin group animation
        'vegasGroupAnimation' => array (
            'label' => array(
                'de' => array('Animation','Alles rund um die Animation'),
                'en' => array('animation','all around the animation'),
            ),
            'inputType' => 'group',
        ),
        'vegasAnimation' => array(
            'label' => array(
                'de' => array('animation','Sie können eine oder mehrere Animationen auswählen - wählen Sie [random], werden die anderen Animationen unwirksam'),
                'en' => array('animation','You can define one or a list of animations - in case of [random], the other animations will not work'),
            ),    
            'inputType' => 'checkbox',
            'options' => array(
                        'random'=>'random',
                        'kenburns'=>'kenburns',
                        'kenburnsUp'=>'kenburnsUp',
                        'kenburnsDown'=>'kenburnsDown',
                        'kenburnsRight'=>'kenburnsRight',
                        'kenburnsLeft'=>'kenburnsLeft',
                        'kenburnsUpLeft'=>'kenburnsUpLeft',
                        'kenburnsUpLeft'=>'kenburnsUpLeft',
                        'kenburnsDownLeft'=>'kenburnsDownLeft',
                        'kenburnsDownRigh'=>'kenburnsDownRigh'
                        ),
            'eval' => array('tl_class' => 'w50 clr', 'multiple' => true ),
        ),
        'vegasAnimationDuration' => array(
            'label' => array(
                'de' => array('animationDuration','Sie können hier die Durchlaufzeit der Animation in Millisekunden festlegen. Im Standard ist diese [auto], sodass sie mit der Durchlaufzeit der Slides gleich ist'),
                'en' => array('animationDuration','Set the animation duration in milliseconds. By default it is [auto], so the animation duration will be equal to the slide delay'),
            ),        
            'inputType' => 'text',
            'default' => 'auto',
            'eval' => array('tl_class' => 'w50'),            
        ),
        'vegasTransitionFirst' => array(
            'label' => array(
                'de' => array('firstTransition','Wählen Sie die Art des Übergänges des ersten slides aus'),
                'en' => array('firstTransition','Set the transition for the first played slide'),
            ),
            'inputType' => 'select',
            'options' => array(
                        'fade'=>'fade',
                        'fade2'=>'fade2',
                        'slideLeft'=>'slideLeft',
                        'slideLeft2'=>'slideLeft2',
                        'slideRight'=>'slideRight',
                        'slideRight2'=>'slideRight2',
                        'slideUp'=>'slideUp',
                        'slideUp2'=>'slideUp2',
                        'slideDown'=>'slideDown',
                        'slideDown2'=>'slideDown2',
                        'zoomIn'=>'zoomIn',
                        'zoomIn2'=>'zoomIn2',
                        'zoomOut'=>'zoomOut',
                        'zoomOut2'=>'zoomOut2',
                        'swirlLeft'=>'swirlLeft',
                        'swirlLeft2'=>'swirlLeft2',
                        'swirlRigth'=>'swirlRigth',
                        'swirlRight2'=>'swirlRight2',
                        'burn'=>'burn',
                        'burn2'=>'burn2',
                        'blur'=>'blur',
                        'blur2'=>'blur2',
                        'flash'=>'flash',
                        'flash2'=>'flash2'
                        ),
            'default' => 'fade',
            'eval' => array('tl_class' => 'w50 clr'),
        ),
        'vegasTransitionDurationFirst' => array(
            'label' => array(
                'de' => array('firstTransitionDuration','Sie können hier die Durchlaufzeit des Übergänges des ersten Slides in Millisekunden festlegen. Im Standard ist diese [auto], sodass sie mit der Durchlaufzeit der Slides gleich ist'),
                'en' => array('firstTransitionDuration','Set the transition duration in milliseconds for the first played slide. By default it is [auto], so the animation duration will be equal to the slide delay'),
            ),        
            'inputType' => 'text',
            'default' => 'auto',
            'eval' => array('tl_class' => 'w50'),            
        ),
        'vegasTransition' => array(
            'label' => array(
                'de' => array('transition','Wählen Sie die Art der Übergänge aus'),
                'en' => array('transition','Set the transitions'),
            ),    
            'inputType' => 'select',
            'options' => array(
                        'fade'=>'fade',
                        'fade2'=>'fade2',
                        'slideLeft'=>'slideLeft',
                        'slideLeft2'=>'slideLeft2',
                        'slideRight'=>'slideRight',
                        'slideRight2'=>'slideRight2',
                        'slideUp'=>'slideUp',
                        'slideUp2'=>'slideUp2',
                        'slideDown'=>'slideDown',
                        'slideDown2'=>'slideDown2',
                        'zoomIn'=>'zoomIn',
                        'zoomIn2'=>'zoomIn2',
                        'zoomOut'=>'zoomOut',
                        'zoomOut2'=>'zoomOut2',
                        'swirlLeft'=>'swirlLeft',
                        'swirlLeft2'=>'swirlLeft2',
                        'swirlRigth'=>'swirlRigth',
                        'swirlRight2'=>'swirlRight2',
                        'burn'=>'burn',
                        'burn2'=>'burn2',
                        'blur'=>'blur',
                        'blur2'=>'blur2',
                        'flash'=>'flash',
                        'flash2'=>'flash2'
                        ),
            'default' => 'fade',
            'eval' => array('tl_class' => 'w50'),
        ),
        'vegasTransitionDuration' => array(
            'label' => array(
                'de' => array('transitionDuration','Sie können hier die Durchlaufzeit der Übergänge der Slides in Millisekunden festlegen. Im Standard ist diese [auto], sodass sie mit der Durchlaufzeit der Slides gleich ist'),
                'en' => array('transitionDuration','Set the transition duration in milliseconds. By default it is [auto], so the animation duration will be equal to the slide delay'),
            ),        
            'inputType' => 'text',
            'default' => 'auto',
            'eval' => array('tl_class' => 'w50'),            
        ),
        'vegasShuffle' => array(
            'label' => array(
                'de' => array('shuffle','Zufällige Reihenfolge der ausgewählten Bilder'),
                'en' => array('shuffle','Shuffle the images before start'),
            ),    
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['vegasSliderLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50 clr'),            
        ),
        'vegasTimer' => array(
            'label' => array(
                'de' => array('timer','Timer bar anzeigen/ausblenden'),
                'en' => array('timer','display/hide timer bar'),
            ),        
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['vegasSliderLanguages'],
            'default' => 'y',
            'eval' => array('tl_class' => 'w50'),
        ),
        // end group animation
        
        // begin group images
        'vegasImages' => array(
            'label' => array(
                'de' => array('Slider Bilder','Hier wählen Sie die Bilder für die Slideshow aus'),
                'en' => array('Slider Images','Here you choose the images'),
            ),
            'elementLabel' => '%s. Slide',
            'inputType' => 'list',
            'minItems' => 1,
            'fields' => array(
                'vegasImage' => array(
                    'label' => array(
                        'de' => array('Slider Bild','Bitte wählen Sie ein Bild für diesen Slide aus'),
                        'en' => array('Slider images','Please choose the images for this slide'),
                    ),
                    'inputType' => 'fileTree',
                    'eval' => array(
                        'fieldType' => 'radio',
                        'filesOnly' => true,
                        'extensions' => 'jpg,jpeg,JPG,JPEG,png,PNG,svg',
                        'mandatory' => true,
                    ),
                ),
            ),
        ),
        // end group images
        
    ),    
);

---

für die Übersetzungen habe ich folgende Datei:
/app/Recources/contao/languages/de/tl_default.php
/app/Recources/contao/languages/en/tl_default.php

PHP-Code:

---

<?php

$GLOBALS['TL_LANG']['vegasSliderLanguages'] = array
(
    'y' => 'ja',
    'n' => 'nein'
);

---

PHP-Code:

---

<?php

$GLOBALS['TL_LANG']['vegasSliderLanguages'] = array
(
    'y' => 'yes',
    'n' => 'no'
);

---

Wichtiger Tipp:
Nach dem Eintragen dieser beiden Dateien tl_default.php, bzw. bei Änderungen derselbigen muss der 'Cache der Entwicklungsumgebung erneuert werden' » mit Contao Manager: Systemwartung » Cache der Entwicklungsumgebung erneuern


Zusätzlich eingebunden werden muss der Vegas Slider!
Die Dateien und die Installationsmöglichkeiten findet ihr auf der Webseite von Jay Salvat.

Und natürlich möchte ich mich auch noch bei den Helfenden bedanken, die mir die Hand gereicht haben und mir bei meinen Rückfragen in diesem Projekt weitergeholfen haben :D