Fancybox beim Aufruf der Seite

  • Hallo Supporters!


    Ich stehe (mal wieder) auf dem Schlauch. Es geht - wie im Titel schon steht - um die Fancybox. Das einbinden ist ja recht einfach, wenn man der Dokumentation folgt. Das klappt bei mir soweit auch. Es gibt aber eine Option/Feature die ich nicht hinbekomme: Das laden der Box direkt auf der Startseite. Ich bin JS-Neuling und deshalb hab ich keine Ahnung was verkehrt läuft. Das Default-Example läuft soweit per Klick, soll aber beim Seite laden als erstes erscheinen. Hintergrund ist, dass es sich um eine Webseite für Mitarbeiter handelt mit einer kleinen Doku (Link zu einem PDF im Downloadbereich) was die Page betrifft.


    Mein erster Lösungsansatz ist hier:

    Code
    <script type="text/javascript">
        $(document).ready(function() {
            $("#hidden_content").fancybox().trigger('click');
        });
    </script>

    da tut sich aber gar nix. Da ich nicht weiß wonach ich in der Entwicklerkonsole von Firefox schauen soll hilft mir das Tool leider auch nicht weiter. Gut als nächstes habe ich das getestet:

    https://stackoverflow.com/ques…okie-not-working/46200021

    Auch hiervon habe ich einige Lösungsansätze versucht, leider ohne Erfolg ... fie


    Es läuft Joomla 3.8.6

    PHP 7.0.28

    Template: Protostar


    Ich danke euch in voraus für die Unterstützung!

  • Code
    document.getElementById("test").click();

    Was hältst du hier von: https://codepen.io/anon/pen/bvLpaP (Der Unterschied zu deinem codepen link ist id="test" & der JS code rechts)


    Gib deinem Button element also eine eindeutige Id und nehme dann obiges JS zum ausführen des clicks.

  • Mal eine bescheiden Frage: Wo muss den folgender Code recht einfach eingebunden werden?

    Das einbinden ist ja recht einfach, wenn man der Dokumentation folgt. Das klappt bei mir soweit auch.

    Code
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
  • Vor dem /HEAD-Tag der index.php Deines Templates. Das ist aber abhängig davon, wie dieses arbeitet. Manche Templates erlauben es in den Optionen, zusätzliche Scripte einzubinden - bei anderen muss man wiederum suchen, wo der HEAD-Bereich zusammengeschustert wird.