Moderne Fotogalerie mit Lightbox und Full Screen Funktion

Dexter schrieb am 03.06.2021 um 21:48 Uhr

Hallo,

die Fotogaleriefunktion/Lightbox im Magix Webdesigner Premium gefällt mir so nicht. Ich möchte nicht die weißen Ränder haben, die mit den Pop-up Fotos aufgehen, sondern gar keine Ränder und die Navigation zwischen den Fotos sollen nur zwei schlichte Pfeile am linken und rechten Rand des jeweiligen Fotos sein. Oben rechts dann das Kreuzsymbol zum Schließen und noch ein Symbol für eine Full Screen Funktion, die das Foto über den ganzen Desktop legt, welches man dann wieder schließen kann. Diese schon länger aktuellen und intuitiven Standardfunktionen zum Betrachten von Fotos findet man z.B. bei den typischen Fotografie-Seiten von Wix oder bei Plug-ins von Wordpress.

Der Wow Slider, den man einbinden könnte, hat zwar solche Funktionen, aber da kann man die kleinen Vorschaubilder nicht in der Größe beliebig anpassen und auf der Seite verteilen. Außerdem brauche ich primär keinen Slider sondern nur eine moderne Fotogalerie. Mich wundert es, dass der Magix Webdesigner Premium da so wenig anbietet.

Wie kann man das im Webdesigner umsetzen?

Freue mich auf Lösungen.

 

Kommentare

BeRo schrieb am 04.06.2021 um 09:56 Uhr

Du hast eine nahezu identisches Problem schon im Feb. 2014 gepostet (klick) und darauf sehr ausführliche Antworten/Tipps bekommen.
Das da Gesagte gilt sinngemäß auch heute noch... 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Dexter schrieb am 04.06.2021 um 12:25 Uhr

Hallo BeRo,

ja, aber da ging es vor allem um das SlideShow Widgets, das ich noch heute mit Erfolg so verwende (und mir damit das Fotosildeshow Widgets des Content-Katalos erspare, bei dem man schon nach einem Jahr keinen Zugriff mehr hat und seine Fotos nicht mehr austauschen kann...).

Jetzt möchte ich aber eine Lightbox mit Full Screen Funktion, genauso, wie auf dem Screenshot (eine Wix Fotographen- Seite). Das ist ein ganz schlichtes, aber modernes intuitives Design. Das muß doch mit einem Code oder Script auch im Webdesigner möglich sein?

Anbei mal die Vorlage von Wix, wobei ich noch die Walhl haben möchte, ob der Hintergrund weiß oder schwarz sein soll, bzw. sich der Hintergrund abdunkelt bei der Foto-Popup Funktion. Links oben das Symbol für den Full Screen Modus, das kann natürlich auch rechts oben sein.

Wenn das mit Webdesigner nicht möglich ist, muß ich mich wohl von dem Programm verabschieden, was eigentlich nach all den Jahren schade wäre.

Und, geht da noch was?

 

 

marboe schrieb am 04.06.2021 um 12:40 Uhr

@Dexter

Es steht dir doch völlig frei im Web nach dem für dich passenden Code zu suchen. Der Einbau in den WD ist dann megaleicht.
Ich könnte mir gut vorstellen, dass irgendein Programmierer solchen Code anbietet; ob allerdings kostenfrei, dass weiß ich natürlich nicht. Suchworte im WWW könnten sein: Lightbox, Code, Webmaster
Da findest du unzählige Stellen wo solche Lightboxen gecodet werden. ZB hier. Gruß Marboe

Dexter schrieb am 06.06.2021 um 21:39 Uhr

Hallo,

danke, das habe ich gemacht und bin fündig geworden, nämlich hier: https://www.cssscript.com/fullscreen-lightbox-fslightbox/

Da gefällt mir das Design und die schlichte Bedienung, samt Fullscreen-Funktion sehr gut.

Leider kenne ich mich weder mit HTML noch mit Javascript aus (so zum Thema megaleicht...), kann aber gut erklärten Anleitungen sicher folgen. Vielleicht kann mir jemand Schritt für Schritt erklären, wie ich diesen Code im Webdesigner einbaue und dann mehrere Bilder auf einer Webseite in die Lightbox integrieren kann.

Besten Dank im Voraus.

Dexter schrieb am 08.09.2021 um 13:34 Uhr

Hallo,

schade, daß Bero jetzt aufgehört hat. Er hätte mir bestimmt geholfen.

Hat denn jemand inzwischen eine Lösung, wie ich die Fullscreen-Lightbox einbaue oder muß ich mich vom Webdesigner verabschieden?

Gruß

 

Dexter schrieb am 08.09.2021 um 20:03 Uhr

Bevor ich hier Fragen stelle, versuche ich es dutzend Mal selbst und suche auch im Internet nach Lösungen. Von zurücklehnen ist da keine Spur. Also entweder ist der Einbau sehr kompliziert (wobei Marboe schrieb, es wäre megaleicht) oder, und das glaube ich viel mehr, es gibt hier im Forum keinen der Ahnung hat. BeRo war wohl der letzte, der sich auskannte.

Schade.

marboe schrieb am 09.09.2021 um 09:29 Uhr

(wobei Marboe schrieb, es wäre megaleicht)

Ja. Da bleibe ich auch dabei.
Einen Fremdcode in den WD einzubringen kostet drei Mausklicks. Rechteck aufziehen, unter Eigenschaften mit Code ersetzen, speichern. In den allermeisten Fällen reicht die skizzierte Iframe-Option völlig aus.


Dein Problem ist der Fremdcode. Manchmal reicht eine Ergänzung im Body, manchmal ist auch ein Eintrag in Body und Head notwendig (dann sind es zwei Mausklicks mehr). Du kannst auch jederzeit dein Projekt auf die Festplatte exportieren und dort dann den htm-Code manipulieren.
Die Frage ist reduzierbar auf: wo bekomme ich den Code her, der dann eingebaut wird. Das ist Programmierarbeit. Entweder du findest Code zum Einbauen im Netz (kostenfrei oder auch mit Mietkosten), oder du programmierst selbst.
Vielleicht kannst du dich doch mit den zahlreichen, im WD bereits angebotenen, Widgets anfreunden? Ich finde die Auswahl, ehrlich gesagt, sehr zahlreich. Wenn nicht, dann musst du dir leider einen Programmierer suchen. Dieser dürfte da einige Stunden für brauchen. Für die üblichen WD-Nutzer (und somit auch die Forumsuser) ist das eher nix, denn sie nutzen ja genau deswegen den WD; weil man da eben nichts davon verstehen muss.
Gleiches gilt natürlich, sobald am WD-Code eines Widgets herumgeändert werden soll; auch das ist schon ein wenig Arbeit.
Gern drücke ich dir aber die Daumen, dass du noch was findest, was dich glücklich macht. Gruß Marboe

Dexter schrieb am 09.09.2021 um 09:40 Uhr

Hallo Marboe,

nur um Missverständnisse vorzubeugen, den Code habe ich schon längst, nämlich unter: https://www.cssscript.com/fullscreen-lightbox-fslightbox/

Den Code habe ich mir heruntergeladen (ist umsonst) und es mit dem Rechteck und dem Eintrag des Codes im Body zig Mal in vielen Varianten durchprobiert. Aber es hat nie funktioniert. Nur deswegen fragte ich hier nach Hilfe.