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
    <script>
    document.querySelectorAll('.linkbtn').forEach(function(el) {
        el.addEventListener('click',function() {
            let link = el.getAttribute('data-link');
            location.href = link;
        });
    });
    </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

  • 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 so weiter. Alles gut , bis auf "align="center"" hat im HTML Code nichts verloren , das sollte eigentlich in der CSS. Ist jetzt aber nicht weiter schlimm, weil es am Problem nichts ändert.

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

    Meine Idee war das

    * Link entfernt , weil existiert nicht mehr *

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


    Jetzt meine Frage , was ist an kopieren so schwer?

    Mein Code

    Code
     <div class="gallery-photo wnd-orientation-portrait">
                <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">
                    <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>
                    <div class="gallery-title">
              <span class="verlinkt"> Grünberg</span>
            </div>
         </a>
    <button class="linkbtn" data-link="https://gruenberg.info/de">Grünberg</button>   
    </div>

    Dann noch etwas CSS

    CSS
    .verlinkt{
      display:none !important;
    }


    Bei dir ist das so

    Code
    <div class="gallery-photo wnd-orientation-portrait">
                <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/1-gruenberg.jpg" width="1200" height="900">
                    <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>
                </a>
                <div align="center">
                       <button class="linkbtn" data-link="https://gruenberg.info/de">Grünberg</button>     
                </div>
            </div>


    Wo kommt eigentlich der Mist her?

    Code
    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
    window.onload = function(){
    
    // hier dein JS Code
    }


    Grüße,

    Stef

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!