Flex Design mit seitenweiser Anzeige

  • Hallo Leute,

    einer meiner Kunden (Modelagentur) hat eine alte Homepage (Frames, starres tabellarisches Design) und möchte diese neu gestalten (responsive, flex), sodass sich die Anzeige autom. an die Monitorgröße anpasst, vom PC Monitor bis zum Handy. Die Models werden derzeit nach Gruppen aufgelistet (Women, Women Sport, Women Best Agers, etc), wobei die Fotos am PC Monitor in 6 Cols und 10 Rows dargestellt werden, insgesamt sind es derzeit bei Women etwa 240 Models also 4 Seiten. Die Modeldaten werden dabei per PHP aus einer Datenbank ausgelesen, die Fotos dazu vom Filesystem.


    Wenn ich dies nun flex gestalte und die Anzeige erfolgt auf einem schmäleren Monitor (Tablet, Handy), wird die Spaltenanzahl reduziert, wodurch die Rows aber mehr werden und mit jeder Reduzierung der User weiter nach unten scrollen muß, da die PHP Routine ja immer 6x10 Fotos bringt und nichts vom schmäleren Monitor weiß. Am Handy mit einer Spalte finde ich seitenweises Blättern dann überhaupt unschön, da Handydesign eigentlich nicht auf Seitendarstellung ausgelegt ist. Andererseits ist ein runterscrollen über 240 Fotos auch nicht grad amüsant.


    Alternativ dazu könnte man das mit einem Button "Mehr anzeigen" nach jeweils x Fotos lösen, der per Ajax immer wieder die nächsten x Fotos nachlädt. Das ist aber wiederum für den User unschön, da er nicht weiß, wie oft er "Mehr anzeigen" klicken muß, bis er zum letzten Foto kommt und ev. die Geduld verliert.


    Erschwerend kommt dann noch dazu, dass der User nach Models suchen kann, dann werden nicht nur Models aus einer Gruppe aufgelistet (Women), sondern über alle Gruppen (Women, Women Sport, Women Best Agers), sodaß die Models auch gruppiert werden müssen und das sollte man dem User auch beim Seitendesign mittels neuer Seite und einer entsprechenden Gruppenüberschrift kundtun. Dadurch entsteht aber das Problem, dass im voraus nicht mehr die korrekte Seitenanzahl fürs Blättern ermittelt werden kann, weil durch die Gruppierung mehrfach Seiten nicht mehr ganz befüllt werden.


    Hat jemand von euch schon mal mit solchen Überlegungen zu tun gehabt und hat für mich ev. ein paar Gedanken, wie man das sinnvoll abwickeln kann?


    LG

  • Noch eine Variante zum Thema blättern fällt mir ein:

    Wenn der User die angezeigten Fotos runterscrollt könnte man statt mit dem Button "mehr laden" AUTOMATISCH den nächsten Block nachladen. Hat jemand eine Ahnung wie man dies verwirklichen kann?

  • Das autom. Nachladen habe ich inzwischen hinbekommen mit JS:

    Jetzt bräuchte ich noch während dem Nachladezeitraum eine "Bitte warten" Anzeige, die möglichst auch die Seite blockiert. Dazu habe ich die Funktion pleaseWait() im Netz gefunden, bringe sie aber nicht zum Laufen, es passiert einfach nichts. Hat jemand eine Idee, woran das liegt?

  • Inzwischen habe ich herausgefunden, wann pleaseWait() funktioniert und wann nicht:

    Code
    1. <button onclick="$('#test').pleaseWait();">start</button> // funktioniert
    2. <button onclick="startFunction();">start</button> // funktioniert nicht!!!
    3. startFunction() {
    4. $('#test').pleaseWait();
    5. }

    Hat jemand eine Idee warum es nicht funktioniert wenn es in einer Funktion steht? Wenn ich es fürs Nachladen per Ajax verwende, geht es leider nur in einer Funktion.

  • Hat jemand eine Idee warum es nicht funktioniert wenn es in einer Funktion steht?

    Man müßte es Live sehen dann wäre es einfacher.

    Hast du Fehler in der Console stehen ?

    Steht das <script> unterhalb des Buttons oder davor ?

    Ich persönlich würde addEventListener benutzen

    bzw bei Jquery sieht es so aus

    Code
    1. <button id="go">start</button> // funktioniert auch
    2. <script>
    3. $('#go').click(function(){
    4. $('#test').pleaseWait();
    5. })
    6. </script>
  • Ich habe es inzwischen soweit mittels der Funktionen ajaxStart und ajaxStop, dass pleaseWait aufgerufen wird, der Bildschirm wird auch grau dargestellt, nur das animierte Icon wird nicht angezeigt! Ich habe deshalb eine zusätzliche Anzeige über einen roten Button "Daten werden nachgeladen" eingebaut, den ich ein- und ausblende, außerdem eine künstliche Pause von 1 sec, damit man auf jeden Fall was sieht!

    Eine Testversion steht unter http://rachbauer.org/test/Visage-white/model4.html, bitte keine Kommentare oder Vorschläge zum HTML- oder CSS-Code, dies ist nur eine quick and dirty Seite, damit der Kunde die Funktion sieht, geht so nicht in Produktion!

  • Du möchtest jetzt nur noch das der icon angezeigt wird wenn die Seite mehr Bilder nachlädt ?


    Ich würde dein Bild als <img> einbauen und nicht als backgroundimage;

    preloader mit der css

    Code
    1. .preloader{
    2. position: absolute;
    3. z-index: 999999;
    4. width: 100px;
    5. top: 50%;
    6. left: 50%;
    7. height: 100px;
    8. transform: translate(-50% ,-50%);
    9. display: block;
    10. }

    dann ein container ein container mit den img

    die den einfach immer ein und ausblenden beim nachladen und schon sollte dein Ziel erreicht sein ?

  • Hallo Basti,

    normalerweise müßte mit der Funktion pleaseWait() nicht nur der Bildschirm gegraut dargestellt sondern auch ein beliebiges Image anzeigbar sein. Der Bildschirm wird zwar grau aber das Image erscheint nicht (weder das integrierte noch ein man. angegebenes). Deshalb habe ich testweise zusätzlich einen Button mit Text angezeigt, das könnte man klarerweise auch mit einem Image machen. Ich möchte mir nur meine eigene Anzeige ersparen, wenn es in der Funktion pleaseWait() sowieso schon eine gibt!


    Zum besseren Verständnis, das Script ist von: https://www.jqueryscript.net/l…th-jQuery-pleaseWait.html

  • Achso jetzt verstehe ich es.

    Ich muß ehrlich sagen ich hasse das Script.

    Das könnte man selber einfacher bauen , meiner meinung nach.

    Ich habe versucht es trotzdem so einzubauen wie es ein soll, doch das ladebild ist immer ausserhalb des Bildes.

    Vieleicht bin ich auch zu blöde gewesen.

    Wenn ich in den Script die Css Werte ändere funktioniert es

    http://sebastian1012.bplaced.net/loesungen/lagraf.php


    Du hast auch 2 mal Jquery eingebunden. Einmal im head und einmal ganz unten.

    Das pleasewait Script scheint mit Jqery Version aus den head nicht zulaufen( habe aber nicht gekuckt warum ).

    Habe das im head gelöscht und das aus den footer darein kopiert.


    Bei mir läuft es so.

    Ob du das so übernehmen willst musst du wissen.

    Vieleicht hat wer anders eine bessere Lösung die ich irgendwie übersehen habe ?


    PS:

    Du solltest mal versuchen hier ein paar Fehler zu beseitigen

    https://validator.w3.org/nu/?s…th-jQuery-pleaseWait.html


    Du hast auch id's doppelt benutzt , bei deinen Video ding da "iid=buttons"

    das darf gar nicht sein.

  • Hallo Basti,

    danke erstmal für deine Mühe, ich schau mir gleich mal deine Änderungen an! Folgende Infos bzw. Fragen hätte ich an dich:

    • Dass die neuere jQuery Version pleaseWait nicht unterstützt, ist mir auch aufgefallen, die habe ich in dem Projekt aus anderen Gründen eingebunden. Was macht man in so einem Fall, wo 2 unterschiedliche Versionen notwendig sind, weil eine nicht beide Fälle abdeckt?
    • Gibt es ein besseres Script anstelle von pleaseWait, man sieht die Technik ja inzwischen öfter?
    • Die Seite https://www.jqueryscript.net/l…th-jQuery-pleaseWait.html ist nicht von mir, habe ich nur gefunden wegen dem pleaseWait Script.
  • Was macht man in so einem Fall, wo 2 unterschiedliche Versionen notwendig sind, weil eine nicht beide Fälle abdeckt?

    Da für gibt es noconflict()

    https://api.jquery.com/jquery.noconflict/


    Ein besseres Script als pleasewait kenne ich nicht weil ich das noch nie gebraucht habe.

    Ich sagte ja schon das ich und andere sowas schon öfters selber gebaut haben.


    Du brauchst ja nur ein Container mit den Images, den gestalltest du mit Css wie es aussehen soll, dann noch etwas transition und rotate.

    Den Container brauchst du ja nur noch ein und ausblenden wenn zb dein Ajax läd.

    Das spart dir eine menge Code und Requeste.

    Wissen muß das aber jeder selber ob er sowas einbindet oder selber macht.

  • Hallo Basti,

    danke für deine Hilfe!

    Das manuelle Einblenden eines Images bzw. Textes habe ich sowieso schon realisiert, weil das Icon bei pleaseWait nicht angezeigt wurde. Dann lasse ich pleaseWait einfach weg und erspare mir damit auch die alte jQuery Version!

    LG

  • Hallo Basti,

    danke für deine Hilfe!

    Das manuelle Einblenden eines Images bzw. Textes habe ich sowieso schon realisiert, weil das Icon bei pleaseWait nicht angezeigt wurde. Dann lasse ich pleaseWait einfach weg und erspare mir damit auch die alte jQuery Version!

    LG

    Das mußt du wissen.

    Wenn du dabei hilfe brauchst sag bescheid.

    Vergiss aber nicht die alten Scripte von pleaswait zu löschen , die brauchst du dann nicht mehr.