Grossansicht Bildergalerie auf Smartphone

urs-s

Grüss euch

1. Ich fände es toll, wenn die Bilder aus einer Bildergalerie in der Grossansicht auf einem Smartphone 100% der Bildschirmbreite ausfüllen. Ich konnte dies mit nachfolgendem CSS erreichen (spricht da was dagegen?).

2. Es wäre zeitgemäss, wenn man von Bild zu Bild streichen (swipe) könnte.

Life zu sehen hier

ZP 14.3.3 Premium

Layout Clean Style Responsive

Beste Grüsse

Urs

CSS

@media screen and (max-width: 479px) {

    #fancybox-wrap {
        width: 100%!important;
        height: auto!important;
        left: 0px!important;
        padding: 0px!important;
    }

    #fancybox-content {
        width: 100%!important;
        height: auto!important;
        border-radius: 0px!important;
    }

    #fancybox-close {
        top: -30px!important;
        right: 5px!important;
    }
}

Alles anzeigen

Stefan S

1.

Gegen das CSS spricht allerdings nichts. Ausser vielleicht, dass es für alle Lightboxen greifen wird, also unabhängig von Bilderalbum oder was sonst noch eine Fancybox Lightbox nutzt. Mal sehen, ob wir das in einer künftigen Version verbessert darstellen können.

2.

Das Bilderalbum unterstützt bereits Swipe-Gesten. Diese werden halt nur nicht "animiert" durchgeführt, man kann aber durchaus per Swipe in einem Album vor und zurück swipen…

urs-s

Hallo Stefan S.

Vielen Dank für die prompte Antwort. Ich habe das CSS noch etwas angepasst und vor allem die #fancybox-wrap mit position: fixed versehen. Damit geht das "Swipen" viel besser und ist nicht so nervös. Sollte diese Lösung den Einsatz der Ligthbox anderswo stören könnte man es ja über eine eigene CSS-Klasse steuern. Für die Grossansicht einzelner Bilder passt es ja so.

Noch ein Vorschlag für das Widget Bilderalbum:

Optional für die mobile Ansicht keine Vorschaubilder anzeigen dafür einen Bilderzähler (1 von 10) und natürlich in voller Bildschirmbreite wie zB bei Youtube.

Viele Grüsse aus der Schweiz

Urs

CSS

/* Fancybox Mobile Portrait*/
@media screen and (max-width: 479px) {

    #fancybox-wrap {
        width: 100%!important;
        height: auto!important;
        left: 0px!important;
        padding: 0px!important;
        position: fixed;
        top: 35px!important;
    }

    #fancybox-content {
        width: 100%!important;
        height: auto!important;
        border-radius: 0px!important;
    }

    #fancybox-title {
        width: 100%!important;
    }

    #fancybox-close {
        top: -30px!important;
        right: 5px!important;
    }

    
    #fancybox-bg-ne, #fancybox-bg-e, #fancybox-bg-se{
        right: 0px!important;
    }

    #fancybox-bg-sw, #fancybox-bg-w, #fancybox-bg-nw{
        left: 0px!important;
    }
}


/* Fancybox Mobile Landscape*/
@media screen and (min-width: 480px) and (max-width: 1024px) {

    #fancybox-wrap {
        position: fixed;
        top: 10px!important;
    }
}

Alles anzeigen

Grossansicht Bildergalerie auf Smartphone

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?