Javascript Bildergalerien in die Seiten einbinden

Thema wurde von Carsten [M-1504], 20. Juni 2017 erstellt.

  1. Carsten [M-1504]
    Carsten [M-1504] Erfahrener Benutzer
    Registriert seit:
    16. November 2015
    Beiträge:
    167
    Danke erhalten:
    8
    Danke vergeben:
    72
    Leute !!

    Ich komm mal wieder nicht weiter.

    Ich möchte ne schöne Bildergalerie auf meinen Seiten einbinden und habe hier im Forum bei anderen Threads zu diesem Thema unter anderem diese Seite hier gefunden:

    http://www.elevateweb.co.uk/image-zoom/examples

    - Aber was genau muss ich jetzt in den <head> also in die head.html einfügen ?
    - Was muss ich ggf. in die css einfügen ?
    - Wo platziere ich die *.js-Dateien ?
    - Was gebe ich in den <body>-Bereich ein ?

    Vielen Dank schonmal !
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das steht doch da.
    das aus "html" kommt dahin, wo die Bilder sein sollen.
    Für das Javascript erstellst Du eine Datei und packst diese in
    templates/ Honeygrid/ usermod/ js/ global/

    Und das was unter css steht, fügst Du entweder in Deine eigene css-Datei ein, oder in den Style Editor unter "eigenes css"

    Wichtig ist, das sie Bilder in 2 Größen da sein müssen, einmal das "normale" Bild und einmal das Zoom-Bild.
    Und die Pfade / Bildnamen müssen im html-Teil angepasst werden
     
  3. Carsten [M-1504]
    Carsten [M-1504] Erfahrener Benutzer
    Registriert seit:
    16. November 2015
    Beiträge:
    167
    Danke erhalten:
    8
    Danke vergeben:
    72
    Was meinst du genau mit :
    Und wo steht da auf der Seite was von css ?

    Sorry barbara, steh diesmal voll aufem Schlauch :(
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Es haben nicht alle Varianten css, wenn welches benötigt wird, gibt es dafür einen eigenen Bereich.
    (z.B. die Variante ganz unten hat ein css-code)

    Du erstellst eine Datei "bilder.js", da fügst Du den Code ein.
    Anschließend kommt die Datei in o.g. Verzeichnis.
     
  5. Carsten [M-1504]
    Carsten [M-1504] Erfahrener Benutzer
    Registriert seit:
    16. November 2015
    Beiträge:
    167
    Danke erhalten:
    8
    Danke vergeben:
    72
    Muss ich dann die Datei bilder.js nochmal extra im <head> ansprechen ? Oder erwähne ich die dann im <body>-Bereich ?
     
  6. Carsten [M-1504]
    Carsten [M-1504] Erfahrener Benutzer
    Registriert seit:
    16. November 2015
    Beiträge:
    167
    Danke erhalten:
    8
    Danke vergeben:
    72
    Ich hab jetzt im <head> stehen:

    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>
    <script src='bilder.js'></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="jquery.elevatezoom.js" type="text/javascript"></script>

    Ich hab im <body> stehen:

    <h1>Basic Zoom Example</h1>
    <img data-zoom-image="bildergalerie/large/image1.jpg" id="zoom_10" src="bildergalerie/small/image1.png" /><br />

    <script>
    $("#zoom_10").elevateZoom({easing : true});
    </script>

    Ich hab in der Datei bilder.js auch nochmal das hier reingeschrieben:

    <script>
    $("#zoom_10").elevateZoom({easing : true});
    </script>

    ... und sie in den Ordner templates/ Honeygrid/ usermod/ js/ global/ gepackt.

    Ich hab auch nochmal zusätzlich die Dateien:

    jquery-1.8.3.min.js
    jquery.elevateZoom-3.0.8.min.js
    jquery.elevatezoom.js
    elevatezoom.jquery.json

    in den Ordner templates/ Honeygrid/ usermod/js/global gepackt.

    Es passiert nichts ! :(

    @barbara :(
     
  7. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich teste das mal, dauert einen Augenblick.
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Egal was ich wohin lade, mehr als ein normales Bild kommt nicht.
     
  9. Carsten [M-1504]
    Carsten [M-1504] Erfahrener Benutzer
    Registriert seit:
    16. November 2015
    Beiträge:
    167
    Danke erhalten:
    8
    Danke vergeben:
    72
    Alles klar, 1000 Dank dir Barbara, dass du es versucht hast. Werd dann mal ein Ticket öffnen ;)