• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

javascript: bilder fokus

  • Ersteller Ersteller FoXMorayn
  • Erstellt am Erstellt am
F

FoXMorayn

Guest
EDIT:
javascript quellcode:
homepage-code.de - post your sourcecode!

hallo,

habe eine erweiterung für mein javascript Bilder Fokus geschrieben:

das script in aktion: Galerie

das code layout ist noch nicht final. versteht ihr den code? wo muss dringend nachgebessert werden?

ich wollte keine ladezeiten, daher werden immer vor und nachgängerbild geladen.

bedienung? funktioniert sie erwartungsgemäß?

keine bugs? (bis auf width im IE6)

EDIT: das javascript preloading für vor und nachgänger will nicht immer richtig klappen. bei sehr schnellem navigieren kann es zu falschen kombinationen aus titel und bild führen.

javascript code ist nun fertig. wird in 2 versionen erscheinen.
änderungen zur version 1.2:

1.3: bilder-script13.zip XXkb
* Bilder Navigation
* verbessertes ruckelfreies Laden
* Bild kann mit ESC geschlossen werden
* 1.3.1: bilder-script131.zip XXkb
* * ohne Navigation

für kritik zum script freue ich mich.

Galerie

ps: gibt noch einen kleinen css fehler bei der navigation im ie6, daher ist es noch nicht als download verfügbar.
 
Zuletzt bearbeitet von einem Moderator:
Super, schaut klasse aus. Zum Code kann ich leider nicht wirklich etwas sagen, da ich kein JS kann.
Ich würde mir aber noch ein kleines x oben rechts wünschen, sodass man das Fenster nicht nur per ESC, sondern auch per Maus schließen kann.

MfG Icy
 
danke,
ich bin froh, dass du es geschrieben hast.
das schließen war einer der punkte, über die ich mir gedanken gemacht hab. nun weiß ich, dass es nicht sofort klar ist wie man das bild wieder schließt.
ich denke ich werd ein kleines X mit bei #pitcure:hover anzeigen lassen.
 
Ich finde die Funktion an sich nicht schlecht, gut gemacht.
Zum Code kann ich nichts sagen, da ich mich mit JS nicht auskenne...
 
Ich würde mir aber noch ein kleines x oben rechts wünschen, sodass man das Fenster nicht nur per ESC, sondern auch per Maus schließen kann.
Sehe ich auch so ;)
Ich meine es ist besser wenn man aufs Bild klickt, dass dann das nächste Bild kommt und nicht geschlossen wird.
Und das Script ist auch super geschrieben ;)!
 
danke für das feedback!
ich schau mal, dass ich dieses wochenende die finale version hochlade.
 
Sieht super aus.
Ist es vllt. irgendwie möglich , dass sich
der Hintergrund bei Anklicken bischen abdunkelt,
würde so noch besser aussehen.
 
danke!

habe schon drüber nachgedacht den rest zu verdunkeln, aber sieht das wirklich besser aus? ist es notwenig, oder hat es irgend einen nutzen?
ich meine, der dicke schwarze rand hebt die bilder genug hervor, oder?


habe noch ein kleines feature hinzugefügt und nen bug behoben.
hab keine neue version dafür hinzugefügt sondern das ganze einfach noch in die 1.3 er gepackt , ich hoffe das macht keinem ärger :|.

nun verschwindet kein bild mehr im minus bereich (top:-20px o.ä.)
das X zum schließen ist in der vertikalen immer sofort sichtbar.sieht man schön, wenn man das browser fenster verkleinert und ein bild öffnet.
 
Also für mich würde es schon Sinn machen, das ganze mit einem Hintergrund zu unterlegen, ich würde dein Script auch gerne auf eienr seite verwenden, diese ist jedoch auch ziehmlich dunkel und da wird nicht so deutlich, dass es im Vordergrund sein soll. Deshalb währe es sinnvoll das ganze mit einem hintergrund zu unterlegen, natürlich nichts dunkeles :smile:
So ein stark transparentes weiß, was wie Nebel aussieht würde zu dunkelen Seiten passen.
 
