Beiträge von tino

tino · 6. Mai 2020

hi,

vielen dank, das geht ja wirklich ganz gut.

mein link ist jetzt einfach:

Code

<a href="swiper.php#slide3">

und in der swiper.php steht:

Code

      <div class="swiper-slide" data-hash="slide1"><img src="landschaft/bild_01.jpg" /></div>
      <div class="swiper-slide" data-hash="slide2"><img src="landschaft/bild_02.jpg" /></div>
      <div class="swiper-slide" data-hash="slide3"><img src="landschaft/bild_03.jpg" /></div>
      <div class="swiper-slide" data-hash="slide4"><img src="landschaft/bild_04.jpg" /></div>
      <div class="swiper-slide" data-hash="slide5"><img src="landschaft/bild_05.jpg" /></div>
      <div class="swiper-slide" data-hash="slide6"><img src="landschaft/bild_06.jpg" /></div>

ein problem gibt es aber noch, versuch es doch bitte auch einmal, nicht dass es nur bei mir ist:

wenn du durch-swipst, ein paar mal hin und her und du sowohl am ps den Zurück-button und/oder den Back-button am smartphone benutzt,

geht er immer nur einen Schritt zurück, d.h wenn du 10x geswipt hast musst du bei mir 10x den Back-button drücken um wieder auf der Thumbnail seite zu sein:

Hast du dazu noch eine Idee,

bis hierher mercy nochmal

Tino

tino · 6. Mai 2020

hi,

ja das gepostete ist der code der Testseite des Swipers..

in der Ansicht der Thumbs sieht es so aus:

Code

<div class="flex-container_spalte_all">
        <section class="flex-item">
        <a href="england/bild_03.jpg">   <img src="england/mobile/bild_03.jpg" /></a>
        </section>
        <section class="flex-item">
        <a href="england/bild_04.jpg">   <img src="england/mobile/bild_04.jpg" /></a>
        </section>
 </div>

.... weitere

hier stehen zweispaltig alle Bilder der thumbs ( <img src="england/mobile/bild_03.jpg" /> )

untereinander.

wenn ich jetzt bild_03.jpg klicke kommt eben das große bild_03.jpg schön mittag auf voller größe.

Dann der Back-button des Smartphones und aufs nächste, etc.....

Dieser link:

müsste aber nun zur Swiper-seite und das 3. Bild anzeigen, dann vor und zurück-swipen möglich.

Also wie geht das mit dem Javascript gleich zb, zu Bild-03 zu kommen ?

Tino

tino · 6. Mai 2020

hallo,

ich komme leider immer noch nicht mit dem Bilder-swipen an der Smartphone Version meiner Seite weiter.

Ich habe eine einfache php-Seite die meine 20 Thumbnails anzeigt, in der Web-Version benutze ich Fancybox, das geht gut.

Bei der Mobilen Version sieht es schlecht aus und ist nicht schön zu nutzen, da die Fancybox da auch nur unwesentlich größer ist als der Thumb.

Welches Tool kann ich da am besten nutzen, oder selbst bauen, mein Swiper Beispiel im Code geht gut, ich habe aber die Bilder fest reingeschrieben,

es soll ja aber so sein, dass man auf irgendeines der 20 klickt, dann geht die Swipe-Seite mit genau dem geklickten auf und ich kann wie es auch Android

mit normalen Fotos macht in beide Richtungen in der Vollansicht der Bilder swipen.

Code

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

danke an alle

Tino

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

tino · 5. Mai 2020

gut danke,

ich dachte es mir auch, aber bevor ich es bei gefühlt 200 fotos ändern muss wollte ich lieber fragen

gruss

Tino

tino · 5. Mai 2020

hallo,

nur eine kleine Frage, muss der <img> Tag mit einer bestimmten Reihenfolge aufgebaut sein?

ich will gerade für die Suche meine Fotos mit "alt" und "title" besser belegen und frage mich ob die beiden vor der "src" stehen können/müssen oder ob diese Reihenfolge innerhalb des <img> völlig egal ist.

dank euch

Tino

tino · 30. April 2020

hi,

dank dir nochmal, ich nehme jetzt das Beispiel von:

Mit CSS https://codepen.io/Idered/pen/AeBgF

deinem Link, das geht soweit ganz gut, meines hätte dann auch noch Probleme mit mehreren Texten gemacht, also egal.

Gruss

Tino

tino · 30. April 2020

hallo,

habe hier noch ein problem, ich habe nun etwas mit css versucht, im localhost funktioniert es gut, aber in der mobilen version am Smartphone geht der

"read more"- Button überhaupt nicht ?

Code

<div class="flex-container">

<div class="post">

