ein Bild(thumb) - click öffnet eine Gallery in Lightbox - Wie geht das?

Hallo helix,

Gestern war ich dann 9:30 schon Richtung schlafen, nachdem ich fast den ganzen tag da rum gespielt habe, war ich ziemlich fertig, deshalb erst jetzt eine Antwort von mir.

Klar dieses css script ist nicht viel besser von der Ausgabe her, als es händisch machen, aber weniger aufwendig.

Also das mit dem Loop verstehe ich nicht so, das scheint aber noch oft gebraucht zu werden.
Da ich kein wirklicher Programmierer bin, würde mir ein Quellcode wenig helfen. Ich arbeite zwar seit vielen Jahren mit HTML, CSS und Javascript. aber wenn es dann tief in die Programmierung geht, muss ich passen. Bis jetzt konnte ich mich immer auf codes von anderen verlassen und diese anpassen. Aber jetzt mit Wordpress ist das schon ein bisschen anders und ziemlich Neuland für mich.

Zum Beispiel habe ich ein Folgeproblem mit dieser Galerie. eine Galerie macht ja einen shortcode. mit dem Visual Composer habe ich ein Pixelgenaue Darstellung gemacht, in dem ich zusätzlich noch css erweitert habe. Das heisst ein Bild ist innerhalb eines ROW's pixelgenau gesetzt, so dass es dann beim Ansehen auf Handy oder Tablett an der richtigen Stelle ist. Ein shortcode kann ich aber scheinbar nicht genau setzen oder mindestens ich weiss nicht wie. der ist jeweils ein bisschen nach links und nach unten verschoben.

Du bist ja da viel weiter mit wordpress, deshalb noch eine Frage an Dich, siehst Du es als sinnvoll an mit einem Plugin, wie dem Visual Composer zu arbeiten? Vordergründig ist der ja einfacher zu bedienen und man hat nicht nur den Code, aber er macht dann auch spezielle shortcodes. Da ich gewöhnt bin mit Dreamweaver zu arbeiten, habe ich mal versucht nach anleitungen aus dem Netz wordpress und dreamweaver zu verbinden, aber das ist mir bis jetzt noch nicht gelungen.
Wie arbeitest Du mit Wordpress?

Gruss und ein schönes Wochenende
Looks

@ Hille, sorry Deinen Eintrag habe ich erst jetzt gesehen: genau dieses Plugin habe ich aber erklär mir mal bitte, wie ich damit ein thumb auf der Seite darstellen und bei klick dann die lightbox aufgeht und ich dort durch mehrere Bilder klicken kann. Ich habe es damit nicht geschafft und denke alles ausprobiert zu haben, aber lass mich gerne belehren, wäre sogar sehr froh drum.

helix: Ja das mit der Religion! Ich arbeite da seit Jahren mit dreamweaver und das hat bestens bis jetzt funktioniert. Aber eben jeder, wie er will. Ja DU hast recht, ich brauche da sicher noch viele Stunden und Nerven, bis ich mich da wirklich dann gut Freund mit Wordpress werde. Es ist eben nicht einfach, wenn man so schwimmt, wie ich jetzt und dann auch noch was auf die Beine stellen sollte. Für Diene Hilfe bin ich Dir sehr dankbar und es ist wirklich toll, dass Du Dir da mit mir Zeit nimmst. Wegen Shortcode P tag, da habe ich natürlich auch gleich zuerst geschaut, aber dem ist nicht so. Werde das schon noch irgendwie auf die Reihe kriegen, hoffentlich....

Danke schon mal beiden und Gruss
Looks

Hallo helix,

danke schon mal ganz herzlich für den großen Einsatz. Ja das scheint ein recht schwieriges Problem zu sein, dass ich mir da aufgehalst habe. Ich selber habe auch viel regergiert, aber auch nichts brauchbares gefunden. habe das Forum nach lightbox durchsucht und da gab es nur zwei Einträge, die was damit zu tun hatten, der einte hatte keine lösung und die andere hat bei mir nicht funktioniert. da hat einer für das nextgen plugin geschrieben, dass man einfach erstes Thumb mit großem Bild verlinkt und dann die nächsten nur noch die Links als html reinschreibt. zwar wird damit das thumb angezeigt und das große Bild in lightbox geöffnet, aber die nächsten kommen nicht, also keine Lösung.
Ich habe ja auch verschiedene pluginhersteller angeschrieben. Unite gallery, da habe ich ja die antwort schon geliefert. Auf responsive Lightbox, warte ich noch auf eine Antwort. von weblizar habe ich eine Antwort bekommen, aber ich denke das ist es nicht:

