PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Lightbox für Bilder


Wanginator
2006-01-16, 18:12:48
Ich habe nach einer geeigneten Methode gesucht, wie man Bilder (Original + Thumbnail) am Besten auf einer Webseite darstellt. Die Möglichkeit ein Popup-Fenster zu öffnen beim Klick aufs Thumbnail hab ich gleich für schlecht befunden. Das Original im selben Fenster darzustellen ist zwar besser, um aber wieder zurück zu gelangen, muss der Benutzer auf den Zurück-Button klicken. Zur Zeit hab ich es so gelöst: http://www.wanginator.de/fun.php

Nun bin ich auf eine interessante Lösung per Javascript gestoßen: http://www.huddletogether.com/projects/lightbox/
Die sieht ansich ganz ansprechend aus, einzige Vorraussetzung ist aktiviertes Javascript. Nun wollte ich eure Meinung hören, wie ihr diese Variante findet?

Gast
2006-01-16, 18:41:22
Gut, ich habe kein JS und bekomme das Bild dann trotzdem (im ganzen Browserfenster)

Schiller
2006-01-16, 19:57:01
Gut, ich habe kein JS und bekomme das Bild dann trotzdem (im ganzen Browserfenster)
JavaSkript ist ja auch sooooooo böse und soooooo selten in Browsern integriert. :nono:

;D :ulol:

Nase
2006-01-16, 20:14:04
JavaSkript ist ja auch sooooooo böse und soooooo selten in Browsern integriert. :nono:

;D :ulol:
Was versuchst du damit zu sagen?

Zum Thema: Sehr nettes Skript! Ist wirklich ein sehr schöner Effekt und er funktioniert sowohl im IE und Firefox (andere Browser nicht getestet) und auch Leute ohne aktiviertes Javascript werden nicht ausgeschlossen. Vielleicht werde ich das auch in meine Projekte einbauen.

Schiller
2006-01-17, 20:12:50
Was versuchst du damit zu sagen?

Wenn ich das richtig verstanden habe, dann hat der Gast da oben JS deaktiviert. Für mich ist so eine übertriebene Paranoia eben total unverständlich.

alkorithmus
2006-01-17, 20:43:04
Was versuchst du damit zu sagen?

Zum Thema: Sehr nettes Skript! Ist wirklich ein sehr schöner Effekt und er funktioniert sowohl im IE und Firefox (andere Browser nicht getestet) und auch Leute ohne aktiviertes Javascript werden nicht ausgeschlossen. Vielleicht werde ich das auch in meine Projekte einbauen.



Könntest du mir kurz erklären wie und vor allem was, von den gegebenen Codes, ich in meine Seite einzubinden habe um diesen Effekt zu erzielen?
Ich suche schon seit langem nach einem geeigneten Skript, was funktioniert und auch gut ausschaut.

RaumKraehe
2006-01-17, 21:25:26
Jep, finde das Script auch sehr nett. Sieht doch echt gut aus.

JS habe ich wohl aktiviert. Na und, hab trozdem keine Probleme. :P

Nase
2006-01-17, 21:33:58
Könntest du mir kurz erklären wie und vor allem was, von den gegebenen Codes, ich in meine Seite einzubinden habe um diesen Effekt zu erzielen?
Ich suche schon seit langem nach einem geeigneten Skript, was funktioniert und auch gut ausschaut.
Wie auf der Beispielseite beschrieben steht:

1. <script type="text/javascript" src="lightbox.js"></script> im <head> deiner Seite einbinden.
2. Pfad zur lightbox.js ggf. anpassen.
3. WICHTIG: Alle vom Script verwendeten Bilddateien in den gleichen Ordner legen, in dem sich auch die lightbox.js befindet. Alternativ in der lightbox.js die Pfade für die Bilder anpassen.
4. Die CSS-Anweisungen in deine CSS-Datei einfügen oder eine neue CSS-Datei im <head> angeben.

Alle benötigten Dateien gibt es unter dem Link aus dem ersten Post.

Das Ganze rufst du dann auf, in dem du dem Link unter href="" die Bilddatei angibts und zu dem Link noch ein rel="lightbox" hinzufügst.

Gast
2006-01-19, 20:17:06
JavaSkript ist ja auch sooooooo böse und soooooo selten in Browsern integriert. :nono:

