1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von looks, 29. Juni 2016.

  1. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    9
    Mit diesem Plugin kannst du festlegen, ob beim Klick auf ein Thumb anschließend nur das eine Bild in der Lightbox oder die ganze Galerie angezeigt wird. So etwas suchst du, habe ich das richtig verstanden?

    https://de.wordpress.org/plugins/responsive-lightbox/
     
  2. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    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
     
  3. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Oh, wie habt ihrs mit der Religion?

    Ich arbeite auch für statische Seiten nicht mit Dreamweaver, ich würde auch kein Print-Layout in Word machen (auch nicht in Corel Draw) … und ich persönlich würde freiwillig auch nicht den Visual Composer (meine Finger wollen immer Visual Composter tippen) benutzen.
    Ich gestehe aber zu, dass es Menschen gibt, die mit solchen Werkzeugen gut zurecht kommen können und damit ziemlich gute Sachen hinbekommen.

    Ich erinnere mich noch sehr gut, wie ich das im Lauf der Jahre mit WordPress allmählich gelernt habe. Und es gibt immer noch vieles, was ich nicht kann, nicht weiß, was mich vor ähnliche Mauern stellt wie jetzt dich das Einzelbild, das bei Klick eine Galerie öffnet.
    Ich habe am Anfang schon viele PlugIns eingesetzt, die etwas hergestellt haben, wofür ich sonst in den PHP-Code im Template hätte eingreifen müssen und was ich mich da noch nicht so getraut habe. Z.B. solche PlugIns, die es ermöglichen, auf Seiten auch noch Beiträge auszugeben. Oder angepasste Widgets, die auf jeder Seite einen anderen Inhalt haben können, aber im Layout immer am gleichen Platz (=Widgetbereich) sind …
    Hihi, und meine Berührungsängste zu Javascript sind größer als zu PHP ;)

    Man wächst mit seinen Aufgaben.
    Ich gebe mir Mühe, eine Lösung auszuknubbeln, die dich nicht überfordern wird (bin eigentlich zuversichtlich).
    Du kannst parallel hier nochmal das Forum durchkämmen – der User Tubedesigner hat immer wieder ziemlich pfiffige Lösungen, wie man welche PlugIns für solche kniffligen Herausforderungen einsetzen kann. (Der Mensch muss eine irrsinnige Kenntnis von wirklich sehr vielen PlugIns haben – der ist auch so einer, der mit dem Composter umgehen kann …) Es würde mich nicht wundern, wenn er dein Problem auch schonmal beackert hat.

    Gruß
    helix

    Ah, vergessen: Shortcode, Galerie. Schau doch mal im Frontend, also wo die Galerie dann als Bilderreihe ausgegeben wird, ob das Ganze noch zusätzlich in p-Tags eingepackt ist? Beliebtes Spiel vom Editor … Und wenn dein p-Tag vielleicht ein Padding links definiert hat und ein margin nach unten …
     
  4. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    @ 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
     
  5. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Zwischenstand:

    Habe inzwischen doch noch den Quellcode dieses responsive-Lightbox-PlugIns auf GitHub gefunden. Hat mir aber nicht wirklich weitergeholfen – ich wollte ja nicht das PlugIn umschreiben …
    https://github.com/wp-plugins/responsive-lightbox

    Der Support-Bereich im PlugIn-repository ist sehr dünn: viele Fragen, wenig Antworten.

    Habe mein Setting aus Post #20 ausprobiert. Nein, die Lightbox findet dann nicht die anderen Bilder im jeweiligen Beitrag, sondern die anderen Thumbnails, die ebenfalls auf der Übersichtsseite stehen. War glaubich nicht so ganz, was wir haben wollten?
    Habe alles mögliche ausprobiert, wie ich der Lightbox die jeweils weiteren Bilder „beibringen“ kann. Ohne Erfolg. Mir fehlten dann einfach die Ideen, was ich vielleicht sonst noch probieren könnte, bin auch mit Suchen im Netz nicht weitergekommen.

    Insofern bin ich jetzt an dem Punkt, mit einer anderen Box weiterzuarbeiten. Mein Vorschlag: http://galleria.io

    Gruß
    helix
     
  6. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    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-portfolio-pro/link-gallery/



    2nd. On Link make an another gallery like this - http://demo.weblizar.com/responsive-portfolio-pro/protfolio-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.
     
  7. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    9
    1. 'TosRUs' auswählen
    2. 'Zeige ein einzelnes Postbild als Galerie' auswählen
     
  8. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    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?
     
  9. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    9
    Ich denke, es sollen in der Lightbox alle Bilder angezeigt werden? Falls du nur das aktuelle Thumb vergrößert haben möchtest, muss du es so machen

    1. 'Bild Links' deaktivieren
    2. 'Einzelnes Bild als Galerie' deaktivieren
    3. data-rel="lightbox1" einfügen z.B. <a data-rel="lightbox1" href="/wp-content/uploads/mein_bild1.jpg">, <a data-rel="lightbox2" href="/wp-content/uploads/mein_bild2.jpg">
     
  10. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    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.
     
  11. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    @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-content/uploads/2016/07/werk02.jpg" data-rel="”lightbox-video-0″"><img class="alignleft size-full wp-image-19" src="http://localhost/COLETTE/wp-content/uploads/2016/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-content/uploads/2016/07/werk05.jpg" data-rel="”lightbox-video-1″"><img class="alignleft size-full wp-image-22" src="http://localhost/COLETTE/wp-content/uploads/2016/07/werk05.jpg" alt="werk05" width="142" height="142" /></a>
    <a href="http://localhost/COLETTE/wp-content/uploads/2016/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-content/uploads/2016/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-content/uploads/2016/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
     
  12. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Wenn ich so genauer darüber nachdenke: Eigentlich haben wir falsch gesucht. Eigentlich brauchst du eine Kombination aus Lightbox und Slideshow. Und das tunlichst so, dass die Bilder erst beim Weiterklicken geladen werden.

    Wenn man danach sucht, kriegt man vor allem Slideshows, die ein zusätzliches Öffnen in einer Lightbox zulassen. irgendwie dann auch doppelt gemoppelt.

    Dann Suchstichwort „PopUp“ bzw. „wp plugin slider in popup“.
    Bei PopupPress gibt es eine Option „Image Slider on Click“. Schau dir das mal an. Ist auch kostenpflichtig, wäre aber in ähnlichem Rahmen wie die anvisierte Extension der Responsive Lightbox.
    Wobei die Lightbox für diesen Slider meinem Geschmack nach nicht ganz so schön ist.

    Ich war mit der galleria schon relativ weit gekommen (macht nix, ich wollte es ja auch wissen) – bei genauem Hinsehen ist da aber ein ähnliches Problem: Standardmäßig werden nur dann die Bilder erst beim Weiterklicken geladen, wenn man stattdessen Thumbnails (für jedes Bild) anlegt. Das ist das gleiche wie mit deinen unsichtbaren transparenten Mini-Gifs, nur in einer anderen Farbe …

    Die Frage, wann die Bilder geladen werden, stellt sich eigentlich bei jedem möglichen Lösungsansatz.
    Das würde mich dann wieder drauf bringen, eben doch die Bilder als einzelne Beiträge oder Attachment-Seiten zu laden. Und das dann in neuem Fenster aka PopUp-Fenster öffnen zu lassen …

    Muss ich jetzt nicht ausgeknobelt haben.
    Guck dir nochmal diesen „Image Slider on Click“ an – oder was du sonst vielleicht noch findest bei Suche in dieser Richtung. Und dann schau, ob das was ist, oder ob du schlicht bei deinen transparenten Gifs bleibst. Das ist dann alles in allem wirklich nicht die schlechteste Lösung!

    Gruß
    helix
     
  13. looks

    looks Active Member

    Registriert seit:
    29. Juni 2016
    Beiträge:
    30
    Zustimmungen:
    0
    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
     
  14. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    The Proof of the Pudding is in the Eating.
    Seite aufrufen, kompletten Quelltext anzeigen lassen: sind da die Bilder als solche (img-Tags) referenziert? Dann lädt sie der Browser auch …

    Was das Zeigen der fertigen Seite angeht: Ich denke, entweder du gehst dann damit in die Blogshow und machst es forenöffentlich. Oder ich sehe es dann halt auch nicht.

    Gruß
    helix
     
  15. chuck-die-bohne

    Registriert seit:
    29. August 2017
    Beiträge:
    10
    Zustimmungen:
    0
    Servus,

    ich wollte diesen Thread mal wieder ausgraben und nachfragen ob es dafür inzwischen schon ein Plugin Lösung gibt?

    Wäre super, wenn hier jemand eine Info hätte.

    Dankeschön,
    chuck
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden