Lightbox on Mouseover ?

[Quabbe]

Hallo,

ich kenne mich mit JavaScript null aus und habe momentan auch nicht die Zeit, mich eingehender damit zu beschäftigen. Mein Webproject Caeruin - Der letzte Kontinent nimmt mich momentan voll in Anspruch. Ich würde aber gerne eine Art Lightbox-Effekt erzeugen, wenn ich mit der Maus über einen bestimmten Bereich fahre.

Hier ist der Effekt zu sehen (wenn man über die kleine Lupe im Text unter der Überschrift 'Filter ade' geht), momentan noch ohne Effekt und nur mit CSS erzeugt. So schwer kann es doch eigentlich nicht sein, das vorhandene Lightbox-Script so umzuschreiben, dass auch hier dieser Blend- / Übergangseffekt eintritt. Könnte mir jemand verraten, ob sich mein Vorhaben so ohne weiteres umsetzen lässt?

Über bessere Vorschläge oder Fertiglösungen wäre ich natürlich auch sehr dankbar! :)


liebe Grüße,
Quabbe

 

[vitus37]

Eine Einblendung lässt sich mit dem Framework jQuery recht einfach realisieren.

Hierfür lädst du dir von Downloading jQuery - jQuery JavaScript Library das Framework herunter und bindest sie mit dem script-Tag in deine Seite ein.
Speziell die Funktion .animate() – jQuery API könnte was für dich sein. (an Hand der Beispielcodes lässt sich leicht was abguggen)

 

[yss]

Ich würde es auch erstmal mit jQuery versuchen, falls du es nicht schaffen solltest, kann ich dir noch das Framework Mootools empfehlen. (Du solltest nur nicht beide gleichzeitig verwenden ;-))
Diese 2 Dateien musst dann eben auch über das Script-Tag einbinden und so sieht dann er Js-Code aus:

var myEffect = new Fx.Morph(div, {duration: '2000'});
 	myEffect.start({
    'opacity': [0, 1],
    });

D.h. du musst bei "div" eben deine Lightbox angeben, bei Duration die Zeit der Animation in ms und unten kannst du dann eben sagen, was er in dieser Zeit ändern soll. Der erste Wert ist der Anfangswert und der letzte Wert der Endwert.

 

[Quabbe]

Heyho ihr beiden,

danke schon mal für eure Antworten.

Mootools hatte ich mir bereits angeschaut, als ich nach einer Möglichkeit suchte, meine Weltkarte scrollbar zu machen. Hat auch soweit geklappt (mit mootools demos - Fx.Scroll), allerdings war es mir nicht vergönnt herauszufinden, wie man auf herkömmlichem Weg über die Karte scrollt. :(

Um aber auf mein aktuelles Problem zurückzukommen: ich gebe also statt div die Klasse an und füge den Code-Schnipsel zwischen <script type="text/javascript"> und </script> im Headerbereich ein?

 

[yss]

Jop, also du gibst halt die id der Lightbox dort an.
Ja, am besten ist es, du legst in deinem Projekt einen Ordner "js" an und legst dort die beiden Dateien ab. Dann schreibst du halt

<script type="text/javascript" src="js/mo.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>

in den Headbereich, so hast du eine besser Übersicht in deinem Quelltext ;-)

 

[Quabbe]

Vielen Dank!

Werde ich ausprobieren, sobald ich die Zeit dazu finde.


Grüße,
Quabbe