[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.
