Contao-Camp 2024
Ergebnis 1 bis 2 von 2

Thema: [Vorschlag] Fullsize Image Background Slider ohne Erweiterung einsetzen

  1. #1
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard [Vorschlag] Fullsize Image Background Slider ohne Erweiterung einsetzen

    Hallo,
    im folgenden ein Beispiel für ein Fullsize Image Background Slider (Transition Fade) mit Contao 4.4.x / PHP 7.x.

    Hierzu bitte den jquery bxslider downloaden und in ein entsprechendes Verzeichnis kopieren.
    Die Dokus zu den Options Möglichkeiten hier:

    In der Dateiverwaltung einen (öffentlichen) Ordner mit den gewünschten Fotos anlegen und hier nur die Fotos für den Slider zur Verfügung stellen.
    Über das Template werden dann alle Fotos aus diesem Ordner herangezogen.

    In eurem "template" Verzeichnis ein template "j_bxslider_fullsize_background.html5" mit unterem Inhalt anlegen.

    In der Zeile:
    PHP-Code:
    $folderID '[EUERE VERZEICHNIS ID]'
    eure ID des jeweiligen Dateiordners ersetzen. Diese findet ihr in der Dateiverwaltung über das blaue "Info" Symbol des Ordners.

    Die Pfadangaben in den Zeilen:
    Code:
    $GLOBALS['TL_JAVASCRIPT'][] = '[EUER PFAD]/jquery.bxslider.min.js|static';
    $GLOBALS['TL_CSS'][]	    = '[EUER PFAD]/jquery.bxslider.min.css|static';
    entsprechend anpassen.

    Das CSS habe ich zur Übersicht hier in das Template geschrieben. Besser ist diese Angaben zu löschen und dann in eurer eigenen CSS Datei hinzuzufügen.

    PHP-Code:
    <?php 

    $GLOBALS
    ['TL_JAVASCRIPT'][] = '[EUER PFAD]/jquery.bxslider.min.js|static';
    $GLOBALS['TL_CSS'][]        = '[EUER PFAD]/jquery.bxslider.min.css|static';

    // inline CSS for demo - better delete and use it in regular CSS file 
    $GLOBALS['TL_HEAD'][] = "
    <style>
    .bx-wrapper {
      height: 100% !important;
      width: 100% !important;
      top: 0;
      left: 0;
      border: 0px solid #fff;
      position: fixed;
      z-index: -1 !important;
      -webkit-box-shadow: none;
      box-shadow: none; 
    }

    .bx-viewport {
      position: absolute;
      top: 0;
      left: 0;
      height: inherit!important;
    }

    .slider-wrapper-background  {
        height: 100%; 
    }

    .slider-wrapper-background>div {
        height: 100% !important;
        width: 100% !important;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    /* overall darken images */
    .slider-wrapper-background>div::before {
      position: relative;
      display: block;
      content: '';
      width: auto;
      height: 100%;
      background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);
    }
    </style>
    "


    // Set the folder-ID form Contao file management
    $folderID '[EUERE VERZEICHNIS ID]';
    $dom "";

    // get files from folder
    $files = \FilesModel::findByPid(\StringUtil::uuidToBin($folderID)); 
    //var_dump ($files);

    foreach($files as $file) {
      
    $dom .= '<div style="background-image: url(\''.$file->path.'\');"></div>';
    }

    $GLOBALS['TL_BODY'][] = "
    <div class=\"slider-wrapper-background\">"
    .$dom."</div>
    <script>
    jQuery(function($){
    $(document).ready(function() {

        $('.slider-wrapper-background').bxSlider({
            autoStart: true,
            auto: true,
            pause: 8000,
            speed: 2000,
            mode: 'fade',
            adaptiveHeight: false,
            responsive: false,                
            preloadImages: 'visible',
            infiniteLoop: true,
            easing: 'linear',
            touchEnabled: false,
            pager: false
        });
    });
    });
    </script>
    "
    ;

    ?>
    Das Template dann entweder direkt in den Seitenlayouts aktivieren oder in einem Artikel via HTML-Inhaltselement und Insertag {{file::[EUER TEMPLATE PFAD]/j_bxslider_fullsize_background.html5}} inkludieren.

    Hinweis:
    Dieses Beispiel berücksichtigt nicht eure vorhandenen CSS Angaben - Diese sind gegebenenfalls anzupassen z.B. damit der Hintergrund unter den eigentlichen Inhalten teilweise sichtbar wäre ...

    Solltet Ihr die Inhalte des Ordners ändern (Fotos hinzufügen/löschen) - Dann im Anschluß in der Dateiverwaltung die Synchronisierung anstoßen.
    Geändert von Franko (13.06.2018 um 15:49 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  2. #2
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Nachtrag:
    Zur Zeit erhalte ich die Fotos aus dem Verzeichnis in der Reihenfolge "as is".
    Eine alphabetische Sortierung wäre evtl. wie folgt möglich (ersetzt die obige foreach Schleife mit):

    PHP-Code:
    // sort
    $items = array();

    foreach(
    $files as $file) {
      
    $items[] = $file->path;
    }
    sort($items);

    foreach(
    $items as $item) {
      
    $dom .= '<div style="background-image: url(\''.$item.'\');"></div>';

    Allerdings werden hier zwei loops durchgeführt. Evtl. habt Ihr hierzu eine elegantere Lösung ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •