Beiträge von hifialex

hifialex · 10. Oktober 2019

Dancke Stef

Man lernt immer wieder etwas dazu

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.

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

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“.

hifialex · 8. Oktober 2019

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.

HTML

<!DOCTYPE html>
  
<html>
<head>

<script language="javascript" type="text/javascript">
document.querySelectorAll('.linkbtn).forEach(function() {
    let link = this.getAttribute('data-link');
    this.addEventListener('click', function() {
        location.href = link;
    });
});
</script>

<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>                                   
</body>
</html>

Alles anzeigen

hifialex · 7. Oktober 2019

2 Möglichkeiten, einen Link ohne a-Tag.

Über CSS mit <button>, aber wie gibt man da die Adresse an und zentriert man den Link?

Oder direkt einen Button, aber wie ohne a-Tag und deren Probleme?

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

hifialex · 6. Oktober 2019

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.

hifialex · 6. Oktober 2019

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.

Code

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

<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>Grünberg</span></div>
        <span class="verlinkt" onclick="location.href='https://gruenberg.info/de/'">Grünberg</span>
    </a>
</div>

<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"></div>
        <span class="verlinkt" onclick="location.href='https://de.wikipedia.org/wiki/Traunstein_(Berg)'">Traunstein</span>
    </a>
</div>

Alles anzeigen

hifialex · 6. Oktober 2019

Versuchte e alles immer bei beiden.

Grünberg war nur, eins von weiteren Versuchen.

Immer hat der Text die gleiche Linkfunktion wie das Foto und die gleichen Probleme wie immer.

Aber das sieht e jeder auf https://www.moritzer.com/traunkirchen-berge-beispiel.html

hifialex · 5. Oktober 2019

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.

hifialex · 5. Oktober 2019

Das schliessende </a> brachte es leider nicht.

Code

<!-- BEISPIEL -->
<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>

<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>
    </a>
</div>

<!-- BEISPIEL ENDE	 -->

Alles anzeigen

Warum 1 oder 2 Links bei allen Bildern Probleme verursacht?

hifialex · 5. Oktober 2019

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.

hifialex · 5. Oktober 2019

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

Beiträge von hifialex

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich

Text zum Link ändern nicht möglich