Ich würde das dann als HTML5 so versuchen Code <center> <video id="video_background" src="images/content/index/sale-top.jpg" preload="auto" width="1024" autoplay="true" loop="true" > <source src="video.ogv" type="video/ogg; codecs="theora, vorbis"" /> <source src="movie.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /> <source src="video.webm" type="video/webm; codecs="vp8, vorbis"" /> </video> </center> CSS Code (Text): #video_background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: -1000; }
Wie wurde im Testshop3 das mit der Navigationsleiste gelöst? Die wird erst wieder transparent und "groß" wenn man "oben" angekommen ist. Genau so was suche ich für meinen Shop.
Ich such dir die Stelle gleich raus. Du wirst aber von einer Anpassung des JavaScripts nicht drum herum kommen.
@Torben (Gambio) Sind wir mit dem Video Hintergrund auf der richtigen Spur ? Oder ist das doch ein ganz anderer Lösungsansatz ? Wir wollen Fische im Hintergrund schwimmen lassen
So los gehts: 1. Suche auf deinem Server die templates/Honeygrid/module/head.html heraus und erstelle dir davon eine USERMOD. In der USERMOD änderst du dann folgendes um: PHP: <body class="{page_id}" data-gambio-namespace="{$tpl_path}assets/javascript/engine" data-jse-namespace="{$content_data.BASE_URL}JSEngine/build" data-gambio-widget="input_number responsive_image_loader transitions {if $fixedHeader}header {/if}image_maps modal history dropdown core_workarounds anchor" data-input_number-separator="{$content_data.numberSeparator}" {$content_data.additional_html_array.body.params}> wird zu: PHP: <body class="{page_id}" data-gambio-namespace="{$tpl_path}assets/javascript/engine" data-usermod-namespace="{$tpl_path}assets/javascript/usermod" data-jse-namespace="{$content_data.BASE_URL}JSEngine/build" data-gambio-widget="input_number responsive_image_loader transitions image_maps modal history dropdown core_workarounds anchor" data-usermod-widget="{if $fixedHeader}header {/if}" data-input_number-separator="{$content_data.numberSeparator}" {$content_data.additional_html_array.body.params}> 2. Gehe in den Ordner templates/Honeygrid/assets/javascript und erstelle dir einen Ordner mit dem Namen "usermod". In dem Ordner erstellst du einen weiteren, den du "widgets" nennst. In diesem Ordner erstellst du dir zwei neue Dateien. Einmal die header.js und einmal die header.min.js Das zu verändernde Original der header.js findest du unter templates/Honeygrid/assets/javascript/engine/widgets. Aus dieser Kopierst du dir einmal den Quellcode und fügst ihn in deine neue header.js ein. Danach muss noch folgendes geändert werden: Code: /** * Widget that adds a class to a defined object if the page is * scrolled to a given position at least. It is used to set * the header size */ gambio.widgets.module( 'header', [ wird zu: Code: /** * Widget that adds a class to a defined object if the page is * scrolled to a given position at least. It is used to set * the header size */ usermod.widgets.module( 'header', [ Weiter gehts mit: Code: var _scrollHandler = function() { var position = $(document).scrollTop(), hasClass = $header.hasClass(options.stickyClass), scrollUp = currentPosition > position; Was du zu folgendem änderst: Code: var _scrollHandler = function() { var position = $(document).scrollTop(), hasClass = $header.hasClass(options.stickyClass), scrollUp = false; zuletzt änderst du noch folgendes: Code: } else { scrollUpCounter += 1; if (hasClass && (options.scrollPosition > position || scrollUpCounter > options.tolerance)) { in folgendes: Code: else { if (hasClass && (options.scrollPosition > position)) { 3. Jetzt musst du das JavaScript noch minifizieren. Dafür kannst du zum Besipiel folgendes Tool nehmen: http://jsutility.pjoneil.net/. Dort wählst du den Reiter Compact aus und lässt das Tool das für dich machen. Das sollte mit den Standard-Einstellungen so funktionieren. Das Ergebnis fügst du dann anschließend in die von dir erstellte header.min.js ein und speicherst auch das ab. 4. Caches leeren und dann sollte das Ganze schon laufen @michael_76: Achim hat mit dem Video schon die richtige Stelle gefunden. Wie das an der Stelle genau funktioniert, weiß ich aber spontan auch nicht, da ich das leider nicht umgesetzt habe. Wenn ihr aber nicht weiterkommt, schau ich später mal, was ich dazu rausbekomme.
Ich versuche es jetzt einfach mal und schau was da passiert, falls Ich es nicht zum laufen bekomme schreie Ich wieder um Hilfe
Und wieder ein Stein aus dem Weg geräumt zum Umstieg auf Honeygrid. 1000 Dank @Torben (Gambio) Ich kann den Danke button leider nur einmal drücken.
@marmoles @Torben (Gambio) Also das Video läuft ohne Hänger aber Ich finde die Stelle nicht wo der Code rein kommt. Kann es zwar in die die Hauptseite einbinden aber will es als Hintergrund, finde die Stelle nicht wo es hin muss
Ok, da war mein Ansatz wohl falsch. Dache es muss in die eigene CSS Ist echt nicht leicht wenn man die Stelle erst suchen muss
Ich hatte es mal mit dieser CSS versucht, jedoch ohne Erfolg #bgvideo { position: absolute; // Play the video in full screen mode top: 0px; left: 0px; min-width: 100%; min-height: 100%; z-index: -1; // Put the video behind all other elements }
Die Frage ist ja wo genau was hin gehört ? Muss der passende Code in eine Datei im StyleEdit3 oder gar in Templates ? Das ist schon eine schöne Sache und kommt optisch auch sehr gut, jetzt fehlt nur noch der Platz wo es hingehört
Hast du das Video schon in einer HTML-Datei eingebaut? Wenn ja welche und hast du die Caches geleert? Mein Vorschlag, wäre jetzt spontan, dass als USERMOD in die index.html einzubauen
Oh jeh mit USERMOD hatte Ich noch nie zu tun Und ehrlich gesagt NEIN ! Wüsste auch nicht wie diese aussehen sollte, aber man kann ja nicht alles können. Wäre jemand so nett und würde mir dabei helfen ?
Zur Info: Wie das USERMOD-System funktioniert ist in unserer Doku erklärt: https://developers.gambio.de/tutorials.html?v=2.7.2.0&p=usermods