<section class="flex-itemLeft">
    <p id="text_ueb">England und Wales <br>
    <img src="../bilder/linie300.jpg" id="logo">
    
    <p id="text_start">England, das Land von König Artus und für uns als Kletterer, das Mutterland des Trad Kletterns... <br> Warum ein Besuch mehr als lohnend ist:<br>  
      <span class="dots"></span>
     
      <span class="more">

      Supermärkte, die freiwillig fahrbare Untersätze zur Verfügung stellen und eine komplett andere Art sein Döner zu essen. Viel Höflichkeit und Geduld im Straßenverkehr mit dem doch anfangs recht 
    gewöhnungsbedürftigen Linksverkehr. Straßen, wie ein Labyrinth, mit meterhohen Hecken rechts und links und so schmal, dass wir manchmal das Gefühl hatten, wenn jetzt jemannd entgegen kommt,
    geht nix mehr und an deren Ende wir nach einer gefühlten Ewigkeit in bezaubernden Dörfchen mit urigen Pubs gelandet sind, mitten im Nirgendwo.
    Dazu grandiose Kathedralen, einsame und wunderschöne Strände und Landschaften. Stundenlang hätte ich außerdem in den vielen Bücherläden bzw. Antiquariaten mit bis unter die Decken vollgestopften
    Regalen verbringen können.
    Für uns war es einfach ein Land mit vielen Überraschungen. Noch nie hatten wir zum Beispiel
    vorher erlebt, dass man uns auf Campingplätzen nicht in unserem Auto schlafen lassen wollte. Und am Ende zwei Wochen feinstes Klippen Klettern mit fast schon südlichem Flair und viel Sonnenschein. 
    Und auch das eine echte Überraschung: die Briten sind ein extrem laufbegeistertes Volk mit tollen Wettkämpfen (eins unserer Highlights war sicher der Mount Snowden Trailrun) für jedermann. 
      </span>
      <button class="read">read more</button>
      </section> 
   </div>

   </div>



   <script>
   $(document).ready(function(){
   $(".read").click(function(){
      $(this).prev().toggle();
      $(this).siblings('.dots').toggle();
      if($(this).text()=='read more'){
    $(this).text('read less');
      }
      else{
    $(this).text('read more');
      }
   });
   });
</script>




...... das css

.more{
   display: none;
}
.post{
   color: #e5e5e5;
   font-size: 18px;
   text-align: justify;
   line-height: 25px;
   font-family: 'Work Sans',sans-serif;
}
.post:not(:last-child){
   margin-bottom: 30px;
}
button{
   margin-top: 15px;
   display: block;
   background-color: #e41d3f;
   color: white;
   border:none;
   outline: none;
   padding: 8px 20px;
   text-transform: capitalize;
   cursor: pointer;
   font-size: 20px;
}

Alles anzeigen

hast du dazu eine idee ?

danke

Tino

tino · 30. April 2020

hallo,

danke dir /euch

mit php habe ich mich eben "etwas" ausgekannt, ich werde die links verfolgen und das ganze mit css und ausblenden machen.

mercy nochmal

Tino

tino · 28. April 2020

hallo,

ich habe gerade angefangen einen "weiterlesen"-Button für die mobile Version meiner Webseite zu machen.

Hier steht zuviel Text, und wenn ich den Button klicke, dann erscheint der Resttext so wie er soll.

2 Fragen dazu, leider wird die Seite irgendwie neu geladen und ich muss wieder runterscrollen bin dahin , wo der Text zu lesen ist,

optisch schön wäre es eben wenn es bei dem Button stehen bleibt und der Rest darunter aufgeht.

Und zweitens, wenn der Text eingeblendet ist, wie bekomme ich den Button "weiterlesen" weg oder unsichtbar.

Das ist mein erster Versuch damit, ist das überhaupt sinnvoll so, oder gibts da bessere Lösungen, bitte die einfachsten für der Anfang.

PHP

