Beiträge von tino

hi,

ok, ,ich teste weiter,

da meine Frau sich immer noch nicht für den namen entscheiden kann !!!!, durfte ich es auf einen Unterordner eines Freundes testen, damit ich eben auch die Smartphone Versionen testen kann....

ich habe ihm versprochen, dass keinem zu zeigen, sobald es online steht sag ich dir sicher bescheid, ausserdem hab ich noch zu viele Baustellen

Aber wir sitzen hier ja noch bis mind. 20 April.

Gruss Tino

hallo

also das Fancybox funktioniert jetzt am Smartphone, allerdings ist das handling nicht schön,

ich muss rel. lange drücken bis der Pfeil zum swipen kommt, davor geht es nicht, drückt man etwas zu lange kommt vom Android das Fenster

zum Bilder speichern, etc...

wenn ich ganz normal ohne Fancybox das Bild anzeige, gibt es dafür ein Tool, eine Technik, dann meine ca. 20 Bilder so einfach durchzu-swipen, als wie wenn sie in einem Ordner am Smartphone wären.

gruss

Tino

hallo nochmal,

den letzten post habe ich selbst hinbekommen,

es lag wohl an 2 sich überschneidenden css-werten für das : a img

danke nochmal für alle ideen für die image-slider

Tino

ps.

Zitat

https://codepen.io/basti1012/pen/ExjGwYE

auch das geht mittlerweile für mich verständlich, mercy

hi,

danke, mittlerweile habe ich es fast genauso hinbekommen.

Frage, habe gerade noch was komisches festgestellt, ich wollte bei einem Bild einfach einen Rand darstellen...

a img:not(#logo) {
    border: 2px solid #BBB;
    padding: 2px;

    vertical-align: top;
    width: auto;
    height: auto;
}

so habe ich es gemacht, aber plötzlich werden die Bilder nicht mehr kleiner, wenn ich denBrowser verkleiner....

ABER das komische, wenn ich width und height weglasse geht alles aber das Bild wird etwas größer dargestellt und etwas unscharf ?

Gruss

Tino

ja, stimmt schon, bei mir bremmst der eine irgendwie etwas langsamer ab, aber egal, völlig ausreichend.

gruss

Tino

hi,

danke , der link ist nicht schlecht,

allerdings find ich leider die smoothen Übergänge bei meinem etwas schöner.....

habe es immer noch nicht geschafft bei dem ein weiteres Bild hinzuzufügen.

Also falls da jemand noch ne Verbesserung hat, gerne

Tino

hallo,

ich habe mir von der codepen.io Seite einen Imageslider geholt, dieser funktioniert gut für 4 Bilder, im html sind 5, da das letzte wie das erste ist für den schönen Übergang.

Nun wollte ich einfach ein 6,7 tes usw dazufügen,

aber egal was ich in den css ändere es passt nie??

Entweder sind dann alle zu lang, kurz, plötzlich ist eine schwarze Fläche darunter wie ein weiterer Platzhalter....

Am sinnvollsten erschien mir noch: 5 Bilder -> 500% , dann sind 6 Bilder -> 600%,

auch das geht nicht,

ich habe mal beide sachen gepostet, vielleicht hat ja jemand eine Idee oder Verbesserung.

dank euch Tino

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}


figure {

  background: #101010;
  font-family: Bradley Hand ITC;


}
div#captioned-gallery {
  width: 90%;
  overflow: hidden;
  margin-left: 5%;
}
figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
  animation: 20s slidy infinite;
}
figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: auto;
}

figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;

}

und im html:

<div id="captioned-gallery">
  <figure class="slider">
      <figure>
        <img src="bilder/slider/slide01.jpg" alt>
        <figcaption>Strand Lofoten, Norwegen</figcaption>
      </figure>
      <figure>
      <img src="bilder/slider/slide02.jpg" alt>
        <figcaption>Costa Calida, Spanien</figcaption>
      </figure>
      <figure>
      <img src="bilder/slider/slide03.jpg" alt>
        <figcaption>Pindos Gebirge, Griechenland</figcaption>
      </figure>
      <figure>
      <img src="bilder/slider/slide04.jpg" alt>
        <figcaption>Benidorm, Spanien</figcaption>
      </figure>
      <figure>
      <img src="bilder/slider/slide01.jpg" alt>
        <figcaption>Strand Lofoten, Norwegen</figcaption>
      </figure>
  </figure>
