Text zum Link ändern nicht möglich

  • Hallo Zusammen!


    Ich möchte gerne aus den unter den Bildern stehenden Wörtern (Bildnamen) einen richtig aussehenden Link erstellen.

    Aber leider funktioniert dann das Bilder weiterblättern nicht mehr und der Link sowieso nicht.


    Nämlich auf der Webseite “ https://www.moritzer.com/traunkirchen-berge-beispiel.html “ . ab Zeile 259


    Mein Code

    Zeihle 259

    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"></div>
            <div class="gallery-title"><span></span></div>
    
            <p><a href="https://gruenberg.info/de/">Grünberg</a></p>
    
        </a>
    </div>

    Könnt ihr mir bitte da weiterhelfen, was ich in dem Quellcode ändern sollte, dass die Bildblätterung und die Links funktionieren.


    Wenn notwendig die CSS ist die “ https://www.moritzer.com/dateien/system.css “.


    Tschüss

  • Die Browser-Konsole zeigt mir Fehler in den Dateien 'compiled.js' und '2kaumw.js' an. Und wenn ich das richtig sehe, sind diese beiden Dateien mit irgendeinem Komprimierungstool bearbeitet worden.

    Versuche mal die Dateien ohne diese Komprimierung einzubinden - oft kommen solche Fehler durch fehlerhafte Komprimierung zustande.

  • Die Dateien 'compiled.js' und '2kaumw.js' sind von PhotoSwipe erstellt worden.

    Mit welchem Komprimierungstool diese bearbeitet worden sind bekomme ich leider nicht heraus.

    Ich bin mir nicht sicher, aber ich gl. der Fehler ist im HTML Code.

    Da das Bildervergrößern und blättern gut funktioniert (sehe andere Seiten), bis ich im HTML Code einen Link erstelle.

    Erst dann sind die Fehler.

  • Versuche, das HTML so zu ändern:

    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"></div>
                    <div class="gallery-title"><span></span></div>
                </a>
                <p><a href="https://gruenberg.info/de/">Grünberg</a></p>
            </div>

    d. h. den Link aus dem a-Tag für die Litebox heraus nehmen. (ungetestet, nur ein Versuch).

  • PS: Bei dem zweiten Beispiel scheint mir das a-Tag nicht geschlossen zu sein:

  • Das schliessende </a> brachte es leider nicht.




    Warum 1 oder 2 Links bei allen Bildern Probleme verursacht?

  • Ja ich nahm e den Code “<p><a href="https://gruenberg.info/de/">Grünberg</a></p>“ aus dem a-Tag.


    Auch

    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"></div>
            <div class="gallery-title"><span><p><a href="https://gruenberg.info/de/">Grünberg</a></p></span></div>
        </a>
    </div>

    beides änderte leider nicht viel.

  • Das es so nicht geht wie du es vor hattest ist ja fast logisch, weil <a> hat in einen <a> nix zu suchen.

    Aber das hatte Sempervivum schon bedacht und hat dir anderen Code gepostet.

    Der Funktioniert leider auch nicht, da macht das Script nicht mit.

    Habe mal deinen ganzen Kram kopiert und wollte mal kucken ob sich das Script einfach anpassen lassen würde,

    damit die neue Ordner Struktur laufen würde.

    Aber das wahr mir doch zu anstrengend heute.


    Ich weiß ja nicht ob es in der Doko dafür nee Anleitumg gibt, aber falls nein dann gibt es doch noch eine einfache schnelle Lösung .

    Die Funktioniert auch, weil hatte ich getestet.

    Du nimmst den Teil vom Originalen Code

    Code
    <div class="gallery-title"><span>Traunstein</span></div>

    und tauscht die dann so aus

    Code
    <div class="gallery-title">
    <span class="verlinkt" onclick="location.href='de.wikipedia.org/wiki/Traunstein_(Berg)'"> Traunstein</span>
    </div>

    Etwas Css dazu damit es wie ein Link aussieht

    Code
    <style>
      .verlinkt{
          cursor:pointer;
          text-decoration:underline;
      }
    </style>


    Das wäre eine einfache Lösung ohne großartig zu fuschen

  • Auch mit der Information der a-Tag Umpositionierung lernte ich etwas und möchte dafür bei Sempervivum gleich bedanken.


    Natürlich die Infos von basti1012 sind super.

    Das Bild und der Link erfüllen fast zu 100% ihre Arbeit.


    Leider gibt es noch manche kleine Muckn.


    Ist es möglich den Link wie die anderen Texte zu positionieren und vielleicht die Farbe auf blau zu ändere.

    Der Link vergrößert vorher das Bild, bevor er die gewollte Homepage öffnet.

    Denn Code “<span>Grünberg</span>“ bzw. “<span> </span>“ muss ich noch verändern, sonst habe ich entweder bei normalem Bild einen Text, oder auch bei großem Bild keinen.


  • Ist es möglich den Link wie die anderen Texte zu positionieren und vielleicht die Farbe auf blau zu ändere.

    Der Link vergrößert vorher das Bild, bevor er die gewollte Homepage öffnet.

    Denn Code “<span>Grünberg</span>“ bzw. “<span> </span>“ muss ich noch verändern, sonst habe ich entweder bei normalem Bild einen Text, oder auch bei großem Bild keinen.

    Du hast das aber nicht so eingebaut wie ich es vorgeschlagen habe. Wenn du das so machst, sieht es so aus und es brauch eigentlich nichts mehr geändert zu werden. Schriftfarbe hatte ich gerade mal auf Rot gesetzt damit du siehst, dass es einfach über CSS geht .

    Alles andere lässt sich lösen, wenn man es richtig einbaut und den alten <span Eintrag löscht

    * Link entfernt , weil existiert nicht mehr *

    Diesen Codepen lösche ich, nachdem du alles geschafft hast , bzw. bis du dir es angekuckt hast

  • Ja danke basti1012 auch ich schaff es langsam mit so einem wie dir.

    Ich hoffe so passt jetzt der Code.

    Außer 1 kleine Punkt stört noch, der Link vergrößert auch das Bild.
    Ich kann mir vorstellen auch das schaffen wir noch.

  • du meinst doch wenn man den Link anklicken tut , geht das Bild ja nochmal kurz auf .

    Da muß ich auch mal gerade überlegen . Da das ganze Bild ,mit einen Link umschlossen ist mit den <a> , wird durch den klick auf den (Fake)Link auch automatisch der drumherum Link angeklickt.


    Muß da auch mal gerade was probieren . Mit einen Script habe ich nee Idee , aber muß auch erstmal testen und vieleicht findet sich doch noch was einfacheres

  • Ohne Javascript wird es auch mit Button nicht gehen, versuche dies (ungetestet):

    Code
    <button class="linkbtn" data-link="https://wikipedia.de">Wikipedia</button>

    Und Javascript:

    Code
    document.querySelectorAll('.linkbtn).forEach(function() {
        let link = this.getAttribute('data-link');
        this.addEventListener('click', function() {
            location.href = link;
        });
    });
  • Ohne Javascript wird es auch mit Button nicht gehen.

    Theoretisch schon.

    <form mit action rum bauen , aber wir wollen es jetzt nicht zu kompliziert machen sonst kommt er nie zum Ziel :):)

    an TE:

    Damit der Button wie ein Link aussieht muß ma nur die Css etwas ändern, Zb


    So solltest du es dann auch zentrieren können und farblich gestallten und co weiter.

  • Nun ja auch wenn das Ziel noch lange dauert es soll einfach gehen.

    Außerdem lerne ich was dazu:/.

    Und ich gl. es dauert, ohne <form geht`s doch nicht.


    Ich habe den Code ausprobiert, er schaut gut nach Link aus, aber er startet nicht;(.

    Und sollte sich unterm Bild zentrieren.


Jetzt mitmachen!

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