----

Please view our plugin.

1st. create a link gallery link this: http://demo.weblizar.com/responsive-por…o/link-gallery/

2nd. On Link make an another gallery like this - http://demo.weblizar.com/responsive-por…grid-galleries/

Hope that will helped you.

----

So wie ich das verstanden habe, wird da ein Bild verlinkt mit einer anderen Seite, die dann in der Lightbox angezeigt wird. aber das ist dann irgendwie doppelt gemoppelt, denn dann habe ich in der Lightbox eine Seite mit thumbs, die dann wiederum eine Lightbox öffnen. So mindestens habe ich es verstanden, irgendwie konnte ich das nicht testen.

Dein Vorschlag galleria.io, da habe ich mal kurz rein geschaut und das heisst da ziemlich coden, wenn ich richtig verstanden habe. Für mich muss es nicht responsive Lightbox sein, aber ich habe sie ausgewählt, weil mir das Design der lightbox da noch am besten gefallen hat. Die LIghtbox sollte sich fullscreen öffnen und eine dunklen Hintergrund haben und dann auch responsive sein. für Responsive lightbox gibt es eine extension, die was kostet, aber die für mich dann eine ideal Darstellung wäre:

https://www.dfactory.eu/products/lightcase-lightbox/

Hier gefällt mir das die eben dann auch schöne einfache Pfeile hat und ist eben schön gestaltet. Aber wenn man de Code hat, nehme ich an, dass man dann auch zum Beispiel die Pfeile auswechseln kann etc... Nur so das Du eine Ahnung hast, was ich mir vorstelle.

Ich bin fast am aufgeben! eines will ich noch ausprobieren und zwar, ob ich eine Lösung finde, wo ich ein thumb verlinkt auf großes Bild habe und die anderen auch verlinkt auf großes Bild, aber das thumb ist versteckt(hidden). die Idee dabei ist, dass ich das thumb als ein Platzhalter-gif mache, wie früher beim HTML programmieren und zwar in der Größe von 1x1px. das wäre dann weniger als 1 k groß und das könnte auch bei einer grösseren Menge noch eine akzeptable Größe sein. Ich weiß aber nicht, ob ich das mit mehreren Galerien auf einer Seite schaffe. werde es heute Nachmittag versuchen. Klar das ist dann nur eine Notlösung, wenn Du aber noch was besseres findest, dann natürlich super.

Gruss und bis später mal
looks

P.S.: überlege mir mal noch in diesen Tagen mal die ganze Site online zu geben, damit DU es dann mal anschauen kannst. Muss dazu nur noch anschauen, wie man da von offline auf online transferiert.

Zitat von Hille

1. 'TosRUs' auswählen
2. 'Zeige ein einzelnes Postbild als Galerie' auswählen

So habe ich es auch schon gemacht und jetzt nachdem Du das gepostet hast nochmals probiert, aber geht bei mir nicht. es werden trotzdem ich Punkt 2 ausgewählt habe immer alle Bilder der Gallerie angezeigt. Ich habe ein Galerie einfach aus der Medienabteilung von Wordpress gemacht mit folgenden shortcode: [gallery order="DESC" ids="22,19,20,18"]. Diese 4 Bilder werden auf der Site und in Lightbox gezeigt.
Hast Du es getestet und geht es bei Dir?