</div>

abend,

ich glaub ich habe es brauchbar hinbekommen,

eine Frage noch an dich, ich weiß nicht ob sie hier her gehört oder einen neuen Beitrag würdig ist.

ich lasse auf einer Seite ja ca. 20-30 Thumbnails von Fotos anzeigen, für die Web-Variante benutze ich fancyboy, um die Bilder gross und schön mittig anzuzeigen.

Das hat die Pfeile für vor- bzw Rücksprung....

Jetzt für die Mobile-variante zeigt diese fancybox die Bilder auch an, aber die Pfeile zum weiterblättern fehlen,

vom Android her kenne ich die swipe-eigenschaften, aber wie soll es hier mit html und css oder so gehen?

ist sowas sehr komplex? andernfalls kann man eben immer nur auf eines klicken und mit dem Händy-back button zurück.

dank dir

Tino

hi,

alles klar, dafür brauch ich noch zeit, grad brennts überall,

bleibt gesund

bis dann

Tino

hallo,

ich hoffe du kannst mir nochmal helfen, noch was zu meiner ersten Variante, in der ich ja 2 völlig verschiedene Designs für Web und Mobilephone habe.

Auf der allerersten Seite index.html mache ich ja die Unterscheidung:

<script>
    $(document).ready( function() {
        var height = $(window).height();
        var width = $(window).width();
        if (width < 800) url = 'mobile/index_mobile.php';  else url = 'index_web.php';
        $('body').load(url);
    });
    </script>

das ganze geht im xampp und im web passt auch alles, nur ich wollte , damit nicht alle Dateien auf der selben Ebene sind, einen Ordner "mobile" anlegen, und darin alles für die mobile Variante legen, dass handy zeigt nur Mist an..... ist am Orner was falsch

url = 'mobile/index_mobile.php';

danke dir schon wieder

Tino

hi,

aber bei einer responsive variante habe ich doch dann nur EINE datei, meinetwegen index.php und muss da eben den richtigen header einbinden.

Die Variante mit den komplett 2 verschiedenen Versionen funktioniert ja mittlerweile, wir reden doch grad seit 4-5 posts von der responsive Variante,

ich steh grad aufn Schlauch, bis morgen

bleib gesund

Tino

hallo,

das verstehe ich grad nicht, bei einer responsive Variante habe ich doch nur eine datei, in der body in dann entweden header_web bzw. header_mobile laden will.

Was meinst du mit body.php bzw. body_mobile.php ?

gruss

Tino

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

mist, du hast recht, diese zeile steht eigentlich auf allen seiten, nur hab ich hier mit copy/paste ein grundgerüst genommen zum testen und nicht drauf geachtet..

mein gott...

$(document).ready( function() {
    var width = $(window).width();
    if (width > 600) url = <?php include 'include_header_pc.php';?>; 
    else             url = <?php include 'include_header_mobile.php';?>;
    $('body').load(url);
});

vielleicht hast du zu der header sache ja auch so ne einfache lösung

dank dir echt

Tino

ich teste es ja im webserver wie alles,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

</head>


<body>
    <script>
        $(document).ready( function() {
            var height = $(window).height();
            var width = $(window).width();
            if (width > 600) url = 'index.php'; else url = 'fotos_sw.php';
            $('body').load(url);
        });
        </script>
</body>
</html>

hab mal das script im body, aber es passiert garnix, weiß?

 $('body').load(url);

das hier soll das in body geladen werden, die seite index.php soll doch aber als erste komplette seite dann kommen und das hier nur davorgeschaltet zur unterscheidung

nochwas....

ich versuch grad noch eine allererste , sozusagen leere seite:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css_stickyHeader.css" rel="stylesheet">
<link href="navigation.css" rel="stylesheet">
<link href="css_image_change.css" rel="stylesheet">


