EnlargeIt! freier Lightbox-Klon

gfc · #2 01.06.2008, 02:32

Nimm doch diese Icons:

famfamfam.com: Silk Icons

LonelyPixel · #3 01.06.2008, 15:05

Die fam³-silk-Icons haben aber Alphakanal-Transparenz.

EnlargeIt! ist unter GPLv3 lizensiert, LightBox unter CC-BY. GPL ist meiner Ansicht nach nicht die „freiere“ Lizenz hier. Hab ich was übersehen?

Den Effekt, dass das große Bild aus dem kleiner herausgezoomt wird, hab ich letztens schonmal gesehen und finde ihn sehr gut. Er ist sehr intuitiv, man sieht sofort, was passiert. Das „hüpfgleiten“ stört mich etwas, das „gleiten“ allein find ich optimal. Vielleicht sollte der Animationspfad noch sanft beschleunigen und abbremsen, nicht von Anfang bis Ende mit konstanter Geschwindigkeit laufen. Ich hab das in meiner JS-Library durch den passenden Ausschnitt und Skalierung der Sinusfunktion implementiert (von 1/2 bis 3/2 Pi z.B.).

Die Anzahl der Animationsschritte würde ich nicht als Zahl vorgeben, sondern aus der gewünschten Dauer und FPS errechnen. Die FPS (Frames pro Sekunde) kann man einigermaßen fest vorgeben, muss man ausprobieren, was noch flüssig läuft.

Den Hintergrund abdunkeln wäre auch als gleitender Übergang passend. Siehe z.B. die Fotos hier: Hardware-Ausstattung Â« unclassified beta (eigener JS-Code)

Der Nutzen der Drag&Drop-Funktion erschließt sich mir jetzt nicht. Wofür soll das gut sein?

Eine Funktion, mit der man direkt zum vorherigen/nächsten Foto einer Sammlung springen kann, wäre praktisch. Hat LightBox sowas nicht auch?

JonnyX · #4 01.06.2008, 15:38

Kann man doch, musst nur einstellen in der Demo (Navigation)

gfc · #5 01.06.2008, 15:51

Zitat:

Zitat von LonelyPixel

Die fam³-silk-Icons haben aber Alphakanal-Transparenz.

Natürlich, aber die kann man innert Sekunden in GIFs umwandeln.

LonelyPixel · #6 01.06.2008, 18:02

Zitat:

Zitat von JonnyX

Kann man doch, musst nur einstellen in der Demo (Navigation)

Okay, hatt ich nicht gesehen. Die Buttons sind nur noch etwas klein. Die gesamte Bildfläche wird nur für Drag&Drop verwendet.

Zitat:

Zitat von gfc

Natürlich, aber die kann man innert Sekunden in GIFs umwandeln.

Ob sie dann nochwas aussehen… Entweder man schneidet einen Teil der Transparenz ab oder man legt sich auf eine Hintergrundfarbe fest. In bestimmten Situationen kann das natürlich prima funktionieren, ist klar.

gfc · #7 01.06.2008, 23:17

aus eigener Erfahrung kann ich behaupten, dass man die FamFamFam Icons ohne sichtbare Qualitätsverluste in GIFs umwandeln kann. Und sonst gibts auch PNG Fixes für den IE < 7, einfach mal bei Google "png fix" eingeben, da landet man bei zahlreichen JS-Skripts dafür, u.a. IE PNG Fix - TwinHelix . Aber ich weiss, Notlösung

Timo@EnlargeIt · #8 02.06.2008, 16:45

Hallo LonelyPixel,

Zitat:

Zitat von LonelyPixel

Die fam³-silk-Icons haben aber Alphakanal-Transparenz.

EnlargeIt! ist unter GPLv3 lizensiert, LightBox unter CC-BY. GPL ist meiner Ansicht nach nicht die „freiere“ Lizenz hier. Hab ich was übersehen?