;D :ulol:

Danke ich verzichte drauf das bunte Werbefenster durch mein Browser fliegen oder sonst was veranstaltet wird. Ich brauche auch kein JS, wozu auch? Wenn ich möchte dass eine Seite JS verwenden darf kann ich das mit 2Klicks entweder dauerhaft erlauben, oder temporär für die Browsersession.

Mark
2006-01-19, 21:21:11
sieht interessant aus, könnte ich prma gebraucehn für 2 webprojekte die ich grad aufbaue

bisher hab ichs einfach per popup gelöst, aber das is mal was anderes und auch recht stylisch

HellHorse
2006-01-19, 22:11:17
Ich brauche auch kein JS, wozu auch?
Ein Wort:
XMLHttpRequest

Gast
2006-01-19, 22:48:21
Gleiche Begründung wie oben: Ich möchte eine Website ansurfen und dann anschauen im Browser. Die soll nichts im Hintergrund rumpfuschen. Wenn ich der Meinung bin dass die Seite JS benutzen soll und kein Mist baut der nur nervt dann erlaub ich es. Ich denke wir sind uns einig dass man mit JS mist bauen kann! Der XMLHttpRequest (ist ja wohl echt nen hammer hype um das Ding...) ist mir gar nicht so wichtig.

Ich bleibe dabei dass man beim Erstellen einer Seite darauf achten sollte das die Funktionalität auch ohne JS gegeben ist.

Grüße

HellHorse
2006-01-20, 09:31:55
Ich denke wir sind uns einig dass man mit JS mist bauen kann!
Ja.

Der XMLHttpRequest (ist ja wohl echt nen hammer hype um das Ding...) ist mir gar nicht so wichtig.
Search-as-you-type ist bei mir immer auf sehr gutes Echo gestossen. Ich weis von keinem, der es missen möchte.

Ich bleibe dabei dass man beim Erstellen einer Seite darauf achten sollte das die Funktionalität auch ohne JS gegeben ist.
Ja. Das steht ausser Frage. Schon nur wegen der armen IE User, die halbwegs sicher surfen wollen.

huskarl
2006-01-23, 13:04:39
gefällt mir auch sehr gut, und am besten gefällt mir dass es "abwärtskompatibel" ist, also js ausschalter keine probleme haben.

jetzt läd der aber immer kurz wenn man ein bild anklickt. ist das einfach nur das bild das er läd, oder braucht der so lange um sich zu initialisieren. das wäre bei längeren bilderangucksession glaube ich ein wenig nervig.

edit: nochwas. gibts vielleicht ne möglichkeit bilder weiterzuklicken? also nicht immer x, nächstes bild, x nächstes bild...

gruß,

huskarl

Wanginator
2006-01-23, 17:54:04
edit: nochwas. gibts vielleicht ne möglichkeit bilder weiterzuklicken? also nicht immer x, nächstes bild, x nächstes bild...


Der Autor arbeitet an einer Version namens Lightshow, die das machen soll. Bei seinen privaten Photos auf der Seite gibt schon eine next/previous funktion.

http://www.huddletogether.com/

Mark
2006-01-24, 14:01:16
leider funktioniert da sganze nicht mit iframes

oder hat jemand ne möglichkeit gefunden ddie thumbs in einem iframe zu haben, das komplette bild aber auf der ganzen seite?

Wanginator
2006-03-29, 19:42:18
leider funktioniert da sganze nicht mit iframes

oder hat jemand ne möglichkeit gefunden ddie thumbs in einem iframe zu haben, das komplette bild aber auf der ganzen seite?

Schick doch eine Mail an den Autor, vielleicht weiß er eine Möglichkeit.

Es gibt jetzt auch eine verbesserte zweite Version des Scriptes, womit man auch ganze Bildershows anzeigen lassen kann:
http://www.huddletogether.com/projects/lightbox2/

Gast
2006-03-29, 22:46:01
Das Original im selben Fenster darzustellen ist zwar besser, um aber wieder zurück zu gelangen, muss der Benutzer auf den Zurück-Button klicken.Um zurück zu kommen muss man zurück kommen wollen. So weit kein Problem, oder?

