Lightbox / Squeezebox

[Kerniger]

Hallo liebes Forum, ich weiß, dass es unheimlich viele Möglichkeiten gibt, wie man eine Lightbox erstellen kann, etc. Jedoch habe ich etwas, was mir vorgegeben wurde und ich muss nur daran Änderungen vornehmen. Jedoch hoffe ich sehr, dass irgendjemand mal da drüber schauen kann und mir dann sagen kann, wo und was ich da ändern kann.

Grundlegendes: Es gibt hier 2 Probleme. Einmal die mobile-Ansicht und einmal die sog. PC-Ansicht. (vorausgesetzt, man hat auch ein breiten Monitor)

Die Probleme anhand dieses Beispiel:

http://www.rsv-speiche.de/joomla/index.php/service/archivierte-berichte/190-sieben-podestplatzierungen-bei-landesmeisterschaft-bahn-in-leipzig.html

1. (Mobile Ansicht oder man macht einfach den Browser kleiner) Wenn man auf das Bild klickt, dann ist das Bild an sich klein, aber die sog. Umrandung auf volle fläche, anstatt angepasst zum Bild!

2. (PC-Ansicht) Wenn man etwas runterscrollt, und dann auf das Bild anklickt, dann springt es nach oben. Anstatt auf dieser Position zu bleiben. (Ich hoffe ihr könnt mir nachvollziehen?)

Nun zur CSS-Datei: Das ist diese Datei, die ich gefunden habe und schon mal versuchte dies zu ändern. Jedoch komme ich da nicht wirklich weiter! Ich hoffe jemand kann mir da helfen: view-source:http://www.rsv-speiche.de/joomla/media/editors/arkeditor/css/squeezebox.css

Vielen Dank!

[Matthias Scharwies]

Servus!

Grundlegendes: Es gibt hier 2 Probleme. Einmal die mobile-Ansicht und einmal die sog. PC-Ansicht.

ich sehe ein drittes: Dein Bild ist nur 120x94PX groß zu kelin für eine Desktop oder mobilansicht, viel zu klein für eine seitenfüllende Lightboxansicht.

(PC-Ansicht) Wenn man etwas runterscrollt, und dann auf das Bild anklickt, dann springt es nach oben. Anstatt auf dieser Position zu bleiben. (Ich hoffe ihr könnt mir nachvollziehen?)

Das JS lädt die Lightbox über den Seitenanfang. Im JavaScript würd ich nicht rumfummeln.

http://www.rsv-speiche.de/joomla/index.php/service/archivierte-berichte/190-sieben-podestplatzierungen-bei-landesmeisterschaft-bahn-in-leipzig.html

(Mobile Ansicht oder man macht einfach den Browser kleiner) Wenn man auf das Bild klickt, dann ist das Bild an sich klein, aber die sog. Umrandung auf volle fläche, anstatt angepasst zum Bild!

Die Umrandung einer Lightbox soll die gesamte Fläche umfassen, das Bild sollte sich auf die Größe des Bildschirms ausdehenen, aber es ist ja viel zu klein.

Das vorhandene

img { max-width: 100%; }

würde bei 100 x 750 px super aussehen.

Herzliche Grüße

Matthias Scharwies

[Kerniger]

Hallo Matthias Scharwies,

vielen dank für deine Antwort. Das die Bilder viel, viel, viel, viel zu klein sind, das weiß ich... Ich bin drauf und dran die orginalbilder zu bekommen. Diese bilder sind noch von der "alten" noch aktiven Homepage. Die Homepage mit der mobilen Ansicht, etc. befindet sich im Aufbau und liegt daher etwas "versteckt".

Aber nun kommen wir zum eigentlichen Problem: Problem Nr. 1:

(PC-Ansicht) Wenn man etwas runterscrollt, und dann auf das Bild anklickt, dann springt es nach oben. Anstatt auf dieser Position zu bleiben. (Ich hoffe ihr könnt mir nachvollziehen?)

Das JS lädt die Lightbox über den Seitenanfang. Im JavaScript würd ich nicht rumfummeln.

Das habe ich auch nicht vor, zumal ich da recht wenig kentnisse habe. Kann man das per CSS irgendwie anders zwingen? Ist es überhaupt irgendetwas anders möglich? Andernfalls wenns nicht anders zu ändern geht, außer am JS rumzuspielen, dann akzeptiere ich es als kleines "Schönheitsfehler". Auf ne Antwort würde ich mich trotzdem freuen. 😉

Problem Nr. 2: "gelöst"

Ich habe das Problem gefunden. Dein Tipp ist an sich nicht verkehrt. Viel wichtiger war, dass man in solch einem Fall, (wo das CSS etc. vorgegeben ist), "!important" zu setzen. Ich hatte mich immer wieder gefragt, warum die Umrandung nicht an das Bild anpasst. Den Befehl "auto" hatte es schlichtweg ignoriert.

Danke!

Gruß Kerniger