sticky header funktioniert bei effekten nicht

tino · 13. April 2020

hi,

leider immer noch nicht, das kann ich noch keinem zumuten

ich habs denk ich verstanden, 5px padding und 1 px border sind insgesamt 6px x2 -> also 12 px größer,

und wenn man als width:100% angibt dann wird es in dem fall 12px größer -> also für mich unschärfer.....

ich lass es jetzt auf auto

tino · 14. April 2020

hallo,

Code

https://webentwicklung.ulrichb…read363-swipe-images.html

ich habe gerade dein Beispiel getestet, es funktioniert mit dem swipe, aber ich bekomme die Bilder nicht 1:1 hin, Hochkant ist immer gestaucht und von breiten ist nur ein Ausschnitt zu sehen, habe bei width: schon 100%, auto, etc.... getestet.

gruss

Tino

Sempervivum · 14. April 2020

Das ist zunächst mal kein Wunder. Ich nehme an, deine Bilder haben nicht alle das selbe Format. Ich werde es mir ansehen und versuchen, das CSS anzupassen.

tino · 14. April 2020

hi,

vorwiegend sind sie breit, aber es sollte schon für alle Formate passen, auch wenn man das Händy in den Landscape-modus kippt.

mercy sxchon mal

Tino

Sempervivum · 14. April 2020

Ich habe mal etwas einfaches realisiert:

Eine Art quadratischen Rahmen definiert und die Bilder mit object-fit darin eingebettet. Und zwar so, dass jedes Bild vollständig sichtbar ist und nichts abgeschnitten wird. Dabei entstehen jetzt Leerräume, entwder seitlich oder oben und unten, je nach Orientierung. Sieh es dir mal an:

https://webentwicklung.ulrichb…ad363-swipe-images-2.html

tino · 15. April 2020

morgen,

sieht doch ganz gut aus, die Leerräume sind doch auch normal, auch wenn du in Ordnern deine Fotos auf dem Android Smartphone durchswippst.

ich guck auch grad schon immer auf der codepen-seite aber irgendwie find ich immer nur slider und andere beispiele....

tino · 17. April 2020

hallo,

hab gerade dein Beispiel nochmal getestet, die Hochkantbilder hängen noch am oberen Rand, ansonsten gehts ganz gut.

Was anderes, wenn ich zb. 20 Bilder in einer Thumbnail -ansicht untereinander habe und zb. auf das 9. klicke, wie kann dann das 9. Bild kommen und ich in beide Richtungen swipen, also vor zum 1. und bis zum letzten.

Oder tüfteln wir da grad an etwas herum, für das es coole dienste wie eben zb. fancybox gibt ?

Gruss

Tino

Sempervivum · 17. April 2020

Zitat

wenn ich zb. 20 Bilder in einer Thumbnail -ansicht untereinander habe und zb. auf das 9. klicke, wie kann dann das 9. Bild kommen und ich in beide Richtungen swipen, also vor zum 1. und bis zum letzten.

Das lässt sich machen, wenn man mit Ankern arbeitet:

https://webentwicklung.ulrichb…ad363-swipe-images-3.html

Allerdings hat man dann nicht dieses schöne weiche Scrollen.

Zitat

Oder tüfteln wir da grad an etwas herum, für das es coole dienste wie eben zb. fancybox gibt ?

Das kann gut sein: Ich kenne da ein Skript namens Swiper, wo man die Galerie formatfüllend anlegen kann und ebenfalls durch Wischen navigieren:

https://swiperjs.com/demos/#thumbs_gallery

Wie Du siehst hat man auch dieses weiche Scrollen wenn man auf ein Thumbnail klickt. Außerdem lässt sich diese Galerie auch am PC durch Wischen mit der Maus bedienen. Ich habe schon Benutzer kennen gelernt, die es vom Handy kannten und erwarteten, dass es auch am PC funktioniert.

tino · 5. Mai 2020

hi,

ich mal wieder, ich habe das "swiper" getestet und deine versionen.

HTML

<!DOCTYPE html>
<html lang="de">
<head>

<title>Keep Life simple, Foto und Reiseblog</title>

<meta name="author" content="Nina Zühlke" />
<meta name="copyright" content="Nina Zühlke" />
<meta name="keywords" content="Fotos, Bilder, England, Wales" />
<meta name="description" content="Hier seht ihr die schönsten Bilder und Fotos aus England und Wales" />


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">


       

<!-- Demo styles -->
<style>
    html {
      position: relative;
      width: auto;
      height: auto;
      margin: auto;
    }
    body {
        background-color: #000000;
    width: 100%;
    margin: auto;
    margin-top: 20%;
    padding: 2px;
    }

    .swiper-container {

    margin: auto;
    background: #000000;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    img:not(#logo) {
    max-width: 100%;
    height: auto;
    vertical-align: text-top;
  }
  </style>

</head>
<body>









  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="england/bild_01.jpg" /></div>
      <div class="swiper-slide"><img src="england/bild_02.jpg" /></div>
      <div class="swiper-slide"><img src="england/bild_03.jpg" /></div>
      <div class="swiper-slide"><img src="england/bild_04.jpg" /></div>
      <div class="swiper-slide"><img src="england/bild_05.jpg" /></div>
      <div class="swiper-slide"><img src="england/bild_06.jpg" /></div>
    </div>
  </div>
  

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>


    <!-- Initialize Swiper  var swiper = new Swiper('.swiper-container');-->
  


<script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>


</body>
</html>

Alles anzeigen

von der Sache her sieht es nun ganz gut aus, in dem Beispiel swiped er auf der händy version eben die 6 Bilder durch,

aber wie geht es wenn ich bei 20 Fotos, Foto 12 klicke und kann dann weiter bis 20 und zurück über 11, 10 uns ?

Das mit den Ankern geht doch nicht, wenn ich auf Bild 12 klicke, dann geht eine neue Seite auf, ich müsste der dann doch irgendwie übergeben, dass es bei Bild 12 startet und in beide Richtungen swipen kann.

danke schon wieder

Tino

sticky header funktioniert bei effekten nicht

Jetzt mitmachen!

Teilen