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:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
var faktor = 300;
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - faktor)) {
    $('body').pleaseWait();
    getMore();
    $('body').pleaseWait('stop');
    }
}

function getMore() {
$.get('getMore4.php', function(data) {
    document.getElementById('more').outerHTML = data;
    })
}

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:

<button onclick="$('#test').pleaseWait();">start</button>   // funktioniert
<button onclick="startFunction();">start</button>   // funktioniert nicht!!!
startFunction() {
    $('#test').pleaseWait();
    }

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.

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!

var date = Date.now();  // Kein Mehrfachaufruf innerhalb einer Sekunde da User ev. weiterscrollt
var cnt = 0;            // Anzahl Aufrufe

// Anzeige beim Nachladen mittels Ajax
$(document).ajaxStart(function() {
    document.getElementById('loading').style.display = "block";
//  $('body').pleaseWait();    // Icon fehlt ohne Angabe eines png
    $('body').pleaseWait({     // Icon fehlt auch mit Angabe eines png
        crazy: false,
        speed: 8,
        increment: 2,
        image: 'localhost/wwwapps/test/Visage-white/images/loading.png',
        imageType: 'encoded',
        height: 65,
        width: 65
    });
});

// Anzeige beim Nachladen beenden
$(document).ajaxStop(function() {
    document.getElementById('loading').style.display = "none";
    sleep(1000);    // 1 sec warten damit man beim Test was sieht
    $('body').pleaseWait('stop');
});

        // Scroll Funktion (gekürzt)
        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {

            // Fotos Nachladen (
            var faktor = 300;    // Je höher desto früher
            if ($(window).scrollTop() >= ($(document).height() - $(window).height() - faktor)) {
                if (Date.now() - date > 1000) {    // Nicht innerhalb 1 sec mehrmals
                    if (cnt < 2) {    // max. 3 Aufrufe
                        getMore();
                        date = Date.now();
                        cnt += 1;
                    } // cnt
                } // date
            } // scrollTop
// weitere Scroll Funktionen ...
        } // scrollFunction

// Mehr anzeigen, Fotos nachladen
function getMore() {
    $.get('getMore4.php', function(data) {
        document.getElementById('more').outerHTML = data;
    })
}

// Sleep ms
function sleep(ms) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < ms);
}

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!

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

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.

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