Jau, dass ich nie behauptet habe, dass ich das Skript unter einer freieren Lizenz zur Verfügung stelle als andere, sondern dass ich es unter einer freien Lizenz zur Verfügung stelle. Die Mehrzahl der verfügbaren LightBox-Derivate ist leider nur für den privaten Bereich kostenlos.

Zitat:

Den Effekt, dass das große Bild aus dem kleiner herausgezoomt wird, hab ich letztens schonmal gesehen und finde ihn sehr gut. Er ist sehr intuitiv, man sieht sofort, was passiert. Das „hüpfgleiten“ stört mich etwas, das „gleiten“ allein find ich optimal. Vielleicht sollte der Animationspfad noch sanft beschleunigen und abbremsen, nicht von Anfang bis Ende mit konstanter Geschwindigkeit laufen. Ich hab das in meiner JS-Library durch den passenden Ausschnitt und Skalierung der Sinusfunktion implementiert (von 1/2 bis 3/2 Pi z.B.).

Im Source wirst du beim Ein- und Ausgleiten jeweils eine Zeile finden, in der enl_factor als Formel definiert wird. Mach doch mal einen Vorschlag für einen netten Effekt!

Zitat:

Die Anzahl der Animationsschritte würde ich nicht als Zahl vorgeben, sondern aus der gewünschten Dauer und FPS errechnen. Die FPS (Frames pro Sekunde) kann man einigermaßen fest vorgeben, muss man ausprobieren, was noch flüssig läuft.

Das ergibt wenig Sinn; die verschiedenen Browser performen extrem unterschiedlich was JS und vor allem das bewegen mehrerer Elemente innerhalb des Browserfensters angeht, und dann gibt's ja auch noch unterschiedlich flotte Rechner; letztlich wäre eine FPS-Angabe sehr sehr ungenau (es sei denn man würde bei der Intialisierung des Skripts 'benchmarken' und einen Korrekturfaktor für die konkrete Browser/Rechner-Kombi ermitteln, wär aber overkill).

Zitat:

Den Hintergrund abdunkeln wäre auch als gleitender Übergang passend. Siehe z.B. die Fotos hier: Hardware-Ausstattung Â« unclassified beta (eigener JS-Code)

Das Abdunkeln ist mein absoluter Hass-Effekt und nur drin, weil es jemand unbedingt gerne haben wollte. Das stufenweise Abdunkeln wiederum läuft in bestimmten Rechnerumgebungen derart langsam und hakelig, dass ich eher nix davon halte es einzubauen. Dein Skript läuft bewusst nicht im IE6?

Zitat:

Der Nutzen der Drag&Drop-Funktion erschließt sich mir jetzt nicht. Wofür soll das gut sein?

Naja, es gibt natürlich und völlig zu Recht Menschen, die fotografieren ein PC-Gehäuse und sagen: Das ist ein PC-Gehäuse. Und dann tun sie ein Bild zu ihrem Spruch. Die brauchen das natürlich eher _nicht_. ;-) Wenn aber ein fotobegeisterter Mensch sich Bilder eines Motivs aus verschiedenen Perspektiven ansieht, oder Landschaftsbilder desselben Motivs mit unterschiedlichen Brennweiten, dann kann es durchaus mal Sinn ergeben, die nebeneinander zu stellen. Und dann sollte er die Bilder auch anordnen können denke ich. Zumal es - gerade in einer Fotogalerie - einfach Spaß macht, die Pics derart "anfassen" zu können.

Zitat:

Eine Funktion, mit der man direkt zum vorherigen/nächsten Foto einer Sammlung springen kann, wäre praktisch. Hat LightBox sowas nicht auch?

Ist in der aktuellen Beta drin.

Viele Grüße,
Timo

Timo@EnlargeIt · #9 02.06.2008, 17:03

Zitat:

Zitat von gfc

Und sonst gibts auch PNG Fixes für den IE < 7, einfach mal bei Google "png fix" eingeben, da landet man bei zahlreichen JS-Skripts dafür, u.a. IE PNG Fix - TwinHelix . Aber ich weiss, Notlösung