ich mach mal eine beta version mit verdunkeltem hintergund fertig.
wird dann leider nicht ganz nach w3c, da ich dazu warscheinlich ein onresize event verwenden werde.
mal schaun was sich ergibt.

EDIT:

ging fix und genau das ist ein kleines problem. position:fixed kann der IE6/7 nicht. es soll dafür aber einen bugfix geben.

beispiel:
http://www.fun-fox.de/galerie/test.html

javascript sourcecode:
http://www.homepage-code.de/pastebin.php?show=69

html code (css welches in verbindung mit #galerie steht, ist nicht elementar):
http://www.homepage-code.de/pastebin.php?show=70


EDIT2: ein onresize event ist nicht integriert
 
Zuletzt bearbeitet von einem Moderator:
Gefällt mir persöhnlich sehr gut, IE macht bei mir auch keine Probleme,
kennt eben nur kein moz-border-radius, daher sind die Kanten eckig, stört aber auch nicht besondes.

:smile:
 
zum onresize event: ich poste einfach mal den einzeiler hier rein.
das event ist in der jetzigen variante des sciptes nicht notwendig, aber fügt ein kleines feature hinzu. beim vändern der größe wird das bild neu positioniert:
Code:
window.onresize=movePicture;
noch eine frage: ist es akzeptabel, das man das bild nach oben und nach unten scrollen kann?
es gibt varianten der lightbox bei denen das nicht der fall ist. welche variante ist logischer, schöner?

im online beispiel scrollt das bild nun mit, ich habe mich bemüht das ruckeln zu reduzieren. ganz kann ich es aber nicht entfernen, da ich das bild sonst auch fix positionieren müsste:
http://www.fun-fox.de/galerie/test.html
 
Zuletzt bearbeitet von einem Moderator:
zum onresize event: ich poste einfach mal den einzeiler hier rein.
das event ist in der jetzigen variante des sciptes nicht notwendig, aber fügt ein kleines feature hinzu. beim vändern der größe wird das bild neu positioniert:
Code:
window.onresize=movePicture;
noch eine frage: ist es akzeptabel, das man das bild nach oben und nach unten scrollen kann?
es gibt varianten der lightbox bei denen das nicht der fall ist. welche variante ist logischer, schöner?

im online beispiel scrollt das bild nun mit, ich habe mich bemüht das ruckeln zu reduzieren. ganz kann ich es aber nicht entfernen, da ich das bild sonst auch fix positionieren müsste:
Galerie

Ja, funktioniert alles super, doch Zeit IE8 bei mir in init.js in Zeile 73 einen Fehler an, wie kommts ?
 
es ist eine beta version. der "fehler" kommt dadurch zustande, dass jetzt ein onscroll und onresize event benutz wird, die dauerhaft aktiv sind. auch wenn grad kein bild angezeigt wird.
die events rufen movePicture auf, wenn es aber noch kein bild gibt kann diese funktion nicht darauf zugreifen und es kommt zum fehler.

die beiden events sollen das script einfach noch ein bisschen dynamischer machen.
Code:
window.onresize=movePicture;
window.onscroll=function()
{
    setTimeout("movePicture()", 200);
}
wenn ich herrausgefunden hab, wie ich die events ersatzlos löschen kann, ist dieser fehler behoben.
im moment steh ich da ein wenig auf dem schlauch, hab keine ahnung ob und wie ich https://developer.mozilla.org/En/DOM:element.removeEventListener
auf mein problem anwenden kann.


EDIT:
Galerie
ich überschreibe die fuktionen erstmal einfach mit einer leeren.
fehler gibs so erstmal keine. so komplett glücklich bin ich damit noch nicht.
probleme sollte diese version nicht machen.

EDIT2:
die events werden nun richtig entfernt. das onscroll event sollte man weglassen, wenn man größere bilder anzeigen möchte.
 
Zuletzt bearbeitet von einem Moderator:
Zurück
Oben