Das eigentliche Problem das du hier ansprichst ist die Tatsache dass es im Internet Explorer überproportional anstrengend ist "zurück" zu gehen. Moderne Browser haben damit keinerlei Probleme (und einige Aufsätze für den IE auch nicht, wie ich hörte).

Solltest dir evtl überlegen ob du auf so einen Scheißhaufen unbedingt Rücksicht nehmen musst, oder ob's nicht besser für alle wäre, wenn die ... IE-User ... die Schmerzen die sie verursachen auch mal selbst spüren, und so evtl zum Umstieg motiviert werden können.

-zecki

Kinman
2006-03-29, 23:12:55
Sieht echt genial aus!
btw. zurück ist nirgendswo anstrengend, das liegt auf der Maus.

mfg Kinman

Sephiroth
2006-03-29, 23:52:16
Danke für die Info, die erste Variante hat mir bereits prima gefallen. :)

Eine Frage hät ich allerdings: Was ist wenn das Bild größer als das browser Fenster ist und normalerweise gescrollt werden muß?

... Internet Explorer überproportional anstrengend ist "zurück" zu gehen
Wieso ist es überproportional anstrengender als bei anderen Browsern? Die Zurück-Schaltfläche gibt es, ALT+Links geht, Backspace geht und wer eine Maus mit belegbaren Tasten hat, bei dem ist due Vor-/Zurück Funktion meist sogar schon voreingestellt ansonsten aber einstellbar.

Kinman
2006-03-30, 09:15:49
Dann gibts Scrollbalken. Probiers einfach mit einem kleinem Browserfenster

mfg Kinman

zeckensack
2006-03-30, 15:06:39
Wieso ist es überproportional anstrengender als bei anderen Browsern? Die Zurück-Schaltfläche gibt es, ALT+Links geht, Backspace geht und wer eine Maus mit belegbaren Tasten hat, bei dem ist due Vor-/Zurück Funktion meist sogar schon voreingestellt ansonsten aber einstellbar.Weil andere Browser Mausgesten haben, und man nicht erst den Zeiger von der Seite weg gaaanz nach oben links bewegen, den Back-Button treffen, und dann evtl wieder zurückbewegen muss. Freihändig btw. Tastaturkürzel nutzt nicht jeder, und es ist oft bequemer nur mit der Hand auf der Maus Seiten zu konsumieren.

Wer's auf einer speziellen Maustaste hat ist natürlich fein raus. Nur
a)Belegt das im Grunde dass ich keinen Quatsch fasle, denn wenn der Back-Button alleine bequem wäre, oder wenn die Tastaturkürzel bequem wären, würde es sich niemand auf die Maus legen wollen.
b)Kannst du zB Opera auch mit einer Zwei-Tasten-Und-Ein-Scrollrad-Maus schon hervorragend bedienen.

Wenn das alles so einfach ist, und, um mal witzig zu sein, versierte IE-Benutzer ebenfalls keine große Arbeit mit der Browser-Navigation haben, dann bin ich wieder da wo ich schon war: wozu besondere Rücksicht nehmen auf Menschen die einen unbequemen Back-Button nutzen?

OT: eine Sache die mir schon immer missfiel, und die ich bis heute völlig unlogisch und abartig finde sind (Unter-)Seiten die einen eigenen Mechanismus haben um sich schließen zu können. Gleiche Motivation? IMO ja ... Schließen-Button auf die Maus? Err ...

Sephiroth
2006-03-30, 17:35:59
Dann gibts Scrollbalken. Probiers einfach mit einem kleinem Browserfenster
hm, ich fürchte da geht der besondere Flair von der LightBox verloren ... mal sehen wie's ausschaut.

Wir werden zwar OT aber der Post hier muß noch sein ...
Weil andere Browser Mausgesten haben, und man nicht erst den Zeiger von der Seite weg gaaanz nach oben links bewegen, den Back-Button treffen, und dann evtl wieder zurückbewegen muss. Freihändig btw. Tastaturkürzel nutzt nicht jeder, und es ist oft bequemer nur mit der Hand auf der Maus Seiten zu konsumieren.

