Text zum Link ändern nicht möglich

  • Doch das geht

    mach mal das script nach unten, unterhalb der buttons.


    Und ein ' wurde vergessen.

    Sowas alles sollte man aber in der Console sehen.

    Hast du die Console nicht an beim testen ?

  • Ich glaube das geht auch nicht

    Teste mal das wenn das obrige nicht geht.

    Ist aber auch ungetestet

  • Danke, ja genau so klappt er:thumbup:.

    Ich bin 98% super zufrieden:), so wird er auch bleiben.


    Wenn dann muss es nicht gleich sein, aber es währen halt die 2 kleinen Punkte noch.

    1. Zentriert unter dem Bild
    2. Der Name sollte auch beim vergrößerten Bild unten stehen (sehe andere Bilder).


    Wenn ich eine Frau währe, würde ich sagen “wenn du die noch schaffst, bekommst du ein Bussi:*“.

  • Ich mußte mich mal gerade etwas schlau machen.

    Es hätte auch gereicht wenn du Bei den einen Script das "this" in "el" ausgetauscht hättst.

    Code
    1. <script>
    2. document.querySelectorAll('.linkbtn').forEach(function(el) {
    3. el.addEventListener('click',function() {
    4. let link = el.getAttribute('data-link');
    5. location.href = link;
    6. });
    7. });
    8. </script>

    Aber ist mein Fehler da habe ich eben gerade nicht so drauf geachtet.

    Hast du das jetzt Online ?

    Ich kucke mal was du da genau meinst.


    EDIT: Ja das ist jetzt etwas doof.

    Ich habe zwar Lösung gefunden aber bin nicht zufrieden.

    Vieleicht findet sempervivum da nee bessere Variante.


    Mal kurz gesagt.

    Das Script holt die Beschreibung aus denn <span> und blendet ihn wieder bei den großen Bild irgendwie rein.

    Da es jetzt Button sinds geht es wohl nicht mehr. Man könnte bestimmt das Script ändern , aber wer hat da schon lust zu.

    Die Beschreibung da mit Javascript reinzubekommen kriege ich auf der schnelle auch nicht hin .

    Meine Lösung währe das <span mit Beschreibung einfach auf display:none zu setzen ( siehe Codepen ).


    Aber ob das die beste Lösung ist bezweifel ich

  • basti1012 ich gl. bleiben wir beim vorherigen Beispiel.

    https://www.moritzer.com/traunkirchen-berge-beispiel-1.html


    Ich habe alles 1 zu 1 kopiert, aber komischerweise schaut die Wirklichkeit etwas anders aus als Codepen.


    Bei dem jetzigen Beispiel ist in der Wirklichkeit wieder das Bildvergrößerungsproblem.

    Und beim entfernen des großen Bildes springt er noch eine Seite weiter zurück

    https://www.moritzer.com/traunkirchen-berge-beispiel-2.html

  • Ja , ich weiß bald nicht mehr weiter.

    Wir bleiben jetzt bei der Button Variante. ( beispiel2 ).

    Das hast du ja gemacht und die Großen Bilder gehen auf und Links auch und soweiter. Alles gut , bis auf "align="center"" hat im html Code nix verloren , das sollte eigentlich in der Css. Ist jetzt aber nicht weiter schlimm weil es am problem nix ändert.

    Also bleibt das mit der Beschreibung im großen Bild.

    Meine Idee wahr das https://codepen.io/basti1012/pen/oNNNGrX?editors=1100

    Wie gesagt ob die Lösung die beste ist weiß ich nicht , aber es scheint ohne probleme zu laufe.


    Jetzt mein Frage , was ist an kopieren so schwer ?

    Mein Code

    Code
    1. <div class="gallery-photo wnd-orientation-portrait">
    2. <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="https://www.moritzer.com/bilder/tr-berge/1-gruenberg.jpg" width="1200" height="900">
    3. <div class="gallery-image cf"><img src="https://www.moritzer.com/bilder/tr-berge/1-gruenberg-s.jpg" alt="Grünberg in Gmunden im Salzkammergut mit Seilbahn"></div>
    4. <div class="gallery-title">
    5. <span class="verlinkt"> Grünberg</span>
    6. </div>
    7. </a>
    8. <button class="linkbtn" data-link="https://gruenberg.info/de">Grünberg</button>
    9. </div>

    Dann noch etwas css

    Code
    1. .verlinkt{
    2. display:none !important;
    3. }


    Bei dir ist das so

    Code
    1. <div class="gallery-photo wnd-orientation-portrait">
    2. <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/1-gruenberg.jpg" width="1200" height="900">
    3. <div class="gallery-image cf"><img src="bilder/tr-berge/1-gruenberg-s.jpg" alt="Grünberg in Gmunden im Salzkammergut mit Seilbahn" style="left: 0%; top: -2147483648%"></div>
    4. </a>
    5. <div align="center">
    6. <button class="linkbtn" data-link="https://gruenberg.info/de">Grünberg</button>
    7. </div>
    8. </div>


    Wo kommt eigentlich der Mist her ?

    Code
    1. n" style="left: 0%; top: -2147483648%"></div>
  • Ja jetzt sind wir am Ziel, alles geht wie es soll.

    Daher bekämest du jetzt das Bussi.


    Die Schrift der Links sehe gut aus, aber ich ädere die Schrift in gleiche Größe wie die anderen und markiere die Links mit Unterstrich.


    Zum zentrieren suchte ich nur für einzelne Links einen Befehl im html, aber ich fand nur den CSS align="center“.


    In der Wirklichkeit entstand der Fehler da ich die CSS Datei vom Server holte, und der gl. nicht so schnell aktualisierte.

    Vom PC aus ging es gleich wie bei codepen.


    Der Mist entstand wahrscheinlich durch irrtümliches Bewegen des Bildes.



    Also DANKE Sempervivum und überhaupt basti1012 für die Hilfe und Geduld.

  • Hey,


    hifialex : Der JavaScript Code im Kopfteil funktionierte nicht, weil dieser bereits ausgeführt wird bevor das Dokument vollständig geladen ist.


    Daher immer wenn der JS Code im Kopfteil ist eine Function erstellen welche überprüft ob die Seite vollständig geladen ist:

    JavaScript
    1. window.onload = function(){
    2. // hier dein JS Code
    3. }


    Grüße,

    Stef