Ja es sollen alle Bilder in der Lightbox angezeigt werden, aber auf der Seite selber soll nur ein Bild angezeigt und geladen werden. erst dann in der Lightbox sollen alle Bilder durch durchklicken angezeigt werden. Also ich mache eine Galerie mit 1. Bild thumb (soll auf der Seite sichtbar sein), 2-5 Bilder groß sollen auf der Seite nicht sichtbar und geladen sein und dann beim klcik auf das thumb öffnet sich die lightbox mit den großen Bildern. Das ist der große Knackpunkt, dass eben bei einer Galerie jeweils die alle Bilder auf der Website angezeigt werden.

helix & Hille:

So nun habe ich mal ausprobiert, was ich helix heute morgen geschrieben habe. Der Code sieht so aus:

<a href="http://localhost/COLETTE/wp-con…6/07/werk02.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-19" src="http://localhost/COLETTE/wp-con…6/07/werk02.jpg" alt="werk02" width="142" height="142" /></a>
<a href="http://localhost/COLETTE/wp-content/uploads/2016/07/img2.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>
<a href="http://localhost/COLETTE/wp-content/uploads/2016/07/img3.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>
<a href="http://localhost/COLETTE/wp-content/uploads/2016/07/img5.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>
<a href="http://localhost/COLETTE/wp-content/uploads/2016/07/img4.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>

<a href="http://localhost/COLETTE/wp-con…6/07/werk05.jpg" data-rel="”lightbox-video-1″"><img class="alignleft size-full wp-image-22" src="http://localhost/COLETTE/wp-con…6/07/werk05.jpg" alt="werk05" width="142" height="142" /></a>
<a href="http://localhost/COLETTE/wp-con…6/07/werk02.jpg" data-rel="”lightbox-video-1″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>
<a href="http://localhost/COLETTE/wp-con…6/07/werk03.jpg" data-rel="”lightbox-video-1″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>
<a href="http://localhost/COLETTE/wp-con…6/07/werk01.jpg" data-rel="”lightbox-video-1″"><img class="alignleft size-full wp-image-51" style="display: none;" src="http://localhost/COLETTE/wp-content/uploads/spacer.gif" alt="spacer" width="1" height="1" /></a>

Durch diesen Code habe ich nun was ich wollte. 2 Thumbs, die jeweils eine andere Galerie in der Lightbox zeigen. Okay das Problem ist, dass da eben thumbs geladen werden, die man nicht sieht. da ich diese Thumbs aber so klein als möglich gemacht habe, sind es nun bei den 7 Thumbs allerhöchstens 7k (Windows zeigt nicht weniger als 1k) die blind geladen werden. Es werden zwar noch viel mehr auf der Seite kommen, aber schätze, wenn es viel wird, dann höchsten 100k.

Falls jetzt nicht von Euch noch eine andere Lösung kommt, werde ich es wohl so machen müssen.

Gruß
looks

Lieber helix,

Zuerst nochmals viele Dank, dass Du Dich da eingeklingt hast und mir viel geholfen hast.

das mit dem image slider on click ist zuerst mal ziemlich nervig, das dies so reinslidet. ich mag diese Dinger nicht, aber was danach dort steht ist schon irgendwie die Richtung. ich frage mich nur, ob da nicht schon die Bilder irgendwie geladen wurden. Weil das wäre ja dann auch nicht der Sinn, dass alles geladen wird und der Besucher schaut nur mal kurz vorbei. Da ich mich nun endlich weiter der Seite widmen möchte, denke ich, dass ich mit der transparentgifs nicht schlecht fahre. ist ja dann meine erste website mit wordpress und da darf es dann auch noch ein bisschen verbesserungswürdige Teile haben.

Würde Dir dann gerne zeigen, wenn es dann mal fertig ist, denn immerhin hast Du mitgedacht und es wird Dich dann sicher interessieren, was daraus geworden ist. Darf ich Dir dann eine persönliche Nachricht mit dem Link schicken?

Da ich aber jetzt ein Spezialist an der Hand habe noch schnell was offtopic: Ich werde ja dann die Site von offline auf online transferieren müssen. es gibt ja dafür so duplicator Plugins. Hast DU damit Erfahrung und weißt was man nehmen sollte oder machst Du so was eher händlisch? Habe das auch noch als neuen Post gemacht, aber wollte Dich jetzt noch schnell fragen.

Denke nochmals für Deine Hilfe
looks