Wer's auf einer speziellen Maustaste hat ist natürlich fein raus. Nur
a)Belegt das im Grunde dass ich keinen Quatsch fasle, denn wenn der Back-Button alleine bequem wäre, oder wenn die Tastaturkürzel bequem wären, würde es sich niemand auf die Maus legen wollen.
b)Kannst du zB Opera auch mit einer Zwei-Tasten-Und-Ein-Scrollrad-Maus schon hervorragend bedienen.

Wenn das alles so einfach ist, und, um mal witzig zu sein, versierte IE-Benutzer ebenfalls keine große Arbeit mit der Browser-Navigation haben, dann bin ich wieder da wo ich schon war: wozu besondere Rücksicht nehmen auf Menschen die einen unbequemen Back-Button nutzen?
Mausgesten sind AFAIK nicht standardmäßig installiert, weder bei Opera noch bei Mozilla oder Firefox. Und auch den IE kann man mit 2 Maustasten und einem Mausrad bedienen - SHIFT+Mausrad runter = Zurück und SHIFT+Mausrad hoch = Vorwärts (oder Link folgen, wenn der Zeiger über einem Link ist).
Es ist daher, meiner Meinug nach, nicht überproportional schwerer als bei anderen Browsern auch.


OT: eine Sache die mir schon immer missfiel, und die ich bis heute völlig unlogisch und abartig finde sind (Unter-)Seiten die einen eigenen Mechanismus haben um sich schließen zu können. Gleiche Motivation? IMO ja ... Schließen-Button auf die Maus? Err ...
Naja, sowas ist doch nun eher für Popups gedacht ... die Motivation würde ich dabei sogar noch höher einschätzen als bei der Zurück-Funktion. ;)

Kinman
2006-03-30, 22:09:12
Mausgesten sind beim Opera Standartmäßig dabei, aber nicht per default aktiv.

mfg Kinman

Nase
2006-03-31, 15:22:49
Eine Frage hät ich allerdings: Was ist wenn das Bild größer als das browser Fenster ist und normalerweise gescrollt werden muß?

Bei der ersten Version war irgendwo ein Link zu einer verbesserten (?) Version der Lightbox, wo sich Bilder, die größer als das Browserfenster sind, dynamisch daran anpassen und mit einem Klick darauf in Originalgröße anzeigt werden können.

darph
2006-03-31, 16:04:58
Hmm... wär schön, wenn das nicht auf "Open In New Window"/"Open In New Tab"-Klicks reagieren würde. :/

Sephiroth
2006-03-31, 16:17:45
Hmm... wär schön, wenn das nicht auf "Open In New Window"/"Open In New Tab"-Klicks reagieren würde. :/
Was? Das vergrößern oder die Lightbox generell?
So lange keine target-Attribut verwendet wird, welches dafür sorgen soll das ein neues Fenster geöffnet wird, passiert da IMO auch nix.

Bei der ersten Version war irgendwo ein Link zu einer verbesserten (?) Version der Lightbox, wo sich Bilder, die größer als das Browserfenster sind, dynamisch daran anpassen und mit einem Klick darauf in Originalgröße anzeigt werden können.
Das klingt gut, mal sehen ob ich das finde und bei Lightbox 2 nachrüsten kann.

Mausgesten sind beim Opera Standartmäßig dabei, aber nicht per default aktiv.
hm, ok, gibt aber nur 'nen halben Punkt, weil sie nicht aktiviert sind X-D

darph
2006-03-31, 16:42:30
Was? Das vergrößern oder die Lightbox generell?
So lange keine target-Attribut verwendet wird, welches dafür sorgen soll das ein neues Fenster geöffnet wird, passiert da IMO auch nix.
Eh,... ja ne. Klick auf das Bild mit mittlerer Maustaste oder (im IE: Shift+Click) öffnen die URLs ja im neuen Tab oder im neuen Fenster. Erstgenanntes gilt ja zum Haifisch für Avant und Fux. Wenn ich mit der mittleren Maustaste auf einen Link klicke, möchte ich, daß der Link sich im neuen Tab öffnet. In diesem Fall das nackte Bild.

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" /></a>

Hier wird der Link überschrieben. Macht man das so: <a href="bild.jpg" onClick="methodenaufruf(); return false;">irgendwas</a> kann ich mit Linksklick den Event aufrufen und per return false wird die Aktion "Lade die URL" verhindert. Klickt man mit der mittleren Maustaste (für neuen Tab), lädt er dort die URL (ein Grund, warum man ja auch nicht <a href="javascript:irgendwas()"> verwenden soll).

