pop-up Bilder
Justin
- javascript
Hi,
ich hab mir ein JS gemacht für meine Bildergalerie.
In der Galerie sind thumbs und beim klicken wird ein Fenster
geöffnet, aber jetzt geht es aufeinmal nicht mehr.
function pop (image,x,y)
{
Fenster1 = window.open(about:blank, "Bild", "width="+x+",height="+y+",left=200,top=100,menubar=no,resizeable=no,status=no,toolbar=no");
Fenster1.focus();
Fenster1.document.write("<body style='margin: 0px; vertical-align: center; text-align: center;'>");
Fenster1.document.write("<a href='#'><img src='"+image+"' onclick='window.close()' border='0'></a>");
Fenster1.document.write("</body>");
}
<a href="lowpoly/duck.jpg" onclick="pop(this.href,480,360); return false"><img src="lowpoly/t_duck.jpg" class="thumb"></a>
Mir ist auch aufgefallen (als es noch funktionierte),
dass Titel "Bild nicht angezeigt wird" und wenn ich das
pop-up offen habe und nochmal auf den thumb klicke,
dann ist der pop-up leer, beim nochmaligen Klicken wieder
das Bild da (was aber nicht so schlimm ist, weil ja bestimmt kei9ner
nochmal den thumb klickt, aber eine Lösung wäre trotzdem gut)
Lieber Justin,
aber eine Lösung wäre trotzdem gut)
mach' es ohne window.open()! Das ist sowieso wegen der Popup-Blocker sinnvoller. Ich könnte Dir diese Alternative anbieten.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
mach' es ohne window.open()! Das ist sowieso wegen der Popup-Blocker sinnvoller. Ich könnte Dir diese Alternative anbieten.
Cool, also auf deiner Seite kommt des schonmal gut,
hast du was dagegen falls ich es verändern würde
(was ich noch nicht weis)?
Hat ein script eigentlich auch copyright,
zb bei dem jetzt?
Lieber Justin,
hast du was dagegen falls ich es verändern würde
Nö. Mach damit, was Du willst. Ich habe die Funktionsweise dieses Scripts hier im Forum erarbeitet. Daher möchte ich besonders wegen der Mithilfe aller an der Diskussion Beteiligten auf jegliches Copyright an diesem Script verzichten.
Verstehe meinen Vorschlag als Anregung. Gerade neulich habe ich eine ähnliche Funktionsweise im Netz gesehen, die noch edler aussieht (legt einen dunklen Grauschleier über die Seite und blendet in der Mitte einen aktiven Fortschrittsbalken als animiertes Gif ein, bis das Großbild geladen hat), im Wesentlichen aber dasselbe tut.
Eine Verbesserung des Scriptes wäre, dass man das benötigte <div>-Element dynamisch erzeugt. Wenn man dann noch eine ganz spezielle CSS-Klasse verwendet, die sich das Script sucht, um die onclicks automatisch anzuwenden, dann kann man das ganze Script "unobtrusive" realisieren. Bis jetzt bin ich aber nicht dazu gekommen, diese Umsetzung zu realisieren. Wir können aber gerne per Mail oder hier im Forum dieses Script weiterpflegen, um genau das zu erreichen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo Felix.
Gerade neulich habe ich eine ähnliche Funktionsweise im Netz gesehen, die noch edler aussieht (legt einen dunklen Grauschleier über die Seite und blendet in der Mitte einen aktiven Fortschrittsbalken als animiertes Gif ein, bis das Großbild geladen hat), im Wesentlichen aber dasselbe tut.
Das klingt stark nach der Lightbox.
Einen schönen Mittwoch noch.
Gruß, Ashura
Lieber Ashura,
Das klingt stark nach der Lightbox.
genau das hatte ich auch vorgehabt. Nun ist es mir gelungen, dieselbe Funktionalität nachzubilden.
Allerdings ist meine Handhabung etwas anders. Man kann anhand einer bestimmten CSS-Klasse diese Funktionalität aktivieren, denn es sucht sich das Script alle Links innerhalb eines beliebigen HTML-Elements, das diesen Klassennamen trägt, und prüft, ob diese Links ein IMG-Element haben, um ihnen im Erfolgsfalle dynamisch einen onclick-Eventhandler zuzuweisen. Dadurch spare ich mir das rel-Attribut in den IMG-Elementen, was nicht nur Code einspart, sondern auch die Automation noch erweitert.
Meine Seite zum js_popup habe ich aktualisiert. Was hälst Du von meiner eigenen Lightbox?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo Felix.
Dadurch spare ich mir das rel-Attribut in den IMG-Elementen, was nicht nur Code einspart, sondern auch die Automation noch erweitert.
Keine schlechte Idee, Unabhängigkeit ist immer zu bevorzugen, auch wenn ich für meine Galerie lediglich folgende Zeile modififzieren musste:
echo ' <a href="'.$pic.'" title="Vergrößern"><img src="'.$thumb.'" '.$thumbsize[3].' alt="'.$picfile.'" /></a>'."\n";
Den Rest übernimmt die Automation.
Meine Seite zum js_popup habe ich aktualisiert. Was hälst Du von meiner eigenen Lightbox?
Sieht gut aus. Den Code habe ich zwar nur überflogen, habe aber dennoch nichts zu bemängeln gefunden. Dank der objektorientierten Schreibe machst du das Ganze recht flexibel.
Das „Schließen“ des „Popups“ mittels Klick irgendwohin ist recht praktisch und folgt dem Fittschen Gesetz.
Vielleicht mache ich bei Gelegenheit einmal einen Performance-Vergleich zwischen der Lightbox und deinem Script.
Einen schönen Freitag noch.
Gruß, Ashura
Lieber Ashura,
Sieht gut aus. Den Code habe ich zwar nur überflogen, habe aber dennoch nichts zu bemängeln gefunden. Dank der objektorientierten Schreibe machst du das Ganze recht flexibel.
Deine Zustimmung ehrt mich.
Das „Schließen“ des „Popups“ mittels Klick irgendwohin ist recht praktisch und folgt dem Fittschen Gesetz.
Das war bei der Lightbox auch so (glaube ich).
Vielleicht mache ich bei Gelegenheit einmal einen Performance-Vergleich zwischen der Lightbox und deinem Script.
Hihihi. Welches mehr Frames pro Sekunde schafft? Oder welchen Aspekt der "Performance" hattest Du gemeint?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo Felix.
Das „Schließen“ des „Popups“ mittels Klick irgendwohin ist recht praktisch und folgt dem Fittschen Gesetz.
Das war bei der Lightbox auch so (glaube ich).
Keineswegs. Dort kann man das „Popup“ nur per Klick auf eben dieses Schließen. Da man während der Anzeige aber sowieso kein anderes Seitenelement benutzen kann (sofern Bilder aktiviert sind natürlich) kann man auch den gesamten zur Verfügung stehenden Platz zum Schließen verwenden, so wie du es getan hast.
Hihihi. Welches mehr Frames pro Sekunde schafft? Oder welchen Aspekt der "Performance" hattest Du gemeint?
Weniger Trägheit. Ich weiß nicht warum, aber meine Operas haben irgendwie alle ein Problem mit Layouts, in denen zu viele alphatransparente PNGs genutzt wurden (träge Bedienung, hohe CPU-Auslastung). Aber darauf hat das JS weniger Einfluss, da hast du Recht.
Einen schönen Freitag noch.
Gruß, Ashura
Lieber Ashura,
ich habe jetzt gesehen, dass es zu der Lightbox noch eine Modifikation gibt, bei der Bilder, die größer als die momentanen Fensterdimensionen sind, resized werden. Über ein eingeblendetes Symbol kann man dann zwischen den tatsächlichen Ausmaßen und der resize-ten Darstellung hin- und herschalten. Das gefäält mir sehr gut - werde ich bei Zeiten auch noch integrieren.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo Felix.
ich habe jetzt gesehen, dass es zu der Lightbox noch eine Modifikation gibt, bei der Bilder, die größer als die momentanen Fensterdimensionen sind, resized werden.
Hm, Tatsache.
Ich hatte mir die Seite offenbar doch noch nicht vollständig durchgelesen.
Danke für den Hinweis.
Einen schönen Samstag noch.
Gruß, Ashura
Lieber Ashura,
es ist sicherlich zuviel verlangt, dich um einen hilfreichen Tipp für meinen Lightbox-Nachbau "js_popup" zu bitten, denn mein Code ist ziemlich umfangreich geworden...
Der IE will und will mein resizeIcon nicht per dynamisch gesetztem "onmouseover" und "onmouseout" ein- bzw. ausblenden. Es erscheint einfach nix! Auch ein testweise in die Funktion eingeflochtenes alert("Hallo dummer Programmierer, hier verarscht dich dein IE!");
bleibt im IE völlig ohne Folgen.
Dabei habe ich für die Zuweisung der Eventhandler zweierlei Herangehensweisen ausprobiert:
1. Version: objekt.onmouseover = function(e) { tuwas() };
(Arbeitet in FF und Opera wie erwünscht, nur IE zeigt keine Reaktion)
2. Version mit eigener addEvent-Funktion (siehe Code "js_popup.functions.addEvent()")
(Arbeitet ebenso in FF und Opera wie erwünscht, nur auch hier ignoriert der IE anscheinend alles außer "onclick")
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Dabei habe ich für die Zuweisung der Eventhandler zweierlei Herangehensweisen ausprobiert:
- Version:
objekt.onmouseover = function(e) { tuwas() };
(Arbeitet in FF und Opera wie erwünscht, nur IE zeigt keine Reaktion)
Ich hatte damit bisher keine Probleme, selsbt mein altertümlicher IE 4 macht das folgende anstandslos (natürlich mit einer Umsetzung für document.all):
window.onload = function()
{
var o = document.getElementById('test');
o.onmouseover = function() { alert( this.id ); };
}
</script>
</head>
<body>
<div id="test"> mouse over </div>
</body></html>
Struppi.
Lieber Struppi,
window.onload = function()
{
var o = document.getElementById('test');
o.onmouseover = function() { alert( this.id ); };
}
</script>
</head>
<body><div id="test"> mouse over </div>
</body></html>
genau dieses hatte ich auch in beiden versionen ausprobiert und - Erfolg gehabt! Nur in meinem großen js\_popup-Objekt versagt mir der IE die Dienste. Auch Testeingaben in der Browser-Adresszeile (à la "javascript:tuewas()") brachten keine aufschlussreichen Erkenntnisse.
Magst du dir [das mal anschauen](http://www.felix-riesterer.de/main/seiten/js_popup.php)? Du bist für mich sowas wie der SELFHTML-Javascript-Wizard hier. Wenn du nichts findest, dann findet niemand etwas.
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),
Felix Riesterer.
Magst du dir das mal anschauen? Du bist für mich sowas wie der SELFHTML-Javascript-Wizard hier. Wenn du nichts findest, dann findet niemand etwas.
Danke für die Blumen :-)
Das möchte ich aber hier weitergeben. An Mathias (molily), Cheatah und auch Stefan Raber und (seltener Leser) Peter Seliger, von denen ich hier vieles abgeschaut/gerlernt habe.
Ich schau mir das später an, hab hier nur einen IE 4.
Struppi.
Magst du dir das mal anschauen?
Bei mir scheint der Event zu klappen, allerdings zeigt der IE nur einen Ausschnit an, während OP 7 beim ersten Klick das Bild nur 90x90 Pixel gross anzeigt.
Warum - weiß ich nich nicht.
Struppi.
Lieber Struppi,
Bei mir scheint der Event zu klappen, allerdings zeigt der IE nur einen Ausschnit an, während OP 7 beim ersten Klick das Bild nur 90x90 Pixel gross anzeigt.
Warum - weiß ich nich nicht.
ich danke Dir für Deine Hilfe. Meine IEs (IE6XP+SP2, IE5.5 standalone, IE5.0 standalone) zeigen das ResizeIcon überhaupt nicht an. Damit beweist sich einmal mehr, dass der IE keine sinnvolle Software für Internetseiten ist. Ob der Nachfolger in diesen Dingen endlich besser wird? Es sieht ja nicht so rosig aus, wenn man glaubt, was man so liest...
Liebe Grüße aus Ellwangen,
Felix Riesterer.