Ein Grund für die Entwicklung von EnlargeIt! war, dass die meisten verfügbare Lösungen sehr aufgebläht sind und/oder ein dickes Framework zwingend voraussetzen. Es kommen schnell mal 50 KByte und mehr für JS-Effekte zum Vergrößern von Bildern zusammen; da klatscht jeder ISDN-User begeistert in die Hände, und die 50.000 Modem-User allein in Deutschland stehen auf dem Fensterrahmen kurz vorm Suizid...

Wenn ich die Wahl hab, Buttons zu verwenden, die generell funzen, oder besonders 'schöne' und dann geht noch ein weiteres KByte für den Workaround drauf, dann bin ich für erstere Lösung. Zumal Alpha-Transparenz kein Allheilmittel für hässliche Button-Grafiken ist, was meinst du?

Das Grundproblem ist natürlich der IE < 7, da sind wir uns einig, aber da sind gerade im Firmenumfeld noch verflucht viele unterwegs, und die werden wir auch durch Diskutieren nicht weg bekommen.

Vielen Dank an alle für die Links zu den Button-Grafiken, ich schau die mal durch oder hol mir zumindest ein paar gute Ideen.

Gruß
Timo

LonelyPixel · #10 02.06.2008, 18:59

Zitat:

Zitat von Timo@EnlargeIt

Das ergibt wenig Sinn; die verschiedenen Browser performen extrem unterschiedlich was JS und vor allem das bewegen mehrerer Elemente innerhalb des Browserfensters angeht, und dann gibt's ja auch noch unterschiedlich flotte Rechner; letztlich wäre eine FPS-Angabe sehr sehr ungenau

Die FPS-Angabe ist immer noch konstanter als zwei andere Werte anzugeben. Außerdem ist nach deiner Argumentation, die ich nicht ganz teile, die Angabe von 2 festen Werten genauso unsinnig wie die eines FPS-Werts, denn auch dabei performen verschiedene Systeme unterschiedlich schnell. Ich habe in meiner Animationsklasse 25 FPS voreingestellt und hatte bislang noch nicht den Bedarf, das zu ändern. Dann geb ich noch die Dauer der gesamten Animation in einer Zahl an, unter der man sich was vorstellen kann und ich bin fertig. Wenn ich in der anderen Notation eine halbwegs flüssige Animation über 700 ms haben will, stelle ich 7 Schritte mit 100 ms ein. Ne, ist zu ruckelig. Also 50 ms. Jetzt noch die 7 verdoppeln. Da geht noch mehr. 30 ms. Jetzt sind es 14 * 50 / 30 = 23 Schritte. Ich find das umständlich. Aber gut, war nur ein Vorschlag.

Zitat:

Das Abdunkeln ist mein absoluter Hass-Effekt und nur drin, weil es jemand unbedingt gerne haben wollte.

Okay, das ist ein nachvollziehbares Argument, sich als Entwickler nicht drum zu kümmern.

Zitat:

Das stufenweise Abdunkeln wiederum läuft in bestimmten Rechnerumgebungen derart langsam und hakelig

Hatte ich noch kein Problem mit.

Zitat:

Dein Skript läuft bewusst nicht im IE6?

Ganz genau. Denn der IE6 ist mein absoluter Hass-Browser, der mich den gefühlten 100-fachen Entwicklungsaufwand anderer Browser kostet. Früher ging's in keinem IE, aber dann hab ich es im IE7 doch zum Laufen gebracht. Es gibt ja auch bei JS/DOM oft mehrere Alternativen, von denen manchmal sogar eine in allen Browsern geht. Außer im IE6 natürlich…

Zitat:

die nebeneinander zu stellen

Punkt für dich. Leider bin ich nicht drauf gekommen, dass man zwei dieser Popups gleichzeitig öffnen kann. (Liegt vielleicht daran, dass das bislang mit keinem anderen Web-Bild-Zoomer ging.) Sollte man dann im Zweifelsfall vielleicht dazuschreiben.

