Text zum Link ändern nicht möglich

basti1012 · 8. Oktober 2019

Doch das geht

mach mal das script nach unten, unterhalb der buttons.

HTML

<!DOCTYPE html>
  
<html>
<head>

<style>
 .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;
}
</style>
</head>
<body>          
                        <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/2-traunstein.jpg" width="1200" height="900">
                                               <div class="gallery-image cf"><img src="https://www.moritzer.com/bilder/tr-berge/2-traunstein-s.jpg" alt=""></div>
                                   </a>               
                            <button class="linkbtn" data-link="https://wikipedia.de">Wikipedia</button>   
                        </div> 
   <script>
document.querySelectorAll('.linkbtn').forEach(function() {
    let link = this.getAttribute('data-link');
    this.addEventListener('click', function() {
        location.href = link;
    });
});
</script>                               
</body>
</html>

Alles anzeigen

Und ein ' wurde vergessen.

Sowas alles sollte man aber in der Console sehen.

Hast du die Console nicht an beim testen ?

basti1012 · 8. Oktober 2019

Ich glaube das geht auch nicht

Teste mal das wenn das obrige nicht geht.

Ist aber auch ungetestet

HTML

<!DOCTYPE html>
  
<html>
<head>
<style>
 .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;
}
</style>
</head>
<body>          
                        <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/2-traunstein.jpg" width="1200" height="900">
                                               <div class="gallery-image cf"><img src="https://www.moritzer.com/bilder/tr-berge/2-traunstein-s.jpg" alt=""></div>
                                   </a>               
                            <button class="linkbtn" data-link="https://wikipedia.de">Wikipedia</button>   
                        </div> 
   <script>
but=document.querySelectorAll('.linkbtn');
     for(f=0;f<=but.length;f++){
    let link =but[f].getAttribute('data-link');
    but[f].addEventListener('click', function() {
        location.href = link;
    });
}
     
</script>                               
</body>
</html>

Alles anzeigen

hifialex · 8. Oktober 2019

Danke, ja genau so klappt er.

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.

Zentriert unter dem Bild
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“.

basti1012 · 8. Oktober 2019

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

hifialex · 8. Oktober 2019

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

basti1012 · 9. Oktober 2019

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>

hifialex · 9. Oktober 2019

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.

Stef · 10. Oktober 2019

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

hifialex · 10. Oktober 2019

Dancke Stef

Man lernt immer wieder etwas dazu

Text zum Link ändern nicht möglich

Jetzt mitmachen!

Teilen

Tags