<div class="flex-container">
        <section class="flex-item_bild">
          <a href="../laender/mobile_england.php">  <img src="../bilder/laender/england.jpg" /></a>
        </section>
    
    <section class="flex-itemLeft">
    <p id="text_ueb">England und Wales <br>
    <img src="../bilder/linie300.jpg" id="logo">
    
    <p id="text_start">England, das Land von König Artus und für uns als Kletterer, das Mutterland des Trad Kletterns... <br> Warum ein Besuch mehr als lohnend ist:<br>  

                <form action="" method="post">
                <input type="submit" name="more" value="weiterlesen">
                </form>

                <?php 
                  if ((isset($_POST['more']) and $_POST['more']=='weiterlesen') ) {                    
                ?>

    <p id="text_start">
    Supermärkte, die freiwillig fahrbare Untersätze zur Verfügung stellen und eine komplett andere Art sein Döner zu essen. Viel Höflichkeit und Geduld im Straßenverkehr mit dem doch anfangs recht 
    gewöhnungsbedürftigen Linksverkehr. Straßen, wie ein Labyrinth, mit meterhohen Hecken rechts und links und so schmal, dass wir manchmal das Gefühl hatten, wenn jetzt jemannd entgegen kommt,
    geht nix mehr und an deren Ende wir nach einer gefühlten Ewigkeit in bezaubernden Dörfchen mit urigen Pubs gelandet sind, mitten im Nirgendwo.
    Dazu grandiose Kathedralen, einsame und wunderschöne Strände und Landschaften. Stundenlang hätte ich außerdem in den vielen Bücherläden bzw. Antiquariaten mit bis unter die Decken vollgestopften
    Regalen verbringen können.
    Für uns war es einfach ein Land mit vielen Überraschungen. Noch nie hatten wir zum Beispiel
    vorher erlebt, dass man uns auf Campingplätzen nicht in unserem Auto schlafen lassen wollte. Und am Ende zwei Wochen feinstes Klippen Klettern mit fast schon südlichem Flair und viel Sonnenschein. 
    Und auch das eine echte Überraschung: die Briten sind ein extrem laufbegeistertes Volk mit tollen Wettkämpfen (eins unserer Highlights war sicher der Mount Snowden Trailrun) für jedermann. 
                
                <?php 
                }
                ?> 
        </section>
</div>

Alles anzeigen

vielen Dank euch schonmal

Tino

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

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

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

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 · 13. April 2020

hi,

ok danke ich teste es mal.

noch was, was mich an mir zweifeln lässt....

Code

img:not(#logo) {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;

    width: auto;
    height: auto;
  }

ich will damit einfach nur einen kleinen Rand um alle meine Fotos, das not(#logo) nur dass es beim Logo nicht ist, aber egal.

Nur wenn ich die width:auto mache ist das Bild scharf und so groß wie es sein soll, allerdings habe ich auch Bilder zb in Containern, die lassen sich dann nicht mehr klein zoomen wenn man den Browser verkleinert..

Damit das dann wieder geht brauchen diese width: 100% -> was hingegen wieder die fotos etwas größer und unschärfer macht, nämlich um 6 px (1px border und 5 px padding).

wie ist die kombination, dass es für alle passt, also scharf und skalierbar?

gruss

Tino

tino · 11. April 2020

hallo,

(Sempervivum) du hast mir einmal: overflow-x: auto;

empfohlen, um die Bilder durchzuwischen, aber das funktioniert bei mir nicht, auch die Fancybox lasse ich nur in der Web-version anzeigen, bei der Mobilen-version sieht es schlecht aus.

Ich hab immer noch keine Idee gefunden, wie ich die Bilder durchwischen kann, so als ob sie in einem Ordner am Smartphone sind.

frohe Ostern

Tino

tino · 5. April 2020

hallo,

vielen dank für die schnelle Antwort...

es hat genauso funktioniert

Tino

tino · 5. April 2020

hallo,

ich habe wieder ein kleines Problem,

Code

<p id="text_12">Warum ich Fotografiere</p>  <p id="text_10">April 2020</p>

diese Zeile soll einfach nur nebeneinander stehen, nur "text_10" ist eben etwas kleiner und eine andere Farbe.

Sobald ich aber diese zweite ccs vor April 2020 schreibe, steht April 2020 plötzlich darunter, also wie mit einem <br>, warum dass?

das css ist einfach nur:

Code

#text_12 { 
    font-family: Verdana;
    font-size: 12pt;
    color: #ff6633;
  }
#text_10 { 
    font-family: Verdana;
    font-size: 10pt;
    color: #ce9800;
  }

wo kommt der Zeilenumbruch her?

danke euch schon wieder

Tino

tino · 1. April 2020

hallo,

ja so kann auch jede schlechte Lage ihre positiven Seiten haben,

meine Frau liegt mir seit gefühlt 10 Jahren auf den Nerven, endlich mal eine Webseite unserer Reisen / Fotos zu machen....

Ich habe etwas Ahnung von früher, aber da hat sich ja alles geändert.....

Und jetzt ist Zeit dafür, ich verstehe dank eurer Hilfe und vielleicht auch manchmal mit banalen Fragen immer mehr und es macht Spass.

Ohne Corona hätte ich das nie angefangen,

also alle mal schön drinnen bleiben und durchaus mal verborgene Sachen, Baustellen, Talente, etc... wieder versuchen.

Tino

Beiträge von tino

Bilder swipen am Smartphone

Bilder swipen am Smartphone

Bilder swipen am Smartphone

sticky header funktioniert bei effekten nicht

Aufbau des <img> tags

Aufbau des <img> tags

Frage zu einem Button: weiterlesen

Frage zu einem Button: weiterlesen

Frage zu einem Button: weiterlesen

Frage zu einem Button: weiterlesen

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

sticky header funktioniert bei effekten nicht

Zeilenumbruch verhindern

Zeilenumbruch verhindern

sticky header funktioniert bei effekten nicht