Text zum Link ändern nicht möglich

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.

Versuche, das HTML so zu ändern:

        <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:

        <div class="gallery-photo wnd-orientation-portrait">
            <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/2-traunstein.jpg" width="1200" height="900">
                <div class="gallery-image cf"><img src="bilder/tr-berge/2-traunstein-s.jpg" alt="Traunstein Berg am Traunsee, Wächter des Salzkammergutes"></div>
                <div class="gallery-title"><span></span></div>

                <p><a href="https://de.wikipedia.org/wiki/Traunstein_(Berg)">Traunstein</a></p>
            <!-- hier erwarte ich das schliessende </a> -->

<!-- BEISPIEL ENDE     -->    

        </div>

Lies auch mein Posting #4, davor, und setze es um.

Im Fall von Grünberg ist der Link immer noch innerhalb des a-Tags a.litebox. Bei Traunstein dagegen ist er draußen. Versuche, es bei Grünberg genau so zu machen.

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

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

und tauscht die dann so aus

<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

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

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

Zitat von hifialex

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

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

Ich empfehle, kein a-Tag zu nehmen, sondern einen Button ohne Link.

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

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

Und Javascript:

document.querySelectorAll('.linkbtn).forEach(function() {
    let link = this.getAttribute('data-link');
    this.addEventListener('click', function() {
        location.href = link;
    });
});

Zitat von Sempervivum

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

.linkbtn{
  background:none;
  outline:none;
  border:none;
  text-align:center;
  padding:2px 6px;
  margin:0 0 0 0;
  text-decoration:underline;
  cursor:pointer;
  font-size:16px;
color:black;
}

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