Hallo ich plane gerade für Bilder und Videos auf meiner Seite eine Art Pop up Fenster zu verwenden.
Zum Beispiel klicke ich auf ein Bild möchte ich dass dieses größer in der Mitte erscheint und der Rest der Seite verdunkelt wird.
Videos sollten auf die selbe Art so geöffnet werden können, sollte auch bei Youtube Videos funktionieren.
So etwas: http://dinbror.dk/bpopup/
Hat jemand eine Idee wie ich so etwas machen könnte ?
Hat jemand ein Tutorial oder ähnliches ? Sollte wenn möglich ohne Plug in funktionieren, da mit den Plug ins immer Wartungsarbeit entsteht …
Deklarativ, zugänglich und barrierefrei kann man das erreichen, indem man auf eine (PHP-Skript)-Ausgabe verweist, bei welcher die CSS-Stilvorlage dunkel gemacht ist und das Bild eben größer dargestellt und geeignet mit CSS positioniert ist.
Es ist aber deutlich effektiver, entweder direkt auf das große Bild oder auf eine Ausgabe zu verweisen, wo nur das große Bild oder das Video eingebunden sind. Je nachdem, wie es der Nutzer für sinnvoll hält, kann er das im selben Fenster öffnen oder in einem neuen.
Es gibt dann wohl auch Fertigskripte (java-script), welche zusätzlich dynamisch die Stilvorlage ändern und das große Bild nachladen, dafür den Verweis dann deaktivieren, der eigentlich auf die neue Seite führt.
Man muß bei solchen Skripten nur drauf achten, daß der komplette Inhalt zugänglich bleibt, wenn die Interpretation von Skripten deaktiviert ist, sonst taugt das ganze Konzept nichts.
Relativ einfach geht das mit jQuery. Am besten ist, wenn du den Pfad zum zu ladenden großen Bild an ein data-Attribut hängst, z. B. direkt an da Thumbnail / Vorschaubild.
Dann kannst du um das img z. B. ein a-Tag bauen. Analog Facebook würde ich damit auf eine Bild-Detailseite verlinken, in der du auch das große Bild anzeigst, vielleicht skaliert auf die Größe der Seite.
Jetzt legst du noch eine Dummystruktur an, in welcher du später mit javascript das Bild anschließend reinbastelst.
[code]
[/code]
Natürlich musst du noch einen close-Button oder ähnliches platzieren.
Dann benötigst du noch das entsprechende js:
[code]// Oben noch eine jQuery-Version einbinden
$(document).ready(function() {
$("img").each(function() {
if ($(this).attr("data-src-image")) {
var $img = $(this);
$(this).closest("a").on("click", function(clickEvent) {
clickEvent.preventDefault();
$("div#opacity").show("fast", function() {
$("img#imageLayer").attr("src", $img.attr("data-src-image"));
$("img#imageLayer").closest("table").show("slow");
});
return false;
});
}
});
});[/code]
Erklärung: Nachdem das Dokument vollständig geladen ist, wird an jedes A-Tag, welches ein img-Tag mit dem "data-src-image"-Attribut besitzt ein Klickhandler gesetzt. Klickt man also auf das A, wird dieser Code-Teil ausgeführt.
Dann wird die Seite verdunkelt. Anschließend das Bild gesetzt (ein Get-Ajax sollte nicht notwendig sein, da die heutigen Browser das Bild dann selbstständig nachladen, könntest du aber mit einem Spinner einbauen, wenn du willst) und schließlich auch sichtbar gemacht.
Ich hoffe, dass das ein kleines rudimentäres Tutorial wurde, wie man soetwas umsetzten kann. Das ist alle ungetestet aus dem Kopf geschrieben!
Hätte ich jetzt nicht erwartet, es sei denn du hast korrigiert und angepasst.
Mir ist heute eingefallen, dass ich position: absolute; geschrieben habe, besser wäre fixed, denn dann kannst du nicht rausscrollen.
Ich hoffe, du hast auch eine Detailseite angelegt, für Crawler, die kein js interpretieren (oder mich, der js nur zu Testzwecken aktiviert).
Entweder du verlinkst direkt auf das Bild oder eine Seite, auf der das Bild dargestellt wird.
Js sollte man nur für Usability einsetzen, nicht für Funktionalität. D. h. wenn du z. B. Rechtsklick “in einem neuen Tab / Fenster öffnen” klickst, dann sollte ein erwartetes Verhalten eintreten, d. h. keine Fehlerseite, sondern eben das Bild oder eine entsprechende Seite.
