ich habe leider nicht wirklich Ahnung von HTML, CSS und Co. Deshalb arbeite ich ja auch mit Web Acappella.
Nun möchte ich aber folgendes realisieren: Wenn man auf einen Link (oder auch ein Bild als Link) klickt, geht eine Fancy-Box auf. Eben so, wie die Fancybox-Funktion von Web Acappella. Nur möchte ich, daß sich in dem Fenster nicht nur Fotos öffnen lassen, sondern beliebiger Inhalt. Vor allem Videos und komplette HTML-Seiten, die ich dann bei mir auf den Server lege.
Gibt es da ein Code-Schnipsel, das man auch als Otto Nichtprogrammierer leicht verwenden kann? Ich stell mir das so vor, daß ich nur noch meine Daten austauschen muß und den Schnipsel per HTML-Baustein einbauen kann.
fügst du in den Head-Bereich deiner Seite ein. Im Seitenmenü Eigenschaften dieser Seite wählen und dann Zahnrad mit grünem Pluszeichen. Code hier kopieren und dort im Feld einfügen.
Den Link zu den Scriptdateien musst du an deine Gegebenheiten anpassen: <link rel="stylesheet" type="text/css" href="LINK ZU DEINER DATEI/shadowbox.css"> <script type="text/javascript" src="LINK ZU DEINER DATEI/shadowbox.js"></script>
Hier auf jeden Fall den kompletten Link angeben, also mit http:// usw., es sei denn du legst die Dateien in deinen Projektordner der Seite.
Dann kommen wir zu deinem Bild mit dem Link zu der Seite.
fügst du in einem HTML-Baustein in deiner Seite ein. Den Link zur Seite ändern href="http://www.schoenwandt.info/index.html", den Link zur Bilddatei ändern <img src="images/72dpi.jpg" (Link zu deiner Bilddatei), sowie die verschiedenen Grössenangaben fürs Bild style="position:absolute; width:300px;" und fürs Darstellungsfenster rel="shadowbox; width=1024; height=690".
Seite veröffentlichen und testen. Wenn alles funktioniert, kannst du die Seite hochladen, sonst alles nochmal überprüfen. Gerade was Links angeht passieren schon mal Tippfehler .
Wenn das jetzt immer noch zu schwer ist, dann befasse dich erst einmal mit dem kleinen Einmaleins des HTML, das wird dir die Sache erleichtern!
ich hab gesehen, dass man offenbar für jeden Link, der per Shaddow Box aufgehen soll, die entsprechende Größe angeben muss. Wie funktioniert das, wenn ich immer eine maximal an die Bildschirmgröße angepasste Shaddow Box haben will? Soll heißen, auf dem 27-Zöller soll das Bild, Video, HTML-Seite, etc. annähernd bildfüllend in der Box dargestellt werden. Das gleiche soll aber auch auf einem Netbook funktionieren - natürlich entsprechend kleiner. Was gibt man dann als Größe an? Hoffe, ich hab mich nicht zu verklausuliert ausgedrückt und Du weißt, was ich meine!?
Wenn ich recht erinnere, kannst du Grössenparameter auf verschieden Weise einstellen. Aber ganz ehrlich, ich habe mit Shadowbox schon länger nicht mehr gearbeitet und müsste mich selber erst einmal einlesen. Schau mal in in den Beschreibungen des Entwicklers nach, oder versuch es einmal mit Prozentangaben bei der Weite und Höhe!
Danke Didi, für deine Tipps! Meine ersten Versuche nach deiner Anleitung waren soweit erfolgreich.
Meine Frage jetzt:
Ich habe mir in WA einen Button gebaut mit 2 Zuständen (normal und Mouse over). Dann gibts ja da bei den Link-Einstellungen den brühmten JS-Button. Wenn ich dort Deinen Code eintrage (der eigentlich für den HTML-Baustein gedacht ist), funktionierts nicht. Gibts eine Variante, dass ich die Shaddowbox mit einem Button aus Web Acappella starten kann?
Zitat von Choro im Beitrag #9Danke Didi, für deine Tipps! Meine ersten Versuche nach deiner Anleitung waren soweit erfolgreich. Meine Frage jetzt: Ich habe mir in WA einen Button gebaut mit 2 Zuständen (normal und Mouse over). Dann gibts ja da bei den Link-Einstellungen den brühmten JS-Button. Wenn ich dort Deinen Code eintrage (der eigentlich für den HTML-Baustein gedacht ist), funktionierts nicht. Gibts eine Variante, dass ich die Shaddowbox mit einem Button aus Web Acappella starten kann?
Über den JS Button kannst du eine Javascript Funktion aufrufen. Diese musst du vorher programmieren und dann ansteuern. Du kannst die shodowbox auch per Javascript ansprechen, siehe hier....
Du musst die Funktion für Aufruf halt umprogrammieren, dass sie nicht sofort startet. Versuchs mal so:
Das funktioniert prima! Auch wenn's mir fast a bisserl peinlich ist: ich hab noch ein Problem!
Ich kann so nur einen Link je HTML-Seite ansprechen, oder? Ich würde gern auf einer Seite mehrere Links plazieren, jeder soll eine Shodowbox öffnen und jeder Link soll ein anderes Ziel haben. Kann man das Ziel auch irgendwie innerhalb des JS-Buttons definieren?
Du musst einfach nur für jeden Link eine Funktion definieren. In meinem Beispiel hast du die Funktion startShadowbox ().... Du kannst für jeden Link eine eigene Funktion erstellen, z. B. startShadowbox1 ().... / startShadowbox2 ().... / usw. Ist zwar etwas umständlich, aber ich denke so viele Links wirst du nicht haben oder?
So, jetzt krieg ich langsam graue Haare! Alles funktioniert wunderbar, nur beim Aufruf im Internetexplorer (IE8, auch Windows-User sollen sich später einmal die Seite anschauen können) geht's mal wieder nicht. Beim Klick auf den entsprechenden Link kommt die Meldung "error: javascript link function() startShadowbox()". In allen anderen Browsern geht das einwandfrei. Auf der JS-Webseite steht, dass der Doctype exakt am Seitenanfang angegeben werden muss. Das habe ich nach Anleitung gemacht. Trotzdem kein Erfolg. Woanders laufen die Shodowboxen ja auch i Internet Explorer. Weiß jemand Rat?????
Zitat von Choro im Beitrag #12Hallo Didi, Du bist ein Schatz ;-) !
Das funktioniert prima! Auch wenn's mir fast a bisserl peinlich ist: ich hab noch ein Problem!
Ich kann so nur einen Link je HTML-Seite ansprechen, oder? Ich würde gern auf einer Seite mehrere Links plazieren, jeder soll eine Shodowbox öffnen und jeder Link soll ein anderes Ziel haben. Kann man das Ziel auch irgendwie innerhalb des JS-Buttons definieren?
So, Schatzi hat das Script normal verbessert
Ich habe die Funktion so umgeschrieben, dass du beim Aufruf über den JS Button nur noch die HTML-Adresse mit übergeben musst und über eine Variable wird der Rest geregelt
1. DIe Shadowbox scheint nun auch im (unsäglichen) Internetexplorer zu funktionieren. 2. Das "Problem" mit meinen vielen Links ist nun auch sehr elegant gelöst.
TAUSEND DANK!!!!!
Die Seite ist noch im Aufbau und noch nicht online zum zeigen. Link wird aber nachgereicht sobald alles im Kasten ist.
Du solltest Dir einen Donate-Button oder sowas in der Art auf Deine Seite machen. Ich wäre der Erste, der draufdrückt. Ganz ehrlich, es ist nicht gerade selbstverständlich, dass jemand freiwillig und einfach so sein Wissen mit anderen teilt. Und das auch noch so umfassend und schnell. Nochmals vielen Dank!!!!!
Zitat von Choro im Beitrag #17Mensch Didi, das ist ja Klasse!!!
1. DIe Shadowbox scheint nun auch im (unsäglichen) Internetexplorer zu funktionieren. 2. Das "Problem" mit meinen vielen Links ist nun auch sehr elegant gelöst.
TAUSEND DANK!!!!!
Die Seite ist noch im Aufbau und noch nicht online zum zeigen. Link wird aber nachgereicht sobald alles im Kasten ist.
Du solltest Dir einen Donate-Button oder sowas in der Art auf Deine Seite machen. Ich wäre der Erste, der draufdrückt. Ganz ehrlich, es ist nicht gerade selbstverständlich, dass jemand freiwillig und einfach so sein Wissen mit anderen teilt. Und das auch noch so umfassend und schnell. Nochmals vielen Dank!!!!!
Hallo Choro,
schön das es geklappt hat Weisst du, ich habe auch viele Dinge aus dem Internet und durch lernen und viel ausprobieren gelernt. Auch wenn das mit dem Script für mich im Moment nicht schwierig und keine grosse Sache war, so habe auch ich dadurch wieder ein paar Dinge für mich lernen können. Ich finde es sollte immer ein Nehmen und Geben sein, dann ist das Leben etwas einfacher und interessanter. Mir reicht es schon, wenn derjenige dem man hilft sich darüber freut, so wie du und sich bedankt. Das ist nämlich auch nicht selbstverständlich (leider).
Ausserdem bin ich bekennendes Spielkind und solche Dinge lassen mir keine Ruhe . Ab und zu brauche ich mal wieder was, was die Murmel anstrengt und zum Qualmen bringt. Andere lösen Kreuzworträtsel, in dem Alter bin ich aber noch nicht .
Vielleicht kannst du irgendwann ebenfalls im Forum helfen, bei Dingen die du kennst und schon Erfahrung sammeln konntest.
So, ich habe mich heute nochmals reingekniet und ein Script geschrieben, welches den Umgang mit der Shadowbox um einiges vereinfacht. Die Beschreibung dazu findet ihr hier... in meinem Blog. Fragen zum Script und der Beschreibung bitte hier im Forum stellen, damit alle etwas davon haben.
Im Gegensatz zu dem hier veröffentlichten Code, gibt es Änderungen in Form von verschiedenen Funktionen für Bilder und Iframe-Elementen wie HTML-Seiten, Videos, usw.. Auch die Vorgehensweise für das automatische starten der Shadowbox beim Laden der Seite ist beschrieben. Der Vorteil der neuen Version ist, dass ihr nicht mehr im Script herum programmieren müsst. Je nach Variante, müsst ihr nur noch die Scripte in der Seite definieren und die Shadowbox über den JS Button im Programm aufrufen. Mit der Beschreibung sollten auch Anfänger klar kommen, sonst gibt es hier im Forum Hilfe!
Große Klasse, Didi! Das dürfte vielen Web Acappella Usern weiterhelfen, da man so die Funktionen des Programms deutlich erweitern kann. Muß mich wohl mal näher mit Java Script befassen..., aber die Zeit! Habe erst jetzt gesehen, dass Du ja doch schon einen Donate-Button im Blog hast. Habe grad mal drauf gedrückt. :-)) Dann wird das ja mal auch mit dem Eis.
Sooo, habe nun 2 Tage mit der Shadowbox herumexperimentiert und es sind doch ein paar Problemchen aufgetaucht. Aber vielleicht lassen die sich ja auch noch lösen.
Das Script von Didis Blog hat bei mir nicht funktioniert. Script hochgeladen, Code nach Anleitung integriert. Beim Klick auf den Button kommt folgende Meldung:
ERROR: javascript link function () { startShadowboxIframe("WEBADRESSE", "800", "600"); }
Der alte Code funktioniert mit dem neuen Script aber weiterhin einwandfrei.
Nun aber noch ein, aus meiner Sicht, grundlegendes Problem mit der Shadowbox: Ich habe bei einem Test festgestellt, daß die Shadowbox Darstellungsprobleme auf iOS-Geräten hat. Das Overlay füllt den Bildschirm nicht richtig aus und das eigentlich darzustellende iFrame wird leicht beschnitten. Daraufhin habe ich im Netz recherchiert. Das Problem gibts auch mit anderen, ähnlichen Scripten (Lightbox, usw.) und ist offenbar auf einen Fehler in Mobile Safari zurückzuführen. Es hat wohl irgend etwas mit der Interpretation von css-Attributen zu tun. Jedenfalls scheint es keine wirkliche Lösung dafür zu geben oder ich hab sie zumindest nicht gefunden. Andererseits habe ich auch Seiten gesehen, auf denen so eine (Shadow?)-Box einwandfrei auch unter iOS läuft. Muß also irgendwie möglich sein.
Falls sich das Problem wirklich nicht lösen läßt, wäre das doch ein KO-Kriterium für die Shadowbox, oder? Es kommt ja heute keiner mehr am mobilen Internet vorbei, wie es scheint.
Hat das jemand schon mal probiert oder gibts eventuell sogar eine Lösung?
Lade bitte die Version 1.1 vom Blog, dort wird dir eine Meldung angezeigt, wenn irgendetwas im Code fehlt . Ich sehe schon mal in deinem geposteten Code der Titel fehlt!
Zitat von Didi im Beitrag #22Lade bitte die Version 1.1 vom Blog, dort wird dir eine Meldung angezeigt, wenn irgendetwas im Code fehlt . Ich sehe schon mal in deinem geposteten Code der Titel fehlt!
Ich denke daran liegt es.
Die Version 1.1 hatte ich geladen. Den Titel hatte ich absichtlich entfernt, aber ich probiers nochmal mit dem Titel. Danke erstmal!
aus dem Blog 1:1 kopiere, kommt im Web-Acappella-Fenster wo ich die JS-Funktion eintrage die rote Fehlermeldung "Illegal Character". Vermute mal, dass das Häckchen hinter der "800" und der "600" ein Tippfehler sein könnte? Wenn ich es analog der "Seitenüberschrift" ändere, meckert Webacappella nicht mehr rum. Wenn ich dann allerdings auf den Link klicke, kommt wieder die Meldung:
ERROR: javascript link function () { startShadowboxIframe("WEBADRESSE", "Seiten\xFCberschrift", "800", "600"); }
Das "ü" in "Seitenüberschrift" ist nicht das Problem, das habe ich probiert. Ich bin ein bischen verwirrt, was die "Gänsefüßchen" betrifft. Im Blog steht immer ein ‘ und ’ (wo auch immer die aufder Tastatur zu finden sind ). In den Bildern vom Code sehe ich aber ein ' (über dem #-Zeichen).
Probier es mal mit allen Angaben (auch mit Titel), wenn die Fehlermeldung dann nicht mehr vorhanden ist, liegt es daran. Wenn du den Titel / Überschrift nicht haben möchtest, dann kann ich dir aber auch per Mail eine geänderte Variante zusenden.
Gruss Didi
NS.:Ich habe gerade gesehen, du verwendest im Funktionsaufruf (" - Ausrufezeichen), das ist falsch, du musst ' verwenden. Es kann an der Formatierung des Codes aus dem Blog liegen, das Problem hatte ich auch schonmal. Tippe den Klammerinhalt bitte mal von Hand ein. Ich werde das heute Abend mal kontrollieren.
Web Acappella - Forum, Tips und Tricks zum Bauen von Webseiten
»
Off Topic
»
HTML & Co
»
Script für Fancybox (für Anfänger)
02.09.2012 10:01 (zuletzt bearbeitet: 02.09.2012 10:07)
Thema drucken
Antworten
!
.
.
). In den Bildern vom Code sehe ich aber ein ' (über dem #-Zeichen).