✔ JavaScript TinyBox in Seite einfügen

RoyalArsenal

RoyalArsenal

Mitglied
Hi Leute,

Möchte gerne ein Javascript in meine Seite ( http://silverscreen87.blogspot.com/ ) integrieren, weiss aber nicht genau wie ich das anstellen soll.

Es handelt sich um das hier auffindbare Script TinyBox. Lädt man sich das Paket runter, sind insgesamt 2 Bilder und 6 Dateien enthalten von denen jedoch nur 3 relevant sind (packed, style, tinybox). Wie muss ich diese drei codes in meinen bestehenden HTML code (hab ich als Anhang hochgeladen) einfügen, damit es am Ende funktioniert?

Gruss
RoyalArsenal
 

Anhänge

Hi,

werf doch einfach einen Blick in den Quellcode des Demos, aus dem klar hervorgeht, was wo einzubinden ist.

mfg Maik
 
Danke!

Also die tinybox.js muss ich hochladen, doch was macht man mit der packed.js?

Muss man die .js Dateien in jedem Falle hochladen oder gäbe es auch eine Möglichkeit dies zu umgehen und die codes dieser beiden Dateien vielleicht in den HTML code der Seite einzufügen?
 
tinybox.js und packed.js sind das gleiche Script, letzteres nur in "komprimierter" Form - kannst dir ja mal den Code im Editor betrachten :-)

Ob du das Script nun als externe JS-Datei oder den ganzen Code im Dokumentheader einbindest, bleibt dir überlassen.

mfg Maik
 
Also im Headerbereich ( vor </head>) hab ich jetzt <script type='text/javascript'>
</script> eingefügt und darin den code den man in der Datei tinybox.js findet eingefügt. Doch ich häng grad bei der Implementierung der style.css. Die muss doch auch im Headerbereich eingefügt werden, aber ich werd aus dem Quelltext der Demo nicht ganz schlau wie.
 
http://sandbox.leigeber.com/tinybox/style.css

CSS: 
#testdiv {width:600px; margin:0 auto; border:1px solid #ccc; padding:20px 25px; background:#fff}

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}

#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}

#tinycontent {background:#fff}

.button {font:14px Georgia,Verdana; margin-bottom:10px; padding:8px 10px 9px; border:1px solid #ccc; background:#eee; cursor:pointer}

.button:hover {border:1px solid #bbb; background:#e3e3e3}

Ist doch übersichtlich, das wenig Code.

mfg Maik
 
Wie lange beschäftigst du dich mit deinem Blog in unserem Forum, als dass du bis zum heutigen Tage noch immer nicht weißt, wo und wie der CSS-Code in deiner Seite eingefügt wird? Hier gilt prinzipiell "Schema-F" :)

Vielleicht solltest du dir nach fünfmonatiger Forenaktivität gewisse Grundkenntnisse in den praktizierten Sprachen aneignen, damit du hier nicht jedes Mal von Neuem zu fragen brauchst, wie du das Stylesheet in deine Seite bekommst:

Oder du schlägst einfach in deinen vergangenen Themen nach, wo dir auch schon zu solch ähnlichen Fragen Hilfstellung geleistet wurde.

mfg Maik
 
Danke, hab es jetzt aber doch mal mit hochladen versucht um nur zu schauen ob es überhaupt funktionieren würde. Hab jetzt also ledigilich im header folgendes eingefügt:

<link href="http://th14.piranho.de/style.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://th14.piranho.de/tinybox.js" type="text/javascript"/>

und dann wie auf der Seite beschrieben

TINY.box.show('advanced.html',1,300,150,1,3)

eingefügt, aber tut sich nichts. Siehe http://silverscreen87.blogspot.com/2009/07/pearl-harbor.html
 
Das <link>- und <script>-Element haben in einem <style>-Bereich auch nichts zu suchen.

Funktioniert denn die Lightbox überhaupt?

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück