luck-cbs
  • Home
    • Impressum
  • PC-Tipps
    • vorschau
    • Tipp 0926
    • Tipp 0826
    • Tipp 0726
    • Tipp 0626
    • Tipp 0526
    • Tipp 0426
    • Tipp 0326
    • Tipp 0226
    • Tipp 0126
    • Jahr 2025 >
      • Tipp 1225
      • Tipp 1125
      • Tipp 1025
      • Tipp 0925
      • Tipp 0825
      • Tipp 0725
      • Tipp 0625
      • Tipp 0525
      • Tipp 0425
      • Tipp 0325
      • Tipp 0225
      • Tipp 0125
    • Jahr 2024 >
      • Tipp 1224
      • Tipp 1124
      • Tipp 1024
      • Tipp 0924
      • Tipp 0824
      • Tipp 0724
      • Tipp 0624
      • Tipp 0524
      • Tipp 0424
      • Tipp 0324
      • Tipp 0224
      • Tipp 0124
    • Jahr 2023 >
      • Tipp 1223
      • Tipp 1123
      • Tipp 1023
      • Tipp 0923
      • Tipp 0823
      • Tipp 0723
      • Tipp 0623
      • Tipp 0523
      • Tipp 0423
      • Tipp 0323
      • Tipp 0223
      • Tipp 0123
  • Tipps-Archiv
  • Dienstleistungen
    • Downloads
    • FAQs
    • IT-News >
      • actual-linux >
        • linux-basics
      • Windows 12
      • Windows 11 >
        • W11-install
        • W11-Hardware
        • W11-wie
      • Breakdown
    • Links
    • Schnäppchen
    • Workshops >
      • Excel
      • Codeseite
  • wer ist
    • Jubiläum
    • Gitarren
    • Wetter >
      • onlinetools
      • Meteocam
      • wettercomments
      • Wetterparameter
      • meteoarchiv
      • Sonnenuhr
      • Windsysteme
    • electric
    • Kunst
  • Kontakt

tipp 0926 Thumbnails einsetzen

Bild
Das Wort bedeutet Miniaturbild oder Vorschaubild und kommt vom Englischen Daumennagel.
Meist dienen Thumbs dazu, die Ladezeiten von Websites zu verkürzen, ohne dass der Besucher jedoch auf eine detaillierte Ansicht verzichten muss, oder um in einem Werk eine Übersicht mit reduzierten Bildinformationen zu erstellen.
Es ist eine interessante Variante, Webseiten benutzerfreundlich zu gestalten. Denn, wenn dich das Vorschaubild nicht anspricht, willst das Original in voller Grösse wohl gar nicht sehen.

Vorbereitung
Du brauchst erst einmal zwei Bilder, das Vorschaubild und das grosse Originalbild. Im Grafikprogramm skaliere ich das Thumbnail auf etwa 80 x 140 Pixel und versehe es mit einem Zoom-Symbol. Das Original hat dann beispielsweise Abmessungen von 400 x700 Pixeln und speichere beide als '.png'.

Mit Modal Pop – WP im Sitebuilder 2
1) Das Tool auf die zu gestaltende Webseite ziehen
Bild
 2) Das folgende Fenster erscheint, wobei gemeint ist mit 'Elemente hierher ziehen', dass das schliesslich das Popup-Bild ist. Du kannst jetzt das Originalbild schon mal hierherziehen
Bild
dann sieht es dann so aus.
Bild
3) Mit einem Klick auf das eingefügte Bild gelangst du ins Setup der Popup-Funktion. Hier wähle ich immer Hide Pop Up, weil die Übersicht besser ist.
Bild
da du ja keine Schaltfläche, sondern ein kleines Vorschaubild verwenden möchtest, musst du nach unten scrollen, bis zu Use Image Trigger, Hide Button Trigger und aktiviere diese.
Bild
4) Jetzt wirst du erneut aufgefordert ein Bild hochzuladen. Das wäre dann dein vorbereitetes Thumbnail.
Bild
Nach einem Klick auf Veröffentlichen wird das Popup funktionieren.
 
Mit HTML
Wenn du gerne etwas auf deiner Website mit HTML und JAVA programmierst, wäre der gleiche Effekt auch mit einem kleinen Code möglich, den ich dir gerne zur Verfügung stelle. Die Bildadressen musst du selbstverständlich anpassen.
Bild
Miniatur: https://luck-cbs.ch/uploads/1/3/7/6/137608123/change-t_orig.png 
Original: https://luck-cbs.ch/uploads/1/3/7/6/137608123/change-g_orig.png

und so tickt dann das Ding
top
deine Kommentare, Fragen und Kritik zu diesem Beitrag >> hier deponieren.
​luck-cbs | computer - beratung - support | 7203 trimmis | graubünden
cbs-besuche
heute:
gestern:
insgesamt:
  • Home
    • Impressum
  • PC-Tipps
    • vorschau
    • Tipp 0926
    • Tipp 0826
    • Tipp 0726
    • Tipp 0626
    • Tipp 0526
    • Tipp 0426
    • Tipp 0326
    • Tipp 0226
    • Tipp 0126
    • Jahr 2025 >
      • Tipp 1225
      • Tipp 1125
      • Tipp 1025
      • Tipp 0925
      • Tipp 0825
      • Tipp 0725
      • Tipp 0625
      • Tipp 0525
      • Tipp 0425
      • Tipp 0325
      • Tipp 0225
      • Tipp 0125
    • Jahr 2024 >
      • Tipp 1224
      • Tipp 1124
      • Tipp 1024
      • Tipp 0924
      • Tipp 0824
      • Tipp 0724
      • Tipp 0624
      • Tipp 0524
      • Tipp 0424
      • Tipp 0324
      • Tipp 0224
      • Tipp 0124
    • Jahr 2023 >
      • Tipp 1223
      • Tipp 1123
      • Tipp 1023
      • Tipp 0923
      • Tipp 0823
      • Tipp 0723
      • Tipp 0623
      • Tipp 0523
      • Tipp 0423
      • Tipp 0323
      • Tipp 0223
      • Tipp 0123
  • Tipps-Archiv
  • Dienstleistungen
    • Downloads
    • FAQs
    • IT-News >
      • actual-linux >
        • linux-basics
      • Windows 12
      • Windows 11 >
        • W11-install
        • W11-Hardware
        • W11-wie
      • Breakdown
    • Links
    • Schnäppchen
    • Workshops >
      • Excel
      • Codeseite
  • wer ist
    • Jubiläum
    • Gitarren
    • Wetter >
      • onlinetools
      • Meteocam
      • wettercomments
      • Wetterparameter
      • meteoarchiv
      • Sonnenuhr
      • Windsysteme
    • electric
    • Kunst
  • Kontakt