LonelyPixel · #11 02.06.2008, 19:19

Zitat:

Zitat von Timo@EnlargeIt

Es kommen schnell mal 50 KByte und mehr für JS-Effekte zum Vergrößern von Bildern zusammen; da klatscht jeder ISDN-User begeistert in die Hände, und die 50.000 Modem-User allein in Deutschland stehen auf dem Fensterrahmen kurz vorm Suizid...

Bist du sicher, dass das die richtige Zielgruppe für Fotos auf Webseiten ist? Meine Oma hat ein 56k-Modem, das dort allerdings seinem Namen nicht gerecht wird. Es ist schon quälend langsam, dort meinen eigenen – werbe- und fast bildfreien – Webmailer zu verwenden. Ich würde nie auf die Idee kommen, ihr dort im Web irgendwelche Fotos zeigen zu wollen. und ein qualitativ akzeptables JPEG-Bild mittlerer Größe gibt's auch nicht unter 50 kB. (20 Sekunden Ladezeit bei nem Modem, im Idealfall.)

Zitat:

Das Grundproblem ist natürlich der IE < 7, da sind wir uns einig, aber da sind gerade im Firmenumfeld noch verflucht viele unterwegs, und die werden wir auch durch Diskutieren nicht weg bekommen.

Nein, aber durch schlechte Darstellungsergebnisse. Wenn wir Webentwickler uns jeden Tag aufs neue den Arsch aufreißen, um auch dem letzten IE6 ein akzeptables Ergebnis zu entlocken (oft auf Kosten der Codequalität oder der Funktionen in anderen Browsern, die eigentlich mehr könnten), werden die IE6-Nutzer nur weiterhin sagen: „Was habt ihr denn alle, der funktioniert doch einwandfrei!“ Den technophoben Endanwendern, und das ist die größte Mehrheit von allen, ist gar nicht bewusst, wieviel Arbeit das ist, und es ist ihnen auch ziemlich egal.

LonelyPixel · #12 02.06.2008, 19:38

Sorry für die vielen Posts… Ich arbeite grad alles mögliche parallel ab…

Zitat:

Zitat von Timo@EnlargeIt

Im Source wirst du beim Ein- und Ausgleiten jeweils eine Zeile finden, in der enl_factor als Formel definiert wird. Mach doch mal einen Vorschlag für einen netten Effekt!

Code:

var pos = 0;   // ← Wert für die Ausgabe, zwischen 0 und 1, bei dir etwa: enl_factor
var time = timePassed / duration;   // ← Zeitanteil, bei dir etwa: enl_img.steps/enl_maxstep
if (moveType == "smooth")
{
	// we use the sine function from 3pi/2 to 5pi/2
	// scale down linear time percentage from 0...1 to 3pi/2 to 5pi/2
	pos = Math.sin(1.5 * Math.PI + time * Math.PI);
	// translate sine output from -1...1 to 0...1
	pos = (pos + 1) / 2;
}
else if (moveType == "exp")
{
	pos = Math.pow(time, Math.pow(2, moveVal));
}
else   // and "linear" is that case
{
	pos = time;
}

Mit dieser Methode wird der Ablauftyp konfiguriert:

Code:

// t = (string) Movement type: "smooth", "exp", "linear" (= "exp", 0)
// v = (number) Curve parameter [optional if unused by specified type]
//
// TODO. now "smooth" is a constant sine movement
// "smooth": uses a sine function
//           0 is no acceleration (linear movement).
//           positive values cause slow movement at start and end, fast in the middle
//           negative values reverse this
//
// "exp": negative values reverse the acceleration.
//        0 is no acceleration (linear movement).
//        x is a 2^x acceleration
//
this.setMovement = function(t, v)
{
	moveType = t;
	moveVal = v;
};

Mehr hier:
dynamic-lib Â« HTML, CSS und JavaScript Â« Code snippets Â« unclassified beta
Die Codeausschnitte stammen aus der Datei animation.js. Lizenz: GPL v2 oder neuer.

