Slidershow über Browserbreite/Responsive 
Autor: Joschi H.Hallo an die Gemeinschaft der X5-Pro-Anwender!
Es gibt einfache Website-Erstellungsprogramme, in denen Slidershows über die ganze Breite laufen können. Alle anderen Funktionen dieser Programme sind dagegen mehr als sehr einfach. Ich möchte mit X5 eine website erstellen, wo eine Slidershow über die ganze Breite läuft - ohne komplizierte html-Programmierungen erstellen zu müssen. Selbst wenn man den passenden html-Code hätte, ist ein html-Code nur im Seiteninhalt einzufügen, jedoch nicht im "Hintergrund/Zeilenstil bzw. auf Browserbreite erweitert". In der Galerie, der von Anwendern erstellen Websites, sind in der letzten Zeit jedoch gerade solche websites zu sehen. Wie macht ihr das?
Eine Anregung an Incomedia: Erstellt doch bitte eine widges für Slidershows, welche man auf Browserbreite erweitern kann. Nicht nur ein einfacher Bilderlauf, wie man ihn jetzt unter Zeilenstil findet. Obwohl dort "zeitlicher Ablauf" steht, kann man keine Zeitabläufe anpassen. Es müsste eine Funktion/Widges sein, wo die Größen prozentual einzugeben sind.
Ich weiß, man kann nicht alles haben und das Programm ist auch sehr günstig. Deshalb mein Vorschlag, ein kostenpflichtiges widges anzubieten.
Ich bin gespannt auf eure Kommentare
Hello Joschi
In Row format
You choose the row for which you want the slideshow.
You specify the images you want, and then remember to check : options - full width
Hope you are helped by this
Kind regards
John S.
Hallo Joschi
Im Reihenformat
Sie wählen die Zeile aus, für die Sie die Diashow erstellen möchten.
Sie geben die Bilder an, die Sie möchten, und denken Sie daran, Folgendes zu überprüfen: Optionen - volle Breite
Ich hoffe, dir wird geholfen
Mit freundlichen Grüßen
John S.
Sorry - I think you knew this already.
But it is very easy to use some css code to stretch an object to full width.
You could instead try to look at a testpage I have, where I use the wow-slider and the KenBurns effect.
It is on this site : http://www.bramminginfo.dk/brm02/
On this page you can see the wow-slider : http://www.bramminginfo.dk/brm02/lokationer.html
And here nearly the same slideshow where i have used the row-format and the parallax :
http://www.bramminginfo.dk/brm02/ansgar-kirke.html
Entschuldigung - ich denke du hast das schon gewusst.
Aber es ist sehr einfach, einen CSS-Code zu verwenden, um ein Objekt auf die volle Breite zu strecken.
Du könntest stattdessen versuchen, eine Testseite zu betrachten, in der ich den WoW-Slider und den KenBurns-Effekt verwende.
Es ist auf dieser Seite: http://www.bramminginfo.dk/brm02/
Auf dieser Seite können Sie den WoW-Slider sehen: http://www.bramminginfo.dk/brm02/lokationer.html
Und hier fast die gleiche Slideshow wo ich das Zeilenformat und die Parallaxe benutzt habe:
http://www.bramminginfo.dk/brm02/ansgar-kirke.html
Mit freundlichen Grüßen
John S.
+ 1
I also would like the row-format slideshow to have some settings available - time settings for transitions and time settings for dispælayed time
Autor
Hallo John,
herzlichen Dank für die schnelle und ausführliche Antwort. Wir werden den WOW-Slider ausprobieren. Du hast also den Slider im html-Code eingefügt und die Bilder in der Einfügemaske. Also, nur die Funktion (Slidershow) über den html-Code und den Rest (die Bilder) in X5. Das ganze über "Zeilenstil-Bilderleiste".
Wenn man es kann, ist alles ganz einfach
. Doch ich muss mich in CSS-Code erst einarbeiten.
Übrigens, es ist eine schön gestaltete website, dessen Link du mitgeschickt hast. Auch danke ich dir, dass du für mich übersetzt hast. Toller Service aus Dänemark.
Mit freundlichem Gruß
Joschi
Nein, Du musst im WOW-Slider (was eine sparate Software ist) die komplette Slideshow erstellen. Diese fertige Slideshow wird zumeist per iframe in die Website-Homepage eingefügt.
hier:
http://giancafoto.altervista.org/wowslider-v13-iframe/
Hellom Joschi
Here is the code for the wow-slider on the page : http://www.bramminginfo.dk/brm02/lokationer.html
The code is given by the file(s) generated by the wow-slider
It is NOT made via an iframe - the code shown is put in a HTML-object. It cannot be in an iframe if you want it to fill the whole width.
In next post I will show the css code to make the html-object span the whole wifth.
Here is the code to put in the HTML-object. ( for my example )
<head>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/img_0005.jpg" alt="IMG_0005" title="IMG_0005" id="wows1_0"/></li>
<li><img src="data1/images/img_0007.jpg" alt="IMG_0007" title="IMG_0007" id="wows1_1"/></li>
<li><img src="data1/images/img_0009.jpg" alt="IMG_0009" title="IMG_0009" id="wows1_2"/></li>
<li><img src="data1/images/img_0012.jpg" alt="IMG_0012" title="IMG_0012" id="wows1_3"/></li>
<li><img src="data1/images/img_0014.jpg" alt="IMG_0014" title="IMG_0014" id="wows1_4"/></li>
<li><img src="data1/images/img_0015.jpg" alt="IMG_0015" title="IMG_0015" id="wows1_5"/></li>
<li><img src="data1/images/img_0017.jpg" alt="IMG_0017" title="IMG_0017" id="wows1_6"/></li>
<li><img src="data1/images/img_0019.jpg" alt="IMG_0019" title="IMG_0019" id="wows1_7"/></li>
<li><img src="data1/images/img_0020.jpg" alt="IMG_0020" title="IMG_0020" id="wows1_8"/></li>
<li><img src="data1/images/img_0023.jpg" alt="IMG_0023" title="IMG_0023" id="wows1_9"/></li>
<li><img src="data1/images/img_0063.jpg" alt="IMG_0063" title="IMG_0063" id="wows1_10"/></li>
<li><img src="data1/images/img_0064.jpg" alt="IMG_0064" title="IMG_0064" id="wows1_11"/></li>
<li><img src="data1/images/img_0066.jpg" alt="IMG_0066" title="IMG_0066" id="wows1_12"/></li>
<li><img src="data1/images/img_0071.jpg" alt="IMG_0071" title="IMG_0071" id="wows1_13"/></li>
<li><img src="data1/images/img_0073.jpg" alt="IMG_0073" title="IMG_0073" id="wows1_14"/></li>
<li><img src="data1/images/img_0074.jpg" alt="IMG_0074" title="IMG_0074" id="wows1_15"/></li>
<li><img src="data1/images/img_0078.jpg" alt="IMG_0078" title="IMG_0078" id="wows1_16"/></li>
<li><img src="data1/images/img_0081.jpg" alt="IMG_0081" title="IMG_0081" id="wows1_17"/></li>
<li><img src="data1/images/img_0082.jpg" alt="IMG_0082" title="IMG_0082" id="wows1_18"/></li>
</ul></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
Here is the css code.
It is put in : Page properties / expert.
Before closing the HEAD tag.
The #imCell_50 is the page-menu to span the whole width.
The #imCell_41 is the HTML-object with the wow-slider to span the whole width.
<style>
#imPageRowContent_1, #imCell_50, #imCellStyle_50 {width: 100%;}
#imCell_50 {left:0;}
#imPageRowContent_2, #imCell_41, #imCellStyle_41 {width: 100%;}
#imCell_41 {left:0;}
</style>
You can use a demo-version of the wow-slider - only thing the demo does special, that it "watermarks" the images.
Hope you have it to function, and that you was helped with this.
Kind regards
John S.
You probably have guessed - the numbers for the objects, is special for my example.
You can use the : inspect source
to find the numbers for your page. And then make the css as the last thing.
Autor
Hallo John,
erstmal herzlichen Dank für deine umfangreiche Antwort. WOW habe ich mir als Demoversion geholt und eine Slidershow erstellt. Diesen html-Code habe ich in eine X5-Datei eingearbeitet. Nachdem ich den html-Code dort eingearbeitet habe, wird leider die slidershow nicht angezeigt. Wahrscheinlich liegt es daran, dass ich nicht weiß, wo ich den DATA1-Ordner einbinden soll. WOW schreibt, dass ich diese beiden Ordner auf den Server legen soll. Doch meine website habe ich noch nicht auf den Server geladen. Entschuldige meine Fragen, momentan erscheint mir alles noch etwas undurchsichtig. Aber ich werde mir deine gesendeten html-Codes kopieren und damit "experimentieren". Vielleicht finde ich dann die Lösung. Wahrscheinlich ist mein Problem nur eine Kleinigkeit, aber die muss ich noch finden. Deshalb, erstmal ganz herzlichen Dank!!!
Die WOW-Vollversion möchte ich mir erst kaufen, wenn es für mich funktioniert.
Noch eine Frage: wo soll ich den css-Code einkopieren?
Freundliche Grüße
Joschi
Autor
Hallo Martin,
auch deine Tipps sind super. Nur muss ich mir erstmal alles aus italinienisch ins deutche übersetzen. Das dauert etwas und dann schreibe ich eine neue Nachricht vom "Stand der Dinge". Herzlichen Dank für deine umfangreiche Antwort. Mir wird hier international geholfen
Mit freundlichem Gruß
Joschi
Hello Joschi
The CSS code should be put in the 3 page settings/properties ( where you see the site map )
In the settings for the page in the expert tab.
If you want to see the wowslider in preview, you could copy the data and engine to the preview folder for your project.
Then you should be able to preview.
If you choose to use the iframe solution, then you could do the same.
Kind regards
John S.
Hello again Joschi
I can see you like model trains - what about a model of : The Hilfiker/MobaTime Swiss Railway Clock
You can see it here : http://www.bramminginfo.dk/brm02/index.html#baneur
Kind regards
John S.
Autor
Hello again John
ja, ich bin begeisteter Modelleisenbahner - deine Eisenbahnuhr ist toll!!
Mein Problem besteht leider noch immer. Sämtliche Anweisungen habe ich ausgeführt, aber die Vorschau ist wie hier:
Die beiden Ordner von wow ""data1" und "engine1" habe ich das Verzeichnis meiner website einkopiert:
Die html-Codes von der wow-Seite kopiert:
Hier die body-Version
Autor
Hello John,
der Speicher war voll. Also, alles gemacht wie beschrieben, doch die Darstellung ist falsch. Wo habe ich den Fehler eingebaut?
Mit freundlichem Gruß
Joschi
Hello Joschi
The code from the wow-slider should be put in a HTML-object on a page - NOT - in the expert tab.
This is the first thing you have to do. Then - when you can see the slideshow on the page ( not full width yet ) then you have to use the inspect source in the browser.
Here you should be able to see the object "name" of the wow-slider.
THEN you have to make the styling. You have to put the css code in the "Eigenschaften der Seite ) expert tab
before closing the head tag.
The styling will look something like this :
<style>
#imPageRowContent_1, #imCell_xx, #imCellStyle_xx {width: 100%;}
#imCell_xx {left:0;}
</style>
Where xx = the actual object-"name" for your wowslider object.
Kind regards
John S.
Hallo Joschi,
veruche es mal so, ich denke es ist einfacher für den Anfang:
Gib unter "Sitemap" -> "Eigenschaften" -> "Erweitert" -> "Vor dem /Head"
das hier ein:
<style>
#div_iframe {position:absolute;top:0px;width:100%; z-index:1}
</style>
<script>
function h_iframeK(){var ww =1920; // larghezza immagini;var hh =800; // altezza immagini;var wdiviframe = document.getElementById('div_iframe').offsetWidth;var hiframe=Math.round(wdiviframe*hh/ww);document.getElementById('iframek').style.height=hiframe +"px";document.getElementById('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();}
</script>
Wobei hh=800 die Höhe deines erstellten Sliders darstellt (Sliderhöhe eingeben).
Unter "Struktur der Vorlage" stelle den Header auf die Höhe deines Sliders ein (z.B. 600px) oder mehr px, so dass der Slider tiefer als das Menü wird. Platziere dein Menü nach deinen Wünschen.
So wie Du bereits richtig gemacht hast speichere die wowslider.html, den data1- und den engine1-ordner in den Ordner deiner gespeicherten Homepage.
https://helpcenter.websitex5.com/pl/post/189283#2
Autor
Hallo an alle die mir helfen wollen!!
es klappt noch nicht wirklich. Ich habe die Version von John aus Dänemark genommen, soch irgendetwas mache ich noch immer falsch. Es soll eine Slidershow sein, welche über die Browserbreite geht. Immer erst bunt, dann sw und nicht untereinander!
Hier meine Ergebnisse in Bildern:
Mit besten Dank im voraus! Joschi
Wie groß ist dein WOWSlider?
Autor
Hallo Martin,
die Slidershow in "wow" ist 630 x 360 px auf volle Breite. Dort wird die Slidershow auch auf volle Breite vergrößert.
Ich möchte die Slidershow nicht auf allen Seiten haben, deshalb platziere ich sie nicht in den Header.
Hallo Joschi,
hier der Link zu Wetransfer https://we.tl/vrNYWniKZs
Einfach die ZIP-Datei runterladen und entpacken. Es ist eine kleine Testseite mit dem eingebundenen WOWSlider.
Damit Du dies besser nachbauen und verändern kannst, habe ich die iwzip-Datei ebenfalls beigefügt. Der WOWSlider ist nicht am Header sondern für jede Seite möglich. Ich habe nur die index-Seite begelegt und auch nur eine Größe.
Autor
Hallo Martin,
ganz herzlichen Dank für deine Mühe!!!
Ich habe die Datei heruntergeladen, entzippt - doch es ist "nur" die wow-Slider.exe bei diesem Transfer zu entdecken. Wahrscheinlich sollte es schnell gehen und der Rest ist noch auf deinem Rechner. Ich bin sehr gespannt, was du für mich "gebastelt" hast. Das ist ganz toll - was für eine Hilfe!!!
Joschi
Ich habe die Datei nun selbst runtergeladen und es passt - komisch.
https://we.tl/BUTlp7uHUm
Habe dennoch nochmals die Zip-Datei hochgeladen
Autor
Hallo Martin,
danke! Ich habe die Datei runtergeladen und alles installiert. Wahrscheinlich klappt es nicht, da ich mit einem 64-bit-Betriebssystem arbeite. Es kommt immer eine Rückmeldung, dass X5 die Datei nicht öffnen kann. Ach, es ist so schade! Du hast dir so eine Mühe gemacht, um mir zu helfen!!! Vielleicht hilft mir der reine html-Code weiter - ich weiß es nicht und bin nun langsam am verzweifeln.
Wow-Slider als .exe habe ich ja und die neuste X5Pro-Version. Da schaut man mit nun schon eckigen Augen auf den Bildschirm und findet den eigenen Fehler nicht. Wahrscheinlich ist es wieder eine "Kleinigkeit", die ich jedoch nicht sehe!!! Ich brauche ein Foto, wie der html-Code und wo!! eingefügt werden muss (siehe das 3. Foto von mir vom 8.3.18) und wie und wo der css-Code einkopiert wird.
Bitte entschuldige, du hast dir so eine Mühe gemacht und nun klappt es nicht! Trotzdem ganz herzlichen Dank.
Joschi
Ich habe gerade festgestellt, dass diese testseite noch mit der Version 14 erstellt wurde. Hier nun die Version 15.
Zip-Datei entpacken und per Doppelklick die index.html öffnen. Dein Browser öffnet sich und es müsste eigentlich funktionieren. Die iwzip-Datei ist im backup-Ordner eingefügt. Diese kannst Du in Website importieren.
https://we.tl/n2Wanriwyu
Hello Joschi
This should not be so difficult. I saw you made a minor mistake with the styling.
If you are interested, You could contact me via this page : http://calendarforum.dk/contact.html
I will then guide you step by step. I am sure you/we can have it to function.
I will not continue in this thread as it is not an effective way, dealing with more questions and answers at the same time.
If I hear from you, I will guide you until it functions - if not - then I hope you will solve it another way.
Kind regards
John S.
Autor
Hallo Martin, ich habe alles nach deiner Anweisung entpackt und eingefügt. Es stimmt, die index.html zeigt deine Slidershow - toll! Doch, wenn ich die iwzip (also die X5-Datei) öffne, dann bekomme ich die Rückmeldung wie in meinem obigen Beitrag "cannot load". Wo muss ich dem Programm erklären, wo die Bilder liegen bzw. wo die Slider-html-Datei liegt. Man findet sich nicht
... Vielleicht würden Bilder von deinem Bildschirm, wo diese Dateien bzw. html-Codes zu sehen sind, mir helfen.
Vielleicht würde es helfen, wenn wir uns persönlich treffen würden.
Joschi
Du musst in Website diese iwzip Datei importieren.
Dann kanst Du die genaue Position des Wowsliders festlegen.
Die Bilder im Wowslider machst du natürlich im Programm wowslider, das hat nichts mit Website zu tun. Daher ist auch diese wowslider.html im ordner vorhanden. Diese Datei wird per iframe in Website eingefügt.
Anbei Screenshots was wo reinkommt.
Hier der Code vor dem </head>:
<style> #imHeader {position: fixed;z-index: 1000;}</style>
<style> #div_iframe {position:absolute;top:100px;width:100%;z-index:1}</style>
<script> function h_iframeK(){var ww =1920; // larghezza immagini;var hh =900; // altezza immagini;var wdiviframe = document.getElementById('div_iframe').offsetWidth;var hiframe=Math.round(wdiviframe*hh/ww);document.getElementById('iframek').style.height=hiframe +"px";document.getElementById('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();}</script>
Hier der Code nach dem <body>:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="900" src="wowslider.html" scrolling="no" frameborder="no"></iframe></div>
Du musst jedoch beachten, dass das erste/oberste Objekt (Textobjekt oder Bildobjekt) im Content, den gleichen Abstand zum Menü aufweist, wie die Höhe des Slider ist! Ansonsten überdeckt dieses Objekt den WOWSlider. Dies kannst Du entweder durch den Abstand in "Stil" erreichen oder z.B. durch ein transparentes Bildobjekt.
Autor
Hallo Martin,
toll! Heute nachmittag werde ich mit deinen Unterlagen üben! Herzlichen Dank für deine Unterstützung und Mühe. Du bist besser als der Support!!!
Ich melde mich dann später noch einmal.
Joschi
Autor
Hallo Martin,
laut deiner Anleitung habe ich alles eingegeben, aber es funktioniert nicht. Ich verzweifel langsam und komme nicht weiter. Deshalb sende ich dir meine "Testseite" über diesen link:
https://we.tl/J6VZ63fTHW
Vielleicht siehst du meinen Fehler.
Joschi
Bevor du ganz verzweifelst, wieso machst du nicht im Content eine Slideshow (egal welches Widget) und mit 2 Zeilen CSS Code (allerdings auf deine Seite abgestimmt) bringt sie auf die ganze Breite. Ist zwar ncoh von der V13 aber die Selektoren dazu haben sich nicht geändert. LINK
Hier die Datei mit deinem Slider https://we.tl/0DyhGShlK1
Hat fast gepasst :-)
Autor
Hallo Andreas,
wieviel kosten denn deine "2 Zeilen CSS"? Deine Vorführseite habe ich schon einmal bewundert, doch das hilft mir nicht weiter - leider!
Hallo Martin,
es geht auf meinem Rechner nicht. Ich versuche es morgen auf einem anderen Rechner noch einmal (i7-Intel). Für heute reicht es mir .... Herzlichen Dank für deine so umfangreiche Hilfe.
Joschi
WOWSlider und zusätzlich mit Swiper Animated Slider
https://we.tl/4zp9vlVpde
Autor
Hallo Martin,
hier das Resultat: Beim wowslider sehe ich auf dem Bildschirm "cannot open the page wowslider.html". Hole ich mir den html-Code in ein externes html-Programm, sehe ich den Slider mit den Stühlen (siehe Foto). In X5 jedoch nicht, es kommt immer die gleiche Rückmeldung. Daraufhin habe ich kurzfristig sämtliche Virenschutzmaßnahmen deaktiviert, aber es bleibt bei der Rückmeldung. Vielleicht liegt es auch daran, dass ich noch die Demoversion von wowslider benutze. Keine Ahnung!!!
Dein eingearbeiteter Swiper Animated Slider ist toll! Ich darf sie jedoch nicht verschieben oder auf eine andere Seite kopieren. Dann ist der Effekt weg. Wahrscheinlich liegt an der Position der Veränderung im html-Code der ganzen Seite. Doch das finde ich nicht. Und wenn, wie gibt man bei X5 einen css Code ein, ohne das die website hochgeladen ist? Der css-Code muss sich ja beim Slider befinden und nicht irgendwo auf der Seite. Unter Eigenschaften würde es ja die ganze Seite betreffen.
Vielleicht schreibst du mir deinen Trick auf meine Kontaktseite. Meine aktuelle website findest du in meinem account.
Ich bedanke mich bei allen "Mitlesern", die bestimmt sehr spannend diese Diskussion verfolgt haben und auch gerne eine Slidershow vergrößert auf die ganze Breite haben möchten. Es wäre das Highlight für 2018, wenn X5 diese Variable im Programm integrieren würde (eine Empfehlung für die beiden Firmengründer von Incomedia). Das Programm ist toll, es gibt nichts vergleichbares - aber! Selbst wordpress oder mobrise haben diese Möglichkeiten! Überall sieht man slidershows über die ganze Breite vergrößert, welche sich auch responsive sind.
Ich wünsche allen einen schönen Sonntag.
Joschi
Autor
Nachtrag!
Alle, die uns das erklären können, könnten doch ein youtube-Video hochstellen
Die CSS Datei für den Animated Slider wird unter Sitemap -> -> die Seite -> Eigenschaften -> Erweitert -> vor dem /head eingetragen.
Wichtig dabei sind die #imPageRowContent_5, #imCell_6, #imCellStyle_6! Diese jeweiligen Nummern musst Du entsprechend deiner Seite abändern. Um diese Nummern zu erhalten, öffne die Vorschau mit z.B. Chrome oder Firefox und klicke mit der rechten Maustaste auf den Bereich des Sliders. Es öffnet sich ein Kontexmenü wo "Untersuchen" aufgeführt ist. Wähle das nun aus und rechts öffnet sich ein neues Fenster wo dieser Bereich erscheint. Jetzt brauchst Du nur noch nach diesen obigen Codes mit deinen Nummern suchen und diese Nummern in den Code (/head) eintragen/ersetzen.
Hier ein kleines Video wie man die Nummern für den CSS-Code des Animated Slider finden kann:
https://we.tl/yP2wSXeGdZ
Hier der Code um den Animated Slider auf Bildschirmbreite zu bekommen (die Nummern müssen angepasst werden):
<style>
#imPageRowContent_5, #imCell_8, #imCellStyle_8 {
width: 100%;
}
#imCell_8 {
left:0;
}
</style>
Autor
WIR HABEN DAS RÄTSEL ENTSCHLÜSSELT!!!!!!!!!
Hallo Martin,
ganz herzlichen Dank für deine Tipps. Mit deiner Hilfe und viel Gehirnschmalz, haben wir nun X5-Slidershows vergrößert auf Browserbreite. Toll! Natürlich wurden sämtlich Sliderversionen ausprobiert, verschoben und jeweils angepasst. Und es klappt!!
Nur die wow-Slider-Show funktioniert noch nicht. Da kommt immer die gleiche Rückmeldung. Irgendwann werden wir das auch noch herausfinden. Falls ja, werden wir das hier wieder veröffentlichen.
Joschi
Autor
Hallo Martin,
du wirst heute zum "Helfer des Monats" gekürt!! Ich habe das Video erst jetzt entdeckt und mir natürlich angesehen. Toll, nun können es alle nachbauen. Das hast du alles super gemacht!
Joschi
Hier ein kleines Video wie man den WOWSlider in Website einbaut.
Den Abstand (top:) in </head> und die Sliderhöhe (height:) in <body> muss man seiner Seite/Slider anpassen.
Code für vor dem </head>:
<style>
#div_iframe {position:absolute;top:120px;width:100%; z-index:1}
</style>
<script>
function h_iframeK(){var ww =1920; // larghezza immagini;var hh =600; // altezza immagini;var wdiviframe = document.getElementById('div_iframe').offsetWidth;var hiframe=Math.round(wdiviframe*hh/ww);document.getElementById('iframek').style.height=hiframe +"px";document.getElementById('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();}
</script>
Code nach <body>:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="600" src="wowslider.html" scrolling="no" frameborder="no"></iframe></div>
Hier das Video https://we.tl/2EdtGzqmKd
Autor
Hallo Martin,
dein Video haben wir oft angesehen und genau nach Anweisung (auf 2 verschiedenen Rechnern) die Daten eingegeben. Es klappt nicht. Es kommt immer die Rückmeldung, dass die wowslider.html nicht gefunden wird. Obwohl alle notwendigen Dateien im Zielverzeichnis enthalten sind.
Selbst, deine Zip-Dateien ergeben bei mir die gleiche Rückmeldung. Bei dir ist die Slidershow zu sehen, bei mir nicht. Nur die wowslider.html-Datei für sich alleine wird korrekt im Browser angezeigt.
Da bis heute 409 Interessenten diesen Beitrag gelesen haben, ist das Thema hoch interessant! Wahrscheinlich haben Viele es auch ausprobiert. Wie sind denn dort die Resultate? Bin ich der einzige, der immer diese Rückmeldung "cannot open ..." sieht - oder?
ABER!! Die X5-Slidershows können wir nun auf die Breite "zaubern" und diese Slidershow verkleinern sich dann auch noch bei den responsiven Größen! Das ist doch ein großer Schritt für Alle - dank deiner Hilfe (der Helfer des Monats)
Joschi
Woher nimmst Du den von Dir eingesetzten Code?
Du musst nur diese beiden Codes einfügen sonst nichts!
Code für vor dem </head>:
<style>
#div_iframe {position:absolute;top:120px;width:100%; z-index:1}
</style>
<script>
function h_iframeK(){var ww =1920; // larghezza immagini;var hh =600; // altezza immagini;var wdiviframe = document.getElementById('div_iframe').offsetWidth;var hiframe=Math.round(wdiviframe*hh/ww);document.getElementById('iframek').style.height=hiframe +"px";document.getElementById('imHeader').style.height=hiframe +"px";}window.onload = function () {h_iframeK();}window.onresize = function () {h_iframeK();}
</script>
Code nach <body>:
<div id="div_iframe"><iframe id="iframek" name="iframek" width="100%" height="600" src="wowslider.html" scrolling="no" frameborder="no"></iframe></div>
Autor
Danke
Joschi
Autor
422 Besucher, aber keiner hat sich getraut, etwas zu diesem Thema beizutragen - warum?
Aber das Ergebnis ist für alle gut - dank Martin!!