(gelöst) Social-Media-Icons mit "Shariff" in Fancybox einbinden

    Hallo, ich habe ein Problem mit den Social-Media-Icons + Shariff, vielleicht kann mir jemand helfen.

    Ich nutze Zeta-Producer 13 + Layout: Clean Style Responsive.
    Habe nun Shariff eingebunden. Die Icons sind auf der Website sichtbar und ich kann auch die erweiterten Einstellungen nutzen (data-button-style usw.). Nun möchte ich gerne die Icons innerhalb der "Fancybox" anzeigen.



    Das ist mein Haupt-Ziel:

    Nach dem Vergrößern der Grafik sollen die Social-Icons oben-rechts (über der Grafik), zu sehen sein.



    Um mich "heranzutasten" habe ich mir erst einmal die Stelle im Code - aus der imagegallery.js (Bild-Widget) - herausgesucht wo die Bildbeschreibung ausgegeben wird.

    (um vorerst die Icons an dieser Stelle sichtbar zu machen) …leider ohne Erfolg!


    Folgendes habe ich bisher gemacht:

    (funktioniert auf der restlichen Website)



    Globale Attribute (additional_css)

    Code
    1. <link rel="stylesheet" type="text/css" href="/shariff/shariff.complete.css">


    Am Ende des Contents -> oberhalb vom Footer (mit Quelltext-Widget eingebunden )

    Code
    1. <script src="/shariff/shariff.min.js"></script>


    So sieht die Ordnerstruktur aus:


    Ich hatte vorher die "shariff-Dateien" im Ordner "output/assets" (mit entsprechendem Pfad). Die Social-Media-Icons wurden korrekt innerhalb von Zeta-Producer und auch online angezeigt. Mit der aktuellen Struktur sehe ich die Icons nur noch online. Das ist aber ein geringeres Problem, hatte es testweise geändert um Fehler einzugrenzen und erst einmal so belassen. Hat aber leider nichts gebracht…


    Folgende Anpassung/Ergänzung habe ich vorgenommen:

    Bild-Widget (SingleImage) - Kopie (imagegallery.js)



    ("TEST-123" habe ich eingefügt um zu sehen ob sich überhaupt etwas ändert)


    Ergebnis Fancybox-PopUp (funktioniert):




    Code
    1. <div class="shariff"></div> //Wird ausgegeben, bleibt aber "leer"! Siehe Browser-Code unten…


    !!! Hier sieht man das Problem !!!

    Browser-Code ( mit Fancybox-PopUp aus imagegallery.js ):



    So wäre es richtig!

    Shariff-Browser-Code auf der Website wo die Icons sichtbar sind:




    Es scheint so, also ob "Shariff" innerhalbe der Fancybox keinen Zugriff auf seine Daten hat.


    Nun meine Fragen:

    1. Ist der Ansatz richtig um mein Ziel zu erreichen?

    2. Was muss ich ändern, damit Shariff die Daten auch innerhalb der Fancybox korrekt anzeigt?

    3. Liegt es evtl. an der Ordnerstruktur, oder URL-Pfad... oder bin ich komplett auf dem "Holzweg"?


    4. Kann mir bitte jemand weiterhelfen?



    Vielen Dank.

    Hallo acanthus


    für eigene angepasste Widgets können wir hier leider keinen kostenlosen Support bieten, da das schnell kompliziert und zeitaufwändig wird. Evtl. hilft Ihnen aber ein Benutzer hier aus dem Forum weiter. Allgemein würde ich auch empfehlen bei solchen Umsetzungen genau zu überprüfen, ob denn der Besucher der Website davon überhaupt einen Nutzen hat und ob der Aufwand dafür dann auch tatsächlich gerechtfertigt ist. Einfache Lösungen sind meistens die Besseren. Also warum die Social-Media-Icons unbedingt in die Fancybox und nicht einfach unterhalb des Bildes platzieren?

    Guten Morgen Steffen,


    ich habe die Zeta-Business-Version und noch nie ein Ticket eingelöst, Wenn ich mich richtig erinnere, habe ich noch ein "Frei-Ticket". Wenn Sie mir helfen könnten, würde ich es gerne für die Lösung dieses Problems einlösen.


    Sie haben natürlich völlig recht mit Ihrer Empfehlung bezüglich des Aufwands. Hatte mir alles etwas einfacher vorgestellt... "Das passe ich doch mal eben an, sieht doch schicker aus..." so war mein Gedanke, jetzt hänge ich schon seit Tagen dran... ;) Die nächsten Projekte werden viele kostenlosen Bilder beinhalten und da wäre es für mich sehr wichtig, dass diese Funktion so professionell wie möglich aussieht. Am besten natürlich so wie es auf der Grafik oben zu sehen ist.... oder als "Notlösung": unterhalb des Bildes od. rechts neben der Bild-Beschreibung.


    Meiner Meinung nach sieht es innerhalb der Fancybox einfach besser aus und man hat (z.B. bei einer Bilder-Galerie) nicht dutzende Social-Icons auf einer Seite. Das kann schnell sehr überladen wirken. Innerhalb der Fancybox wären die Icons schön versteckt. Der Besucher könnte gezielt dieses eine Bild teilen... Ich habe diese Funktion schon oft als Wordpress-Widget gesehen, sieht echt toll aus.


    Der Nutzen für den Besucher wäre eine bessere Übersicht. Der Nutzen für den Website-Betreiber wären evtl. eine größere Verbreitung der einzelnen Grafiken/Bilder, wenn man es oben rechts neben dem schließen Button platziert... müsste getestet werden... Wie auch immer, wenn es nicht anders klappen sollte und mir keiner helfen kann, werde ich es so machen wie Sie es empfohlen haben.


    Würden Sie mir denn helfen, wenn ich ein Ticket einlöse? Wenn ja, werde ich es gerne machen!

    Hallo,


    über ein Support-Ticket helfen wir bei Fragen zu Bedienung und Programmfunktionen. Nicht beinhaltet sind z.B. Umsetzungen von Designanpassungen oder Hilfe beim Erstellen von Skripten oder Widgets. Bei solche Anpassungen können wir also leider nicht helfen, da fehlen uns einfach die Ressourcen. Sorry! Evtl. hilft die Developer-Dokumentation: https://developer.zeta-producer.com/index.html

    Hmmm... schade... :(

    Aber dafür habe ich Verständnis. :)


    Ich werde mal sehen was ich machen kann.

    Vielleicht hilft mir noch jemand aus dem Forum...


    Danke für die Infos!

    Also, hab jetzt eine Idee wodran es evtl. liegen könnte.

    Der Container: <div class="shariff"></div> scheint ja innerhalb von Fancybox keine Daten zu erhalten.

    Also, fehlt dem Konstrukt sicherlich der Zugriff auf shariff.min.js..?! 


    Um meine Fragen etwas einzugrenzen (Wenn es hoffentlich etwas damit zu tun hat):


    Wie kann man die shariff.min.js so einbinden, dass auch der Zugriff innerhalb der Fancybox möglich ist?


    innerhalb von imagegallery.js hab ich bereits folgendes probiert umd das shariff-script einzubinden:


    imagegallery.js

    Code
    1. //Note that the script will load and you can access the variables inside it, but you wouldn't see the actual <script> tag in the DOM.
    3. //Quelle für Code: https://stackoverflow.com/questions/9413737/how-to-append-script-script-in-javascript
    5. var s = document.createElement("script");
    6. s.type = "text/javascript";
    7. s.src = "/shariff/shariff.min.js";
    8. $("body").append(s);

    Will aber auch nicht so richtig funktionieren.

    Bin ich auf dem richtigen Weg? Kann mir jemand einen Tipp geben?

    Irgenwer hat doch so etwas bestimmt schon mit Zeta-Producer gemacht...


    Achja, und wenn's geht bitte nicht alle auf einmal! ;)

    Dankeeee...

    Vielleicht hilft Dir page.pathToRoot. Innerhalb der imagegallery.js wird das ZP aber glaub nicht rendern können. Aber in der standard.html des Widgets oder in der default.html des Layouts sollte das funktionieren.


    Könnte dann so aussehen: <script src="<$= page.pathToRoot $>assets/shariff.min.js"></script>


    Siehe auch: https://developer.zeta-producer.com/page-objekt.html#a1544, https://developer.zeta-produce…sion-14-konvertieren.html, https://developer.zeta-produce…genes-logo-einfuegen.html

    Ich hab's ausprobiert:


    imagegallery.js - wurde nichts angezeigt, wie Du vermutet hast wurde es nicht gerendert. (werde es aber nochmal probieren)

    standard.html - wurde JS im Code angezeigt, aber nur auf der Hauptseite und je Bild. Für jedes Bild-Widget wurde das Script 1x eingebunden, kommt dann also x-fach vor.

    default.html (Layout) - JS wurde im Code auf der Hauptseite angezeigt, aber war dann doppelt vorhanden, weil es dort bereits eingebunden wurde.


    Hatte leider keine Auswirkung auf die Fancybox.


    Vielleicht habe ich auch etwas falsch gemacht, ich schaue es mir morgen nochmal mit frischer Energie an.

    Die Links die Du geschickt hast sind sehr interessant, schaue ich mir alles in Ruhe an.


    Vielen Dank für Deine Mühe!

    Also, habe mich jetzt nochmal ein paar Stunden damit beschäftigt, kam aber leider zu keinem Ergebnis...


    Folgendes habe ich gemacht:

    Habe erst einmal die Stelle gesucht wo die Fancybox--Divs erzeugt werden, damit ich dort (vor body) shariff/shariff.min.js einbinden kann.

    Diese hier:




    1.

    Innerhalb von imagegallery.js gabe es folgenden Hinweis:

    // This code depends on jquery.fancybox css and js being loded via the global "_Shared"-Widget.


    2.

    Ok, Die _Shared-Widgets haben also auch etwas damit zu tun..

    Im Ordner: Widgets/_Shared/js/fancybox/ gibt es jquery.fancybox-1.3.4.js und weitere mit ...-1.3.4.pack.js am Ende.


    In jquery.fancybox-1.3.4.js gibt es die folgende Funktion, die scheinbar alles "zusammenbaut":



    Die JS mit ...pack.js am Ende scheinen auch etwas damit zu tun zu haben:



    Jetzt gehe ich mal sehr stark davon aus, dass wenn ich hier irgendwelche Änderungen vornehmen würde, es sich auf alle Projekte auswirken wird, die irgendwie etwas mit Bildern und Fancybox zu tun haben. Das will ich natürlich nicht... und ich weiß an dieser Stelle jetzt auch nicht mehr weiter.


    Ich habe auch keine Ideen mehr wie man zu einer Lösung kommen könnte, so dass am Ende ein "unabhängiges" Widget (Kopie) entsteht, wo ich bei Bedarf auch Social-Icons innerhalb der Fancybox anzeigen kann.


    Die Grundlegende Frage lautet immer noch:
    Wie kann man shariff/shariff.min.js so einbinden, dass innerhalb von Fancybox darauf zugegriffen wird und die Social-Icons dort angezeigt werden.


    Ich blicke nicht mehr durch, vielleicht hat ja jemand ein Idee... wäre natürlich schön, wenn es für Zeta-Producer eine Lösung geben würde.


    Falls ich (unerwartet) eine "Erleuchtung" bekommen sollte, werde ich es hier mitteilen...

    Es hat mich nicht in Ruhe gelassen. Jetzt funktioniert es!

    Ich bin im letzten Post etwas abgedriftet, ging in die falsche Richtung.


    Habe nochmal das aufgegriffen was Steffen geschrieben hat, und sein "...es sollte funktionieren" hat mich motiviert es nochmal mit imagegallery.js zu probieren.


    Folgendes habe ich gemacht:


    In imagegallery.js habe ich den return-Wert der Funktion zp.ImageGallery = function () erweitert.


    So sieht es aus:

    Code
    1. return '<script src="/shariff/shariff.min.js"></script>' + '<span id="fancybox-title-over">' + title + "TEST-100" + '</span>' + '<div class="shariff"></div>';


    Also einfach vorne drangehängt... hat mich gewundert das es so einfach funktioniert.

    Es ist bestimmt nicht die eleganteste und sauberste Lösung, aber es klappt. :D


    So sieht es dann in Fancybox aus:



    Jetzt muss ich nur noch die Buttons anpassen und irgendwie (dynamisch) die Verlinkung zum Bild hinbekommen. Aber das wird bestimmt eine andere Baustelle... ^^

    Wenn jemand eine elegantere Lösung hat, bitte her damit...


    Vielen Dank Steffen für die Infos, sonst hätte ich wahrscheinlich schon aufgegeben.


    So, das Wochenende ist gerettet!!!! :thumbsup: