Druckbare Version
Zitat:
Zitat von ways2web
hallo, das heisst das ich für die komplette website nur einen hintergrund verwenden kann?? kennst du dich mit der pageimages extension auch aus??
was ist wenn ich das mit der zeitsteurung über platzhalter und dann über ccs regle??
greetz matp
Hallo zusammen
Ich brauche eure Hilfe. Weiss nicht mehr weiter wo der Fehler liegen könnte...
Ich habe die page_images erweiterung installiert. Auf www.loeffler-jost.ch funktioniert dies einwandfrei. Dies läuft noch auf Contao Version 2.9.5. Habe dies nun auch versucht mit Contao Version 2.10.3 auf www.loeffler-web.ch/maler, da bekomme ich es aber nicht hin. Der Hintergrund scrollt mit, ist nur im Hauptfenster (definierte Breite von 960 im Seitenlayout) anstelle oben links vom Bildschirm ?
Ich meinte ich bin genau nach Anleitung vorgegangen. Brauche ich in 2.10.3 immer noch die .tpl templates oder die .html5. Oder liegt es sonst noch wo ?
Was ich noch festgestellt habe ist, dass es sich an das Layout anpasst. Also entgegen der Anleitung, wenn ich das Modul "Background" in die Fusszeile einpflege, dann kommt es in der Fusszeile, wenn in der Kopfzeile oder wo anders, erscheint es dort, aber immer nur innerhalb meiner definierten Seitenlayoutbreiten von 960px. Es scheint, dals ob es das moosize.css nicht schluckt oder ignoriert. Hat es da noch ein Bug oder habe ich was übersehen?
Wäre dankbar um einen hilfreichen Hinweis. Ich sehe unterdessen nichts mehr.
Vielen Dank und Grüsse
Michi
nein, nicht einen.. du kannst ja soviele bilder reinladen wie du willst! dann gibt es halt nen fade oder sonstigen effekt zum bildübergang: siehe hier: http://fz45.ways2web.de musste nen moment warten bis die bilder wechseln..Zitat:
Zitat von matp
aber du kannst halt derzeit nicht einen hintergrund auf eine bestimmte seite festlegen.
mit den platzhaltern musst du mal probieren.. zeitsteurung hat mich da nie interessiert.. aber das mit den bildern pro seite wäre schon.. muss man mal den Dev fragen bzw nen featurerequest setzen... vielleicht geht da ja was
vg
ways
ich antworte mal nur auf den teil.....den rest würd eich mal als eigenen thread im extension forum stellenZitat:
Zitat von svr
was du brauchst kommt drauf an, was du eingestellt hast.. wenn du html eingestellt hast, brauchst du die html5 templates... wenn du xhtml eingestellt hast.. dann die xhtml templates
Hallo ways2web
Vielen Dank für Deine Antwort. Ich habe mal nachgeschaut.
Bei meinen Einstellungen steht, dass ich .tpl, .html5 etc erlaube. Habe nun aber trotzdem mal die Templates auf .html5 angepasst, da ich .html eingestellt habe.
Leider hat darauf hin noch nichts funktioniert.
Anschliessend habe ich beim Seitenlayout die Reihenfolge der .css geändert und das moosizer.css an erste Stelle gesetzt und siehe da, es funktioniert einwandfrei ;)
Ob es nur an dem lag weiss ich nun auch nicht genau, aber scheint das die Reihenfolge der css eine Rolle spielen könnte.
Vielen Dank und Grüsse
Michi
UPDATE:
Danke an Lengen1971 er hat mir gezeigt, dass ich in meiner Anleitung ein falsches Seitenverhältnis drinen habe.
Im Java-Code:
Verhältnis: 1,333:1Code:options: {
startwidth: 640,
startheight: 480,
Im Java-Code (NEU):
Verhältnis: 1,6:1Code:options: {
startwidth: 640,
startheight: 400,
lg Matthias
hallo,
ich habe das Vollbildhintergrundbild wie im tutorial eingebaut und habe ein Problem...
sobald ich das Hintergrundbild Modul (also seitenbilder) nicht mehr auf einer Seite einbinde, funktioniert alles was mit javascript zu tun hat nicht mehr !! (noobslider, megamenu ...)
wie könnte ich das Problem beheben? wo liegt der fehler?
ok der Fehler war relativ einfach:
ich hatte ausversehen auch in Templates mosize.tpl aktiviert, wo er gar nicht eingebunden war... :rolleyes:
Hey,
ich habe Version 2.11.0 installiert und habe nach folgendem tutorial ein fullsize background Bild eingebunden:
http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer. Top Anleitung übrigens, danke dafür!
Ich habe "page_images 1.3.1 stable" installiert und alles funktioniert auch, aber aus irgend einem Grund wird das Hintergrundbild zweimal eingebunden (siehe: hier). Das wäre nicht weiter schlimm könnte man meinen, da die Bilder ja übereinander liegen, aber wenn ich das Browserfenster bewege, dann verhält sich das darunterliegende Bild anders als das Obere und das sieht kaputt aus!
Hab alles dreimal gecheckt und bin für jeden Hinweis dankbar! Bin neu im Forum und hoffe, dass ich meine Frage an der richtigen Stelle gepostet habe… (?!)
Hi.
Wie einige andere Anwendungen auch, wird es wohl ein Problem mit der neuen Mootools Version innerhalb von Contao 2.11 geben, nehme ich zumindest an.
Allerdings... Kleiner Tipp... überdenke mal, ob du da wirklich ein Hintergrundbild von 2,5 MB reinpacken willst. Gerade diese Hintergundtechniken sind doch dafür gedacht eben nicht so riesige Bilddaten in den Hintergrund zu packen.
Gruß
Thomas
Stimmt 2.11 habe ich irgendwas gelesen, was ist den dort genau?
Habe 2.10.4 instsalliert da gehts, würde mich jetzt total nerven wenn es bei 2.11 nicht gehen würde.
Da ich gerade an der Erwetirung arbeite oderzu 80% schon fertig bin :eek:,
Ja 2,5 MB ist bisschen zu groß :)
Wenn du Photoshop hast gehe auf "Datei" - "Für Web und Geräte Speichern" und wähle dort ein JPEG aus mit 60-80 %.
Davor würde ich noch schauen ob das Bild auf 72 DPI eingestllt ist. Bild - Bildgröße und dann auf 72 DPI einstellen.
Dann ist das Bild um einiges kleiner.
Und vorallem steht es bei dir 2 mal im Quellcode drinnen
Sieht aus als hätest du es bei Seitenlayouts 2 mal drinenn.Code:<!-- indexer::stop -->
<div id="passepartout">
<div id="supersize">
<img class="activeslide" src="tl_files/tcm-images/fullsize/accu.jpg" width="2560" height="1600" alt="Traditionelle chinesische Medizin in Mainz" />
</div>
</div>
<!-- indexer::continue -->
</div>
<!-- indexer::stop -->
<div id="passepartout">
<div id="supersize">
<img class="activeslide" src="tl_files/tcm-images/fullsize/accu.jpg" width="2560" height="1600" alt="Traditionelle chinesische Medizin in Mainz" />
</div>
</div>
lg Matthias
Nicht nur die Dateigröße... vor allem die Abmaße sind zu viel... lange Seite 1200 reicht völlig.Zitat:
Zitat von Messa
Gruß
Thomas
Vorwiegend ist an der Größe der Daten die falsche Handhabung mit der Speicherung zuständig.
Wenn ich die Bilder mit dem Format von mir mache sind sie 200 kb groß und sicher kann man die Abmessung kleiner machen ist ja jedem selbst überlassen :)
Denoch denke ich, dass sein Fehler daraus kommt, dass er 2 mal das Bild einbindet!
lg Mattthias
oje, bin ich langsam! Danke für das schnelle feedback. Das mit der Dateigröße ist mein Fehler, ich weiß. Habs mittlerweile runtergerechnet. Ist jetzt noch ein paar 400 KB groß, also ok. In der Anleitung steht halt ein Format von 2560x1600. Ich hab´ja auch schon andere Methoden ausprobiert, also nur mit css, aber irgendwie bin ich dabei hängengeblieben, fühlt sich irgendwie gut an. ich hab das auch noch in einer 2.10.4er Version am Start, selbes "Problem".
Ich bin exakt nach dem Tut vorgegangen. Binde das dann als Modul auf der Seite ein. Ich vermute, das liegt an der Möglichkeit, ein default-Bild auszuwählen (und das muss man machen) und dann nochmal eins als Seitenbild. Aber auf der we.are.cc Seite ist es im quellcode nur einmal drin!
Das ich es zweimal drin habe weiß ich, das ist ja genau das Thema - ich will ja eigentlich wissen wieso. Hier mal ein paar screenshots, Bilder sagen ja bekanntlich mehr als Worte… danke schonmal für die Hilfe!!
Anhang 6789
Anhang 6790
Anhang 6791
Ja wie gesagt.
Der Script geht sicher :)
Habe es bei einer 2.10.4 auch drinnen klappt super.
Irgenwo hast du einen Fehler drinnen so das, dass Bild 2 mal reingeladen wird.
Denke das das Modul an 2 Stellen drinne ist.
Wahrscheinlich auf der Seite und im Seitenlayout.
Es reicht wenn es im Seitenlayout drinnen ist.
Bild kann durchaus kleiner sein Pixel.
Siehst eh gleich wenn es zu Pixelig wird bei einem großen Bildschirm bist du du klein unterwegs.
lg Matthias
ahh! tiptop! das wars… habs raus. endlich. perfekt. vielen dank, ich habs jetzt nur noch im seitenlayout drin. oh no :eek:
Wie oben geschrieben.
Wird es (Hoffentlich) bald die Erweiterung geben.
Muss nur noch die Zeit finden um eine Kleinigkeit zu programmieren.
lg Matthias
Ich habe schon ein paar Kombinationen aus einem Fullsize-Background-Script (leider nicht zwingend MooSize, eher nur CSS) und der Slideshow2-Erweiterung gesehen. Diese Kombination würde mich eigentlich am meisten reizen, da sich daraus eine Vielzahl an Möglichkeiten bilden würde.
Werde mal ein wenig experimentieren und mir "Fremdcode" anschauen.
Hat jemand damit Erfahrungen?
Musst eigentlich auch gut klappen.
Es gibt auch Moosizer mit Slideshow. :)
Irgendwo in diesem Post auf einer anderen Seite.
Habe ich beschrieben wie es geht eine Slideshow zu machen :D
lg
Hallo!
ich habe die Anleitungen im WIKI mehrmals durchgearbeitet.
Bei mir erscheint das Bild - allerdings nur im eingebundenen Modul.
Nicht aber im Background (body)...wo ist mein Fehler?
Conato 2.10.4
...ich möchte erstmal nur ein BIld für alle Seiten haben.
(ich verstehe das Modul doch richtig - es skaliert mein eingebundenes
Bild über die ganze Fläche (Browser) im Hintergrund?
vllt. hat einer einen Tipp.
Danke/Grüße
Mehrfach habe ich versucht, MooSize anhand des Tutorials unter Contao 2.11.2 (HTML5) zum Laufen zu bringen. Immer traten zwei gravierende Fehler auf:
1. Moo Accordion funktioniert überhaupt nicht mehr!!!
2. JavaScript Error: $(this.options.bgElement) is null
Also habe ich versucht, mit einfacheren Bordmitteln einen Fullsize-Background zu generieren. Mit Erfolg :D!
Folgendermaßen bin ich vorgegangen:
1. Wie im Tutorial beschrieben PageImages installieren und ein entsprechendes Modul (mit CSS-ID mod_fullsize_bg) anlegen. ABER: Das Modul nicht im Layout einbinden!
2. fe_page.html5 anpassen wie folgt:
Hierdurch wird das Modul updatesicher direkt unterhalb des body-Tags im Seiten-Template eingebunden.PHP-Code:...
<body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
{{insert_module::1}}
<div id="wrapper">
...
3. pageimagesimage.html5 anpassen wie folgt:
In dieser Zeile wurden die Größenangaben (width, height) entfernt, um diese später extern per CSS einzustellen.PHP-Code:...
<img src="<?php echo $this->src; ?>" alt="<?php echo $this->alt; ?>">
...
4. Folgende Stylesheets erzeugen:
Das wars ... funktioniert einwandfrei :DCode:div#mod_fullsize_bg,div#mod_fullsize_bg figure
{
width:100%;
margin:0;
padding:0
}
div#mod_fullsize_bg figure img
{
width:100%;
position:fixed
}
Alle Teile des Tutorials bzgl. MooSizer können komplett entfallen.
Feedback hierzu würde mich interessieren.
Sitting Bull
1. Schön. Danke. ;)Zitat:
Zitat von Sitting Bull
2. Hast du das mal zur Anschauung?
3. Hast du Browserkompatibilität getestet?
4. Trag das doch im Wiki als Alternative oder Lösung 2.11* dazu.
Gruß
Thomas
Ich habe auch die Lösung mir der Anpassung der fe_page verwendet um das Bild wirklich in den Hintergrund zu bekommen.Zitat:
Zitat von zetlander
siehe Post von sitting bull
Ja, dafür ist dasZitat:
(ich verstehe das Modul doch richtig - es skaliert mein eingebundenes
Bild über die ganze Fläche (Browser) im Hintergrund?
Das JavaScript Problem hab ich bis jetzt noch nicht gesehen, verwende allerdings auch kein Accordion...Zitat:
JavaScript Error: $(this.options.bgElement) is null
Moin, Moin!
puhh, es bleibt für mich schwierig...
Also das Bild taucht mit der Anleitung von "Sitting Bull" nur auf wenn ichs im Seitenlayout als Modul dann doch aufrufe!
Dann wird es aber nur horizontal skaliert und mein Seitenmenü erscheint doppelt - oben in der Seite?
...mir fehlen hier doch einige zwischen Schritte...
ich benutze auch kein HTML5! ist das ein Problem mit dem Template?
CSS-ID mod_fullsize_bg anlegen - ist das, dass Modul (Seitenbilder)?
ich werde versuchen mich nochmal durchzukämpfen...
Für Hinweise bin sehr dankbar ;)
Grüße!
zu 2) Nein, zur Anschauung gibt es noch nichts, befindet sich aktuell nur in meinem internen Testbereich.Zitat:
Zitat von tblumrich
zu 3) Ja, Browserkompatibilität wurde getestet (>IE8, Safari, Firefox, Chrome, Opera). Funktioniert überall problemlos.
zu 4) Ich bin zu blöd für das Wiki. Wie kann man da eigene Beiträge anlegen? Hab jetzt ne Weile rumgesucht und keinen Button dafür gefunden?!?!?! :confused:
Grüße
Sitting Bull
neee... das ist wie in jedem Wiki.. wenn man es nicht gesagt bekommt.. findet man es niemals raus!!! bist also nicht zu blöd!Zitat:
Zitat von Sitting Bull
am besten du gibts die url ein im wiki, so wie du deinen artikel im wiki anbieten/finden willst.. wiki sagt dann.. Beitrag nicht gefunden, legen sie diesen an.. blabla...
ne nullnummer im ganzen wikiprinzip.
gruss
Hi ways2web,Zitat:
Zitat von ways2web
vielen Dank für den Tipp, dann mache ich mich demnächst mal dran.
Aber mal ganz ehrlich ... kann man das mit dem Wiki nicht intelligenter gestalten?!
Grüße
Sitting Bull
Hallo,
bei mir funktioniert es leider bei einer Contao 2.11.2 Version nicht mehr. Auch nicht, wenn ich so vorgehe, wie es Sitting Bull beschreibt. Bei 2.11.0 lief es noch ohne Probleme.
Bei 2.11.2 wird das Bild zwar angezeigt, allerdings nicht verkleinert oder vergrößert. Die Alternative: Die Erweiterung bgStretcher funktioniert nicht mit einem StickyFooter...
Hat noch wer das Problem? Ich habe es nun schon drei mal von vorne erstellt, allerdings immer ohne Erfolg.
Grüße
Hallo Messa, danke für den Moosizer plus Erweiterungen.
Ich habe nun eine Seite mit dem Moosizer und Pageimages erstellt, da es super funktioniert hat nicht den Background des Body mit dem Hintergrundbild zu belegen, sonder ein im Content liegendes Div. Dieses ist bei mir nicht absolut positioniert sind, sondern relativ und soll damit im floating mitmischen. Soweit ist alles wie ich mir das gewünscht habe. Im js bin ich auch über slideshow=1 gestolpert und hatte mich schon gefreut, doch war schnell klar dass es so einfach nicht geht.
Dann habe ich hier deine Nachreichung zu diesem Thema entdeckt, bin aber verwundert wie umfangreich der Code ist. Da ich wirklich nur eine slideshow brauche, ohne Buttons etc. stellte sich mir die Frage ob in dem Code einfach zu viel Funktionalität für mich steckt?
Ich habe mir zum Beispiel auch die Erweiterung imageslider angeschaut, das wäre was ich mir vorstelle und der Code ist überschaubar, aber das kann ich nicht über die Seite stretchen. Ließe sich der imageslider Code nicht auch irgendwie in den Moosizer integrieren, oder stelle ich mir das zu einfach vor und sollte doch mal die umfangreiche Erweiterung anwenden?
Danke für Hilfe
Dann passt doch nur etwas mit dem moosizer script nicht, das sollte aber kein größeres Problem sein.Zitat:
Zitat von freak_me11
@jo.s
Du hast recht, ich habe wie du siehts denn Java-Code nicht selber geschrieben.
Bin ihn nur oberflächlich durchgegangen.
Bin immer noch an der Erwweiterung dran :/ finde einfach keine Zeit.
Werde im Zuge der Programmierung auch den Java-S anschauen und kürzen.
lg Matthias
Hallo zusammen,
da es mit der Slideshow noch nicht so ganz bei mir funktionierte, habe ich einen recht einfachen Weg gewählt, um das jQuery Supersized-Script einzubinden.
Dabei nutze ich die Erweiterungen "jquery" und "header_code" mit den aktuellen Versionen.
Es funktioniert in allen Browsern, auf mobilen Endgeräten und durch die Erweiterung "header_code" binde ich das Settings-Script für die Slideshow ein, mit individuellen Links zu Bildern im Dateisystem. So habe ich ebenfalls für jede Unterseite eine individuelle Fullsize-Slideshow.
viele Grüße,
Daniel
Nachtrag: Ich geb die Anleitung schnell an, da's ganz schnell geht:
1. Von http://buildinternet.com/project/sup.../download.html die aktuelle Version runterladen.
2. Erstellt im root-Verzeichnis von Contao den Ordner js und ladet die Dateien jquery.easing.min.js und supersized.3.2.7.min.js per FTP hoch.
3. Installiert die Erweiterung jquery und aktiviert es im Seitenlayout. Installiert die Erweiterung header_code.
4. Erstellt im Ordner tl_files den Ordner seitenbilder und ladet Eure Bilder hoch, in diesem Fall 001.jpg, 002.jpg, 003.jpg - für's Erste.
5. Geht auf Eure Seitenstruktur und bearbeiet die jeweilige Seite. Fügt den nachfolgenden Headercode ein, und tauscht entsprechend die Bildlinks aus:
6. Erstellt das nachfolgende CSS und bindet dieses ebenfalls in die Seitenstruktur ein:PHP-Code:<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 12500, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1500, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 0, // Keyboard navigation on/off
performance : 3, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 960, // Min width allowed (in pixels)
min_height : 640, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'false', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
progress_bar : 0, // Timer for each slide
mouse_scrub : 0,
slides : [ // Slideshow Images
{image : '../../tl_files/seitenbilder/001.jpg'},
{image : '../../tl_files/seitenbilder/002.jpg'},
{image : '../../tl_files/seitenbilder/003.jpg'}
]
});
});
</script>
Das war's schon. :-)PHP-Code:/*
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.2.7
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
*/
* { margin:0; padding:0; }
body { background:#111; height:100%; }
img { border:none; }
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
Liebe Grüße,
Daniel
Hi an Alle,
ich bin absoluter Anfänger was Contao betrifft. Ich bin gerade dabei eine relativ einfache kleine HP für ein Frisörsalon zu gestalten mit Fullsize-Background. Ich bin dabei exakt so vorgegangen wie Messa es beschrieben hat und bin fast am verzweifeln.
Das Bild wird zwar dargestellt allerdings nur im Footer und nicht im Hintergrund wie gewünscht. Es soll nur ein Fullsize-Background für alle Seiten existieren und sich entsprechend der Auflösungen anpassen.
Ich bekomme beim besten Willen kein Fullsize-Background hin. Ich nutze Contao 2.11.0 und page_image 1.3.1 stable.
Die URL lautet: www.haargenau-kunz.de
Hat vielleicht jemand einen Tipp für mich? Wie ich das bewerkstelligen könnte?
So soll das Layout aussehen:
In den Options ist kein bgElement angegeben
bgElement: ''
Das wirft natürlich nen Fehler
$(this.options.bgElement) is null
http://www.haargenau-kunz.de/
Line 162
Hmmm....ok! Habs gefunden! Vielen Dank schon mal....
frage mich nur, welchen Wert ich in den Options vergeben muss oder was ich überhaupt eintragen soll.
Hätte nicht gedacht, dass es so schwer wird. Vielleicht sollte ich die Seiten ganz klassich umsetzen.
Muss die Seite bis Sa. umgesetzt haben.....:(
Wenn du das Tut Schritt für Schritt durch machst geht es.
Leider komme ich moment einfach nicht dazu um das Modul fertig zu machen. :/
Hast du die Scripte aktiviert?
Hast du die CSS definiert?
Hast du die TPL / XHTML / HTML 5 angepass?
lg Matthias
Hallo Messa...
ja, ich bin exakt Schritt für Schritt dem Tut nachgegangen. Liegt es vielleicht an den Versionen? Wie gesagt, ich bin auch blutiger Anfänger und schließe natürlich Fehler nicht aus. Jedoch habe ich jetzt zum 100x meine Settings in Contao durchgestöbert und auch das Tut nun zum 3x komplett neu durchgegangen und kann nichts finden?!?
Bringt es vielleicht etwas, wenn ich jemanden den Zugang zum Backend gebe...vielleicht sieht ein Profi mehr wie ich???
Dein Template kommt im FE nicht an. Der mooSizer wird ja auf ein Element mit der ID 'supersize' aufgesetzt, welches bei dir nicht vorhanden ist.
BTW Hast du jquery.easing.min.js, supersized.3.2.7.min.js und das Script darunter im Head wegen dem mooSizer da rein gepackt? Das brauchst du nämlich nicht.
Ja, hatte parallel zu dem Tut von Messa noch die Variante von djo getestet, was mich aber auch nicht weiter gebracht hat.
Nun ist der Stand so, dass ich vor lauter testen und probieren den Überblick so verloren habe. Vielleicht ist es am besten, wenn ich das Projekt nochmal bei 0 beginne, Contao neu installiere und hoffe, dass ich bis Sa. mit der Seite fertig werde.
Gibt es denn noch andere Möglichkeiten, einen einfachen Fullsize-Background für alle Seiten einzubinden? Von der Möglichkeit in CSS3 background: cover raten ja viele wegen IE8 ab.
Ich möchte mich ungern geschlagen geben und WILL umbedingt Contao lernen. Diverse Schulungs-DVDs habe ich schon durch aber die haben leider nicht das Thema "Fullsize-Background" aufgegriffen.
Lg Grüße und schon einmal ein schönes Wochenende.
Florian
Contao neu installieren brauchst du da nicht. Schau mal, warum dein Template vom Tut nicht im FE ankommt. Das ganze hat ja auch nicht wirklich was mit Contao zu tun. Kannst das Background-Image ja erstmal einfach dem BODY zuweisen.
Hallo zusammen
Ich habe die Anleitung http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer Schritt für Schritt durchgeführt. Jedoch funktioniert es bei mir nicht. Das Anliegen hat schon jemand gehabt hier da im Quelltext nicht das benötigte div vorhanden ist. Jedoch war hier das anliegen, dass keine TPL Daten erstellt und aktiviert wurden.
Jedoch hatte ich folgende probleme. Hier kurz aufgelistet:
- pageimagesimage.tpl (per FTP Sicherheitskopie erstellt und dann wie in der anleitung erklärt und aufgeführt den neuen Code eingetragen.)
- pageimages_default.tpl (gleich wie oben)
- moo_mosize.tpl (habe ich in meinem Ordnern (ftp) nicht gefunden. Wenn ich wie in der anleitung eins erstellen will, habe ich nur html5 und xhtml files die ich für das Kopieren kann, da habe ich eines mit der endung tpl gesucht und das kopier beziehungsweise angepasst.)
Wäre froh wenn mir da jemand ein Hilfestellung geben kann.
Nein, keine Sicherheitskopie - mit Contao ein Template aus dem Original erstellen, das kannst du dann bearbeiten, es ist automatisch eine Kopie, die dann im Ordner /templates/ liegt.Zitat:
Zitat von cschoeni
moo_mosize.xxx gibt es auch nicht. Du sollst ja nur irgendein Template erstellen und ihm den Namen moo_mosize verpassen, wichtig dabei ist, dass der Name mit 'moo_' anfängt, sonst kannst du es nachher im Layout nicht auswählen.
Die Endung tpl brauchst du nicht. Je nach der Ausgabe deiner Seiten nimmst du entweder die Endung html5 oder xhtml für alle obigen Templates.
Anm.: Eigentlich sollte der obere Teil des JS, die Klasse mooSizer, in eine JS-Datei ausgelagert und eingebunden werden, sodass dann nur noch das Instanziieren in das moo_xxx Template kommt (der Teil unter den vielen Sternchen). Bleibt es so, dann sollte das SCRIPT für XHTML (stört nicht bei HTML5) noch richtig maskiert werden (CDATA) siehe z.B. moo_accordion.xhtml.
ps TPL war die alte Endung für Templates, die gibt es nicht mehr. Jetzt gibt es je nach FE-Ausgabe html5 oder xhtml. Templates fürs Contao BE gibt es nur in html5, da das BE immer in HTML5 ist. Fürs FE kannst du es dir ja aussuchen.
Danke dir schon mal für die sehr schnelle Antwort. Das hatte ich mir schon fast gedacht das die endungen tpl (typolight) nicht mehr verwendet werden. Habe es nun so gemacht das ich jeweils für xhtml und für html5 die Dateien erstellt habe (siehe bild). Leider ist noch immer das Bild im Footer und nicht im Hintergrund der ganzen Seite. Wenn ich jedoch im Modul von pageimages_default auf pageimpages_css_background_example geändert und dort zeigt er mir das bild im Hintergrund jedoch ist dies im repeat modus.Zitat:
Zitat von Andreas
Ich dachte noch es wäre das CSS das mir Bauchschmerzen bereitet, kann es jedoch nicht sein, da es auch nach den änderungen z.B. die ID: #passepartout, #supersize finde ich in meinem Quelltext gar nicht.
Adresse der Seite lautet: http://contao.swisstourer.ch
Seit den änderungen funktioniert bei mir Lightscript4ward nicht mehr (unter Kontakte ein Kontaktformular). Was das problem ist weis ich nicht muss jedoch mit den änderungen zu tun haben da es vor dem konfig nocht funktionierte. Moral der geschichte Background hatte ich mit dem Firefox schon gehabt jedoch nicht für IE deshalt ging ich diesen Weg.
Das Element auf welches mooSizer aufgesetzt wird ist im Markup nicht vorhanden
Du darfst doch nicht allen Templates 'moo_' voran setzen. Nur dem Template für das JS - moo_mosize.HTML-Code:moosizer = new mooSizer({ bgElement:'supersize' });
Danke für deine Antwort. Nein das stimmt nicht so wie ich das sehe meinst du mit Markup das JS. Da habe ich folgendes drinn:Zitat:
Zitat von Andreas
- Ich habe die restlichen Templates umgeschrieben jetzt ohne moo_HTML-Code:<script type="text/javascript">
/*
MooSizer - a Mootools rewrite of: Supersized - Full Screen Background/Slideshow jQuery Plugin
License:
MIT-style license.
Credits:
Original jQuery supersized script By Sam Dunn ( <http://buildinternet.com> / <http://onemightyroar.com> )
found here: <http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/>
rewritten for Mootools 1.2 by Markus Timtner ( <http://mtness.net> ) 2009-03-27 1100-1500 GMT+1
*/
var DEBUG;(typeof(window.console) != "undefined")?DEBUG=1:DEBUG=0;//alert(DEBUG);
var mooSizer = new Class({
Implements: [Options, Events],
options: {
startwidth: 640,
startheight: 400,
minsize: .5,
slideshow: 1,
slideinterval: 5000,
bgElement: ''
},
initialize: function(options){ //if(DEBUG==1)console.log("class initialised");
this.setOptions(options);
//Define image ratio & minimum dimensions
var minwidth = this.options.minsize*(this.options.startwidth); //if(DEBUG==1)console.log("minwidth "+minwidth );
var minheight = this.options.minsize*(this.options.startheight); //if(DEBUG==1)console.log("minheight "+minheight );
var ratio = this.options.startheight/this.options.startwidth; //if(DEBUG==1)console.log("ratio "+ratio );
this.resizenow(minwidth,minheight,ratio);
window.addEvent('resize', function(){ //if(DEBUG==1)console.log("resizenow event fired");
this.resizenow(minwidth,minheight,ratio);
}.bind(this));
},
resizenow: function(minwidth,minheight,ratio) { // if(DEBUG==1)console.log("resizenow called");
//Gather browser and current image size
var imagesize = $(this.options.bgElement).getSize();
var imagewidth = imagesize.x; //if(DEBUG==1)console.log("imagewidth "+imagewidth );
var imageheight = imagesize.y; //if(DEBUG==1)console.log("imageheight "+imageheight );
var clientsize = window.getSize();
var browserwidth = clientsize.x; //if(DEBUG==1)console.log("browserwidth "+browserwidth );
var browserheight = clientsize.y; //if(DEBUG==1)console.log("browserheight "+browserheight );
//Check for minimum dimensions
if ((browserheight < minheight) && (browserwidth < minwidth)){ //if(DEBUG==1)console.log("within minimum dimensions");
//$(this).height(minheight);
$(this.options.bgElement).setStyle('height',minheight);
//$(this).width(minwidth);
$(this.options.bgElement).setStyle('width',minwidth);
}
else{
//When browser is taller
if (browserheight > browserwidth){ //if(DEBUG==1)console.log("browserheight > browserwidth");
imageheight = browserheight;
$(this.options.bgElement).setStyle('height',browserheight);
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );
$(this.options.bgElement).setStyle('width',imagewidth);
if (browserwidth > imagewidth){ //if(DEBUG==1)console.log("browserheight > imagewidth");
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );
$(this.options.bgElement).setStyle('width',browserwidth);
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );
$(this.options.bgElement).setStyle('height',imageheight);
}
}
//When browser is wider
if (browserwidth >= browserheight){ //if(DEBUG==1)console.log("browserwidth >= browserheight");
imagewidth = browserwidth; //if(DEBUG==1)console.log("imagewidth "+imagewidth );
$(this.options.bgElement).setStyle('width',browserwidth);
imageheight = browserwidth * ratio; //if(DEBUG==1)console.log("imageheight "+imageheight );
$(this.options.bgElement).setStyle('height',imageheight);
if (browserheight > imageheight){ //if(DEBUG==1)console.log("browserheight > imageheight");
imageheight = browserheight; //if(DEBUG==1)console.log("imageheight "+imageheight );
$(this.options.bgElement).setStyle('height',browserheight);
imagewidth = browserheight/ratio; //if(DEBUG==1)console.log("imagewidth "+imagewidth );
$(this.options.bgElement).setStyle('width',imagewidth);
}
}
}
}
});
/*************************************************************/
document.addEvent('domready', function(){
moosizer = new mooSizer({ bgElement:'supersize' });
});
</script>
- kanns evt. an den Templates liegen das die für 2.11.4 nicht ausgelegt sind und aktualisiert (Code ändern) werden müssen?
- Oder ist in dem Script oben noch ein Fehler vorhanen obwohl ich es 1 zu 1 übernommen habe?
Es tut mir leid aber ich bin leider nicht auf dem Gebiet gross geworden und lerne dies nebenbei da es mir eigelich sehr viel spass macht und ich bis anhin eigentlich nie hilfe gebraucht habe und immer alles im Internet finde, jedoch ist das ein Thema das google leider keine Antwort bereit hat.
Da im FE immer noch kein Element mit der id="supersize" ist, hast du entweder nicht den Inhalt wie aus der Anleitung ins Template eingefügt, oder das Template ist nicht dem Modul page_images zugeordnet, oder das Template wird noch nicht übernommen. Im letzten Fall hilft die Systemwartung, den tmp Ordner leeren. Das lange SCRIPT brauchst du hier nicht zu posten, das sehen wir ja auch in der Anleitung und auf deiner Seite.
Die Anleitung ist zwar alt, funktioniert aber auch in Contao 2.11.4.
Danke Andreas
Nach der Datenbereinigung in der Systemeinstellung funktioniert es einwandfrei.
hallo,
also wir sind auch blutige anfänger...ums mal vorweg zu sagen :-)
bei uns ist das problem, dass sich unser background nicht runterskaliert. es ist immer nur ein bild ausschnitt zu sehen... es wird nicht angepasst. was kann man da machen?
schöne grüße
Hallo zuckerschnute1985Zitat:
Zitat von zuckerschnute1985
Kannst du wenn möglich noch folgendes ergänzen was wichtig ist zu wissen:
1. evt einen link der Webseite damit dies angschaut werden kann
2. Deine aktuelle Contao Version die du verwendest.
3. Was du bis dato versucht hast.
Gruss
Christoph
Prüf mal im Backend von Contao unter "Einstellungen" -> "Dateien und Bilder" ob das Feld " ob das Feld "Maximale Frontend-Breite" leer ist. Falls da eine Zahl steht, gilt die (komischerweise) irgendwie auch für das Modul... Hab das mal per Zufall rausgefunden.Zitat:
Zitat von zuckerschnute1985
also hab mal nachgeschaut, steht aber leider kein wert in der zeile drin.
haben unsere seite nach der anleitung nachgebaut:
http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer
und da sollte doch eigentlich das hintergrundbild entsprechend der auflösung angepasst werden, oder? haben das pic auch in der beschriebenen auflösung hochgeladen.
es funtkioniert auch, das man verschiedene seitenbilder hat, nur das die bilder halt nicht komplett sondern im ausschnitt dargestellt werden.
wir benutzen contao vers. 2.11.4
Hi.
Die Beschreibung ist ja noch für 2.9.
Habt ihr eventuell nicht die richtige Templateendung bei der Erstellung des moo_moosize templates beachtet? TPL eh nicht mehr... wenn dann XHTML oder HTML5, je nachdem was ihr im Frontend benutzt?
Wenn ja, auch eingebunden, spricht im Seitenlayout angehakt?
Klingt nämlich danach, als wenn das Moosize-Script nicht arbeitet.
Kann man das ansehen?
Gruß
Thomas
Daran wirds wohl liegen... Müssen die Pageimage-Templates auch HTML5 Endungen haben? Muss danach im Skript noch was geändert werden? Wo sind die Pageimage-Templates überhaupt eingebunden?Zitat:
Zitat von tblumrich
Danke für eure Hilfe! Tolles Forum hier :)
Edit: Wir haben das grad alles probiert und irgendwie sieht man das Bild nicht mal mehr durch transparenten Content-Bereiche... :(
Könnte mal einer gucken bitte? Ist nur das Modul drauf und die erste Seite nach der Anleitung von Contao-Wiki...
Der Link ist: www.stefaniekloss-fanclub.de/contao/contao
Benutzername: contao2
Passwort: contao1234
Einloggen im Backend bringt nix, weil man nichts zu sehen bekommt.
Also wenn ich http://www.stefaniekloss-fanclub.de/contao/ öffne, wird ein Hintergrundbild meiner Meinung nach
korrekt geladen und verkleinert/vergrössert, je nach Browserfenster.
Wenn ich aber nur http://www.stefaniekloss-fanclub.de öffne, kommt eine Seite mit Frames?
Liebes Forum,
ich habe auch nach der Anleitung im wiki (page_images 1.3.1) mit Contao 2.11.4 versucht die Erweiterung zu installieren. Habe die Templates entsprechend der Anleitung mit der Endung .html5 angepasst. Wo wird eigentlich auf das Template "pageimagesimage.html5" zugegriffen, da in meinem Quellcode kein "div id="passepartout" existiert sondern nurDas Modul habe ich im Seitenlayout in den header eingebunden, aber es skaliert sich leider nicht auf das Browserfenster. Wahrscheinlich weil das CSS nicht greift.HTML-Code:<figure class="image_container">
*¶
<img width="2560" height="1600" alt="DSC01391" src="tl_files/tom_wolf/pageImages/DSC01391.jpg">
*¶
</figure>
Hat jemand eine Idee?
Gruß Goody
Du musst auch den Code abändern :)
Steht ja so in der Anleitung.
Es ist wichitig, dass der aufbau gleich ist sonst funktioniert es nicht.
Für HTML5 musst du es anpassen.Code:<div id="passepartout">
<div id="supersize"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img class="activeslide" src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
</div>
Du kannst nicht das original verwenden der Erweituerng verwenden, da diese nicht fullsize unterstützt!
lg Matthias
Hier die Alpha meiner Erweiterung.
https://www.contao-community.de/show...410#post217410
lg Matthias
Hab nur 1 Background image, das auf allen Seiten gleich sein soll.
Problem, der Internet Explorer (8 und die anderen IEs wahrscheinlich auch)
Habs mit cover (s.u.) versucht, aber der IE macht kein resize auf die Grösse des Browserfensters.
schade eigentlich, das wäre zu einfach gewesen.
background: url(images/bg-kaese.jpg)no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Ausserdem, kommt die Transparency im IE sehr hässlich raus. Wie löse ich das mit Contao am besten??
Da ist mein CSS wie folgt:
.transp60{
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0,0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.8);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#99000000, endColorstr=#99000000)";
}
Danke für Eure Tips und Tricks...
Versuchs mal hiermit für die Bildqualität http://msdn.microsoft.com/en-us/libr...8VS.85%29.aspx
Versuche auch mal -ms-background-size. Hier gibt es evtl. auch ne Lösung http://css-tricks.com/perfect-full-p...kground-image/. Ansonsten dem IE ein Bild geben, in den Hintergrund und Werte für Breite und Höhe dynamisch mit JS zuweisen.
Oder am besten dort auf ein Feature verzichten wo es nicht unterstützt wird.
@strawberry
CSS ":cover" geht auch nicht in den alten Browsern.
Vorallem bist du hier falsch :)
Hier geht es um den Mootool Script der ein hintergund Bild Fullsize macht.
http://www.css3.info/preview/background-size/ ganz unten steht welche Broweser COVER unterstützden.
Und sonst verwende meine Erweiterung.
https://www.contao-community.de/show...d-mit-Mootools
lg Matthias
Hallo Alle,
freut mich, dass Euch der MooSizer gefällt!
Auf die Frage nach der slideshow/gallery Funktion, ich hab mal eine standalone demo erstellt: [Besser spät als nie]
http://mtness.net/demos/moosimpleslideshow/
Vielleicht kann das ja einer gebrauchen.
Kind regards, mtness.
@mtness Das Demo gibt es doch schon ewig :)
Hab es schon vor über 1 Jahr gesehn.
Vorallem habe ich in diesem Beitrag weiter vorne schon beschrieben.
Wie man die Slideshow auch verwenden kann :)
Und interessanter wäre wenn du den Script-Link auch noch posten würdest.
http://mtness.net/demos/moosimplesli...ideshow.1.0.js
Aso und noch was ich hoffe es passt für dich habe für eine freie Erweiterung deinen
Script für das Fullsizen verwendet.
lg Matthias
Leider geht das Bearbeiten momentan nicht im Forum
@mtness
Danke für den Script ;)
lg
hallo messa!
ich finde deine anleitung super!!!
diese diskussion ist ja schon länger her, hast du vielleicht dran weiter gearbeitet, auch an der slideshow?
eine große bitte hätte ich an dich:
das hat weniger mit deiner fullsize_background anleitung zu tun, die bekomme ich gut hin.
leider sind meine css kenntnisse nicht so toll und ich habe probleme mit den divs (logo, content...).
manche verschwinden, wenn man das browserfenster auseinanderzieht.
kannst du mir vielleicht von We-are.cc das css schicken?
wäre super!!!
vielen dank und lieben gruß,
chinagirl
Hallo.
Stell doch bitte einen Link online, dann kann ich schauen an was es liegt.
Generell bei Contao #Wrapper eine breite definieren, dann verschwiendet auch nichts.
Z-index kann nicht schuld sein da das BG_Bild auf Z-index -1 gestellt ist.
Du kannst dir über Quellcode auch das CSS anschauen. Da muss ich dir
nichts senden ;)
lg Matthias
hi messa,
danke für deine rasche rückmeldung :)!
hier der link.
es geht um das rote feld, die navigation.
schiebe das browserfenster zusammen, dann kannst du es sehen.
das css hab ich im quellcode mir angesehen, bin aber trotzdem nicht dahinter gekommen, was bei dir stimmt und bei mir nicht :rolleyes:.
danke und lieben gruß,
chinagirl
Hast du eventuell media query drinnen?
@media (min-width:700px) { … } sowas.
Sieht aus als würde das Feld auf display none gestellt werden bei einer
bestimmten Browserfenstergröße.
lg Matthias
nein hab ich nicht ....
lg, chinagirl
Glaube das ist schuld.
lösch das raus.Code:#left {
margin-left: -100%;
}
lg Matthias
das hab ich in meinen code gar nicht stehen.
schicke dir anbei mein css.
lg chinagirl