Sephiroth
2006-03-31, 17:37:16
Eh,... ja ne. Klick auf das Bild mit mittlerer Maustaste oder (im IE: Shift+Click) öffnen die URLs ja im neuen Tab oder im neuen Fenster. Erstgenanntes gilt ja zum Haifisch für Avant und Fux. Wenn ich mit der mittleren Maustaste auf einen Link klicke, möchte ich, daß der Link sich im neuen Tab öffnet. In diesem Fall das nackte Bild.

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" /></a>

Hier wird der Link überschrieben. Macht man das so: <a href="bild.jpg" onClick="methodenaufruf(); return false;">irgendwas</a> kann ich mit Linksklick den Event aufrufen und per return false wird die Aktion "Lade die URL" verhindert. Klickt man mit der mittleren Maustaste (für neuen Tab), lädt er dort die URL (ein Grund, warum man ja auch nicht <a href="javascript:irgendwas()"> verwenden soll).
Ein Mittelklick auf das Bild öffnet das Bild ganz normal, als wäre JavaScript aus oder Lightbox nicht vorhanden.
Und das dürfte es nach dir nicht bzw. das wünschst du dir? Das kann man nur verhindern, wenn man per JS das href-Attribut entfernt oder erst gar keines nutzt.

darph
2006-03-31, 18:18:15
Ich will, daß sich bei allem, was nicht "einfacher Linksklick" ist, das Bild im neuen Tab öffnet. Wenn ich das einfach anklicke, dann passiert das, was der Autor sich gedacht hat.

Bei allem Anderen will ich die Kontrolle haben.

Kinman
2006-04-01, 03:12:25
Ich will, daß sich bei allem, was nicht "einfacher Linksklick" ist, das Bild im neuen Tab öffnet. Wenn ich das einfach anklicke, dann passiert das, was der Autor sich gedacht hat.

Bei allem Anderen will ich die Kontrolle haben.

Also bei Linksklick öffnet sich das Bild mit der Lightbox "über" derselben Seite so wie es laut Designer sein sollte. Bei Mittelklick oder Rechtsklick und etwas auswählen öffnet sich das Bild im neuen Tab/Fenster ohne irgendwelchen JS.

Zumindest im Opera.

Was passt Dir jetzt daran nicht?

darph
2006-04-01, 14:55:39
Was passt Dir jetzt daran nicht?Daß es beim Avant nicht so ist. ;(

Aber wenn's im Opera funktioniert, ist es eine Browserschwäche, keine Design/Programmierschwäche. ;(

Mark
2006-04-12, 22:42:02
leider funktioniert es nicht wenn flash auf der seite ist:

http://www.skyworxx.de/new/index.php?go=pictures

//edit
funzt doch mit nem kleinen trick:
http://www.sitepoint.com/forums/printthread.php?t=158317&page=2&pp=25

Frozone
2006-06-09, 14:17:58
Mark[/POST]']leider funktioniert da sganze nicht mit iframes

oder hat jemand ne möglichkeit gefunden ddie thumbs in einem iframe zu haben, das komplette bild aber auf der ganzen seite?
könnte mit soetwas vielleicht reallisiert werden.
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function popUp(URL) {
fenster=window.open(URL, "Popupfenster", "width=400,height=300,resizable=yes");
fenster.focus();
return false;
}
// End -->
</script>

nutze das um aus dem I-Frame zu kommen.

DanMan
2006-06-09, 15:02:00
Kenn ich, nur funktioniert das bei mir nicht. Beißt sich wohl mit meinen Firefox-Erweiterungen...

Gast
2006-06-09, 17:46:38
blöde frage.. gibbed sowas auch mit deutschen buttons :)

ich mien ich kann englisch aber find das immer wieder doof wenn alles deutsch ist und dann hier und da nen englisch schnippsel

outlaw_wolf
2006-06-09, 18:42:13
Schiller[/POST]']JavaSkript ist ja auch sooooooo böse und soooooo selten in Browsern integriert. :nono:

;D :ulol:

Deswegen nutzen es auch ca. 90% der User.... :D
Wie alles was unsicher ist. ROFL