Timo@EnlargeIt · #13 04.06.2008, 11:05

Habe die beiden zusätzlichen Animationstypen in die aktuelle Beta eingebaut:
EnlargeIt! Demo Machine

Sehr geniales Zeuch, danke.

LonelyPixel · #14 10.06.2008, 21:34

Auch genial:
http://developer.mozilla.org/present...007/photos.svg

codethief · #15 16.06.2008, 18:45

Ich seh da gar nichts?

LonelyPixel · #16 16.06.2008, 19:56

Brauchst du nen Firefox-Browser. Vielleicht geht Opera und Safari auch. IE geht nicht und wird es auch so bald nicht, weil man in Redmond, WA, noch nie was von SVG gehört hat.

codethief · #17 17.06.2008, 18:35

Das war mir schon klar. Gestern zeigte er mir nichts an und jetzt gerade nur die Hälfte des Bildes. Ein Firefox3 RC2 Bug?

LonelyPixel · #18 17.06.2008, 22:53

Hm, im FF 2.0 geht's, nur sind die Ecken schwarz. Im FF 3.0 (weiß grad nicht, was ich da installiert hab, das verrät er mir nicht) ist der interaktive Bereich sehr niedrig, aber die Ecken sind gleblich gefärbt. Was jetzt richtig oder falsch ist, weiß ich nicht. Diese Animation gab's vor 2, 3 Jahren schon (zumindest einen Link darauf).

Naja, meine eigene JavaScript-Bibliothek zeigt jetzt auch langsam Fotos auf ansprechende Art und Weise an. Leider verschluckt sich der IE (7 natürlich) manchmal nach einiger Zeit, und im Firefox 2 und 3 ist alles etwas ruckelig. Opera und Safari packen es zu meiner vollsten Zufriedenheit. Was das Rendering angeht ist Firefox in manchen Bereichen immer noch allen anderen hinterher.

Timo@EnlargeIt · #19 22.12.2008, 19:02

Pünktlich zu Weihnachten (*g*) habe ich EnlargeIt! v1.1 veröffentlicht. Neu u. a.: Flash-Support, browserbasiertes Video-Playback (FLV, DivX, YouTube), noch einfachere Integration, neues optisches Gimmick Transparenz-Gleiten, Hintergrundgrafik im Rahmen, HTML-Support (iframes), schönere Buttons und Mousezeiger, bessere Kompatibilität mit exotischen Browsern, und das Skript jetzt modular, man kann sich mit EnlargeIt! Building Blocks jetzt also genau die Version zusammenbauen, die man benötigt, und dadurch die Größe des Javascripts auf bis zu 11 Kbyte reduzieren. Und noch eine Menge mehr.

Link wie zuvor EnlargeIt! v1.1 - das Skript ist natürlich nach wie vor freie Software (GPL 3.0).

Na denn: Schöne Feiertage!
Viele Grüße
Timo

codethief · #20 23.12.2008, 03:58

Sehr schön, gefällt mir! Allerdings solltest du vielleicht schönere (nicht so bunte) Icons einbauen. Weniger ist oft mehr!

Timo@EnlargeIt · #21 23.12.2008, 13:52

Wenn du GPL-lizenzierte für mich hast, oder dem Projekt welche beisteuern magst - her damit!

gfc · #22 25.12.2008, 22:07

mir gefallen die hier: famfamfam.com: Icons (insbesondere die Silk icons). Nicht unter GPL, sondern unter Creative Commons lizenziert. Aber das ist etwa vergleichbar ( siehe Creative Commons Attribution 2.5 Generic )

Timo@EnlargeIt · #23 26.12.2008, 00:34

Nein ist es leider nicht. Gemeinfrei oder unter (L)GPL, sonst geht nix, alles andere ist ein Lizenzverstoß wenn ich die Grafiken zusammen mit EnlargeIt bundle.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Lightbox Helfer für Webmaster	Speedreader	Web Design und Grafik	0	26.05.2008 00:55