Background Slideshow mit Views, Views Slideshow und BackgroundField
Eingetragen von reggaefish (190)am 27.08.2013 - 07:29 Uhr in
Hallo zusammen,
ich habe eine kleine Frage bei der ich irgendwie auf dem Schlauch stehe.
Auch diverse Posts und Foreneinträge haben mich noch nicht ans Zie gebracht...
Und zwar:
Ich hätte gerne eine Background Slideshow.
Das Background Image sollte sich immer auf die max. Größe skalieren.
Da ich mehrere Background Slideshows anlegen möchte, bin ich bisher folgendermaßen vorgegangen:
Aktivierte Module:
- BackgroundField
- Views
- Views Slideshow (+ zugehörige Libraries und jQuery zeug)
Inhaltstyp "Background Image" erstellt
Feld "BackgroundField" eingesetzt.
Ein Taxonomie Feld dazu, für spätere Filter
Ich habe eine View angelegt die "Felder" aus "Inhalten" zeigt im Style "Slideshow".
Das ganze als Block, da es quasi hinter einen anderen Inhaltstyp gelegt werden soll.
So weit so gut.
Wie ich eine normale Slideshow anlege in einem Block oder auf einer Seite ist kein problem, klappt alles wunderbar.
Lege ich meine Slideshow OHNE "BackgroundField" mit einem Normalen ImageField an klappt alles bestens.
Ich kann sie ja mittels z-index ganz nach hinten setzen, allerdings kann ich dem Block nicht sagen "Nimm die komplette Bildschirmgröße als Fläche ein".
Deswegen über ein Background Image und dem CSS Teil:
{
background-repeat: no-repeat;
background-position: center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Meine angelegte Slideshow "läuft" auch soweit, aber es findet kein Wechsel der Hintergrundbilder statt.
Es wird immer nur das erste angezeigt, der Wechsel findet nicht statt.
Vielleicht hat jemand eine Idee oder weiss einen einfacheren Weg.
Vielen Dank und Grüße
Reggaefish
- Anmelden oder Registrieren um Kommentare zu schreiben
Das wirst Du nur über
am 27.08.2013 - 08:58 Uhr
Das wirst Du nur über JavaScript/jQuery hinbekommen können. Du mußt dazu an das Programm eine unsichtbare Bilderliste übergeben und das Background Image mittels JavaScript zeitgesteuert austauschen lassen.
Beste Grüße
Werner
How to create a background
am 27.08.2013 - 09:42 Uhr
How to create a background slideshow using Views Slideshow?
Moinsen, Die Variante mit
am 27.08.2013 - 12:56 Uhr
Moinsen,
Die Variante mit views ist recht umständlich. Wie in dem Link von quiptime beschrieben, musst Du dafür ein View- Template erstellen. Wesentlich einfacher ist es, wie von Wla vorgeschlagen, die Bilder in ein Verzeichnis zu packen und ein entsprechendes JavaScript über Dein Theme einzubinden. Noch ein wenig CSS und fertig. Wenn Du willst, kannst ich Dir ein fertiges Script rauskramen und posten, wo Du nur noch die Zeitintervalle und den Pfad zu den Background- Images anpassen musst.
Danke schonmal für die
am 27.08.2013 - 14:39 Uhr
Danke schonmal für die Antworten... So langsam kostet mich das wirklich ein paar Nerven ;-P
Also. Ich bin immerhin schonmal soweit, dass ich den Pfad der Bilder im View ausgegeben bekomme.
Wenn ich jetzt aber versuche mittels "Rewrite Output" mit dem [uri]-Pattern ein Background Image im Sinne von
<div class="teststyle" style="background-image: url ('[uri]');">test</div>zu erstellen, killt es mir immer den kompletten style-Tag, egal was drin steht.
Scheint was tieferliegenderes zu sein, siehe auch
Drupal.org link
Vielleicht nochmal meine Idee, was ich gern erreichen würde:
Ich bin dabei eine Website zu erstellen.
Die Website hat (logischerweise) mehrere Seiten ;-)
Auf jeder dieser Seiten soll nun eine Background-Image Slideshow stattfinden.
Im Idealfall mit Steuerungselement, sprich der User kann vor und zurück schalten.
Aus Pflege-Technischen Gründen wäre es natürlich fantastisch, wenn ich das irgendwie mit Views hinbekäme und später einfach nurnoch Bilder über ein Inhaltstyp hochlade, ihnen einen Taxonomy-Tag verpasse und sie dann automatisch auf der richtigen Seite im Background auftauchen...
Über dein Script würde ich mich aber trotzdem freuen Glycid :-)
Danke schonmal und Grüße
Reggaefish
Moin, hier mal das Script. In
am 28.08.2013 - 11:40 Uhr
Moin,
hier mal das Script. In meinem Fall ging es um drei Background- Images :
(function($){
var imgArr = new Array( // Path Background Images
'sites/default/files/slideshow/slide1.jpg',
'sites/default/files/slideshow/slide2.jpg',
'sites/default/files/slideshow/slide3.jpg'
);
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 8000);
/* image rotator */
function changeImg(){
$('#page-wrapper-front').animate({opacity: 0}, 500, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') center no-repeat fixed');
}).animate({opacity: 1}, 500);
}
})
(jQuery);
Das Script dann im Theme Verzeichnis abspeichern, z.Bsp. slider.js im Verzeichnis js und dann über die themename.info einbinden:
scripts[] = js/slider.jsPer CSS wird dann nur das erste Background Image eingefügt (Pfad ggf. anpassen):
.klasse_des betreffenden_elements(body) {background:url(../../../../default/files/slideshow/slide1.jpg) no-repeat center fixed; }Den Upload kannst Du hier auch über einen Inhaltstyp mit entsprechenden Feldern realisieren.
So wie ich Deinen letzten Post verstehe, möchtest Du jedoch für jede Seite verschiedene Background Images sliden lassen. Wenn es nur wenige Seiten sind, kannst Du das Script für jede Seite anpassen und nur für diese einbinden. Bei einer größeren Anzahl müsstest Du das Script um einen Automatismus erweitern, damit die entsprechenden Bilder geladen werden. Das würde über den URL funktionieren. Der Upload könnte direkte auf der node/edit Seite realisiert werden.