<script>
    $(document).ready( function() {
        var height = $(window).height();
        var width = $(window).width();
        if (width > 600) url = 'index_pc.php'; else url = 'index_mobile.php';
        $('body').load(url);
    });
    </script>
</head>


<body>

</body>
</html>

die jetzt entscheiden soll, in welche richtung es geht, aber die ist nur weiß und nichts wird geladen?

  $('body').load(url);

liegt hier der fehler, wie muss die richtige .php geladen werden

Tino

morgen,

also ich bin weitergekommen mit den beiden 2 völlig unterschiedlichen designs, das sollte so funktionieren....

ich versuch natürlich auch weiter die responsive sache zu verstehen...

ich habe da ja im body den header mit php eingebunden:

<?php include 'include_header.php';?>

nun versuch ich auch ähnlich wie dein beispiel auch 2 headern zu wählen (menu_pc und menu_mobile), klappt aber nicht, so mein versuch:

$(document).ready( function() {
    var width = $(window).width();
    if (width > 600) url = <?php include 'include_header_pc.php';?>; 
    else             url = <?php include 'include_header_mobile.php';?>;
    $('body').load(url);
});

oder sowas : ?
$(document).ready( function() {
    var width = $(window).width();
    if (width > 600) <?php include 'include_header_pc.php';?>; 
    else             <?php include 'include_header_mobile.php';?>;
    $('body').load();
});

noch ne idee,

ansonsten danke schon mal, bin echt weitergekommen

Tino

ok,

danke ich teste mal etwas rum.

etwas noch die .width() geht doch nach pixeln, desktop hier 1920, was wäre wenn ein gutes händy display auch zb > 1400 wäre,

gibt es noch sinnvolle andere abfrage parameter.

genug für heute, muss zum zahnarzt solange der noch offen hat

danke schon mal Tino

hi,

<head>
<script>
$(document).ready( function() {
    var height = $(window).height();
    var width = $(window).width();
    $.ajax({
        url: 'body.php',
        type: 'post',
        data: { 'width' : width, 'height' : height, 'recordSize' : 'true' },
        success: function(response) {
            $("body").html(response);
        }
    });
});
</script>
</head>
<body></body>

versteh ich nicht, wenn das in der index.php steht, wird hier doch in jedem fall die body.php geladen und dann auf allen seiten wieder mit:

<?php
if(isset($_POST['recordSize'])) {
$height = $_POST['height'];
$width = $_POST['width'];
$_SESSION['screen_height'] = $height;
$_SESSION['screen_width'] = $width;

sowas abgefragt, ich will doch aber in der index schon den split in body.php und meinetwegen body_mobile.php und ab dann 2 komplett verschiedene völlig unabhängig voneinanderne seiten, nicht jedesmal irgendwelche abfragen....?

wie kann ich an der stelle:$.ajax({
        url: 'body.php',

irgendwie die if-abfrage machen

danke Tino

hallo,

du meinst sowas :

<link type="text/css" rel="stylesheet" media="screen" href="style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />

damit binde ich dann aber doch in abhängigkeit von werten nur verschiedene css.dateien ein......

ich hätte echt lieber 2 völlig verschiedene seiten, es handelt sich ja nur um fotographien unserer reisen, am pc eben mit effekten , mosaicmäßigen gallerien, aufwendig eben, und am smartphone nur die besten 10 untereinander.... also wenig pflege-aufwand.

wie sähe so eine abfrage auf der ersten index.php (oder index.html) aus?

habe etwas java kenntnisse von android studio, da wärs einfach , aber in dem html ?

Tino

hi nochmal,

danke hab den index höher als alles andere - geht...

nochmal wegen pc und smartphone, ich lese immer nur, dass man in den css die größen unterscheidet, habe ich schon und es geht passabel mit flexbox, img: height = auto und solchen sachen.........

frage: kann man auf der allerersten seite, hier index.php eine art if-abfrage mache, ob die pc variante kommt oder eine völlig abgespeckt, nur 2 menupunkte und alle fotos mittig und groß untereinander: ----> sowas wie : start_pc.php bzw. start_smartphone.php und dann jeweils weitergehend.

gruss Tino