Masonry und Wow Slider könne nicht zusammen genutzt werden 
Autor: Michael T.
Besucht 1599,
Followers 1,
Geteilt 0
Hallo zusammen,
wie kann man Masonry und WOWSlider zusammen auf einer Seite nutzen? Ich habe beim Wowslider auch schon die ID geändert, was leider nicht geholfen hat. Die Bilder die mit Masonry als auch mit Justified Gallery dargestellt werden sollen, werden nicht dargestellt, sowie man den WOWSlider einbindet. Ohne Wowslider geht es. Sehen kann man das ganze unter http://michael-thomann.com/lapalma/lapalma_wandern.html .
Es ist die version 13.1.5.16 im Einsatz.
LG
Michael
Gepostet am
Das hat normalerweise nichts mit dem WOWSlider und dem Code zutun. Wäre ein extremer Zufall dass die das selbe Skript laufen haben. Die CSS ID ist da komplett egal.
Ich glaube eher dass es beim Widget die Einstellungen sind und vielleicht die Fotos (zu groß eingebunden) sind.
Autor
komisch ist nur, das wenn ich den WOWSliser raus nehme, es funktioniert. In der Vorschau von X5 ist auch alles OK.
Hast du den WowSLider in ein HTML OBjekt auf jeder Seite eingebunden?
Das jquery Skript braucht man nicht zusätzlich einzubauen, das wird von WSX5 automatisch eingebunden.
Autor
Ja, wowslider ist in einem HTML Objekt auf jeder Seite eingebunden.
ICh würde mal den WOW Slider in den HEader packen, damit nur ein Code immer geladen wird. Aber Ansichtssache...
Das Problem ist INCO gibt keinen Support für selbst eingefügten Code, auch wenn es dann ein internes Objekt betrifft. Aber eine andere Frage...wieso nimmst du nicht einen Slider von den Widgets? Dort sind auch ähnliche Effekte vorhanden und wenn du den Slider nicht auf die ganze Breite bringen willst, ist ein internes sowieso besser.
Autor
Die slider von X5 gefallen mir nicht so. Aber Danke für Deinen Einsatz ..
(Übersetzt von Google)
EXTRA! ... Wenn Sie Inkompatibilitäten vermeiden möchten, erstellen Sie Ihre Diashow (Vollbild) extern, unabhängig von dem Programm, und Export-Netzwerk mit Filezilla, etc ..
Dann können Sie die Diashow im Projekt über IFRAME oder mit meiner Methode der DIV_CUSTOM + Dynamische IFRAME verwenden.
Auf jeden Fall sehr einfach realisiert werden, wenn die äußere Diashow.
Es kann als Header dynamischen Hintergrund (Vollbild-Größe veränderbar) oder als Zeilen Hintergrund verwendet werden.
Wenn Sie interessiert sind, lassen Sie mich wissen, die Anweisungen zu erklären, wie das zu tun, sonst ignoriert es, was ich sagte.
(IT) - EXTRA! ... Se vuoi evitare incompatibilità, crea il tuo slideshow (fullscreen) esterno, indipendente dal programma, ed esportare in rete con Filezilla, ecc..
Poi sarà possibile utilizzare lo slideshow nel progetto tramite IFRAME, oppure con il mio metodo del DIV_CUSTOM + IFRAME dinamico.
In ogni caso semplicissimo una volta realizzato lo slideshow esterno.
Può essere usato come sfondo header dinamico (fullscreen ridimensionabile), Oppure come sfondo della riga.
Se ti interessasse, fammi sapere per spiegarti le istruzioni per come fare, altrimenti ignora quanto da me detto.
.
ciao
.
Autor
Hallo KolAsim,
ein Versuch ist es Wert. Könnte ich die Anleitung bitte bekommen?
LG Michael
OK
1) für den Test, machen eine einfache Website mit wenigen Inhalt; Mit dem oberen Menü; Mit leerem Header, transparent und hoch 200 Pixel; ... mit dieser Option:
Horizontal - Menü über dem Header;
2) Machen Sie unabhängige Diashow, mit jedem Service, wowslider, maximage2, jssor, vegas, etc .;
3) Veröffentlichen Sie die Website und posten Sie den Link: www.SiteName/
4) Veröffentlichen Sie die Diashow mit FTP Filezilla und posten Sie den Link:www.SiteName/Diashow/
-> Dann, wenn ich die beiden Links sehe, werde ich mit meinen Anweisungen fortfahren, ganz einfach. Siehe Grund > Beispiel.
(IT)
Orizzontale - Menu sopra l'Header;
1) per la prova, realizzare un sito semplice con pochi contenuti; con il menu in alto; con l'intestazione vuota, trasparente, ed alta 200 pixel; ...con questa opzione:
2) realizzare lo slideshow indipendente, con un servizio qualsiasi, wowslider, maximage2, jssor, vegas, eccetera;
3) pubblicare il sito e postare il link: www.nomedel sito/
4) pubblicare lo slideshow con FTP Filezilla e postare il link: www.nomedelsito/slideshow/
-> Poi, quando io vedrò i due link procederò con le mie istruzioni, semplicissime. Vedi esempio di base.
.
Autor
1. einfache Webseite: http://michael-thomann.com/Test/t1/
2. export von Wowslider: http://michael-thomann.com/Test/t2/wow-iframe.html and http://michael-thomann.com/Test/t2/wow-howto.html
Sie haben nicht die unabhängige Diashow veröffentlicht. Es ist nicht größer anzeigen.
Ich zwickte die Diashow-Code: > sehen.
Beispiel 1 - Schwierigkeit: Null.
Legen Sie Header (Kopfzeile ) ein Objekt HTML-Code.
Fügen Sie in diesem Objekt den folgenden Code:
Siehe > Beispiel 1 (Teilklon)
(Zwei weitere Beispiele folgen in Kürze)
......................................................
(IT) - Non hai pubblicato lo slideshow indipendente. Non è fullscreen.
Io ho modificato il codice dello slideshow: > vedi.
Esempio 1 - difficoltà: zero.
Inserire nell'Intestazione (HEADER) un Oggetto Codice HTML.
Incollare in questo oggetto il codice che segue:
<iframe id='iframek' src='http://www.kolasim-zone.it/trash/michaelthomannWOW_175105.html' width='100%' height='200' scrolling='no' frameborder='0'></iframe>
Vedi > esempio 1 (clone parziale)
(prossimamente altri due esempi a seguire)
.
ciao
.
Die Diashow ist die vorherige. > sehen.
Beispiel 2 - Schwierigkeit: mittel.
Zum Abschnitt:
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </HEAD> Tag
Fügen Sie in diesem Abschnitt den folgenden Code [CHROME (Strg+U),(Ctrl+U) - line nr. 40-49]:
var ww =960; // larghezza immagini;
var hh =200; // altezza immagini;
var wdiviframe = document.getElementById('imHeader').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww) ;
divK= "<iframe id='iframek' src='http://www.kolasim-zone.it/trash/michaelthomannWOW_175105.html' width=100% height="+ hiframe+ " scrolling='no' frameborder='0'></iframe>";
document.getElementById('imHeader').style.height=hiframe + "px";
document.getElementById("imHeader").innerHTML = divK;}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
Siehe > Beispiel 2 (Teilklon)
(Drittes Beispiel folgt in Kürze)
.......................................
(IT) - Lo Slideshow è quello precedente. > vedi.
Esempio 2 - difficoltà: media.
Andare nella sezione:
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </HEAD> Tag
Incollare in questa sezione il codice che segue [CHROME (CTRL+U) - righe nr.40-49] :
...[***]...
Andare nella sezione:
>>XXXXXXXXXXX
Incollare in questa sezione il codice che segue:
<<< xxxxxxxxxxx
Vedi > esempio 2 (clone parziale)
(prossimamente terzo esempio a seguire)
.
ciao
.
Diashow Ich änderte sie es Vollbild zu machen: > sehen.
Beispiel 3 - Schwierigkeit: mittel.
Zum Abschnitt:
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </HEAD> Tag
Fügen Sie in diesem Abschnitt den folgenden Code [CHROME (Strg+U),(Ctrl+U) - line nr. 40-49]:
<script>function h_iframeK(){
var ww = 960; // larghezza immagini;
var hh = 200; // 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>
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </BODY> Tag
Fügen Sie in diesem Abschnitt den folgenden Code [CHROME (Strg+U),(Ctrl+U) - line nr. 212]:
(ENDE)
.......................................
(IT) - Lo Slideshow lo ho modificato per renderlo fullscreen:> vedi.
Esempio 3 - difficoltà: media.
Andare nella sezione:
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </HEAD> Tag
Incollare in questa sezione il codice che segue [CHROME (CTRL+U) - righe nr.40-49] :
LINK >> Schritt 1 - Einstellungen > Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Erweitert | ▪Benutzerdefinierter Code | ▼Vor dem </BODY> Tag
Incollare in questa sezione il codice che segue [CHROME (CTRL+U) - riga nr.212] :
...[***]...
Vedi > esempio 3 (clone parziale)
(FINE)
.
ciao
.
Hinweis. Sie entfernen den Code von Ihrer Seite:
Download-Seite und legen Sie sie in Ihrer Website auf dem Netz: > wow1 | > wow2; ...dann korrigieren Sie die URL in dem Code; zum Beispiel:
http://www.kolasim-zone.it/trash/michaelthomannWOW_175105.html
http://michael-thomann.com/Test/t1/michaelthomannWOW_175105.html
http://www.kolasim-zone.it/trash/michaelthomannWOW2_175105.html
http://michael-thomann.com/Test/t1/michaelthomannWOW2_175105.html
http://michael-thomann.com/Test/t1/ + slideshow ...
(IT) - Avviso. Cancellare questo codice dalla tua pagina. ... [***]...
scarica la pagina e mettila nel tuo sito in rete: > wow1 | > wow2; ... quindi correggere gli URL nel codice [***]
.
Autor
Hallo KolAsim,
da hast Du Dir ja viel Arbeit gemacht. Vielen Dank dafür. Ich werde es demnächt alles testen.
LG
Michael