moo slimbox maximal Bildschirmbreite

[rudibe]

Hallo zusammen,
für eine mobile Website würde ich gerne die moo slimbox oder mediabox nutzen. Was muss ich tun, damit das Galeriefenster so breit wie das Browserfenster bzw. der Handy-Bildschirm ist? (mediabox ist zu klein, slimbox so groß wie das Bild)

Bei der jquery colorbox ist das gut gelöst. Diese passt sich ja sogar beim Drehen des Bildschirms an. Hier kann ich aber das Design mit den 2 großen Pfeilen im Bild für meine Anforderung nicht brauchen. Das Design der colorbox ändern, wäre also auch eine Lösung.

Vielen Dank im Voraus für Eure Tipps

[Andreas]

Wenn du mit dem Verhalten der Colorbox zufrieden bist, dann würde ich diese nehmen und das CSS anpassen. Ich meine, dass die mediabox auch nicht mehr weiterentwickelt wird. Man kann da zwar die Größe der Box einstellen, aber ich weiß nicht ob das mit Prozent oder vw und vh geht. Ich glaube das geht nur mit Pixeln.

Schau dir mal das CSS in assets/jquery/colorbox/1.6.1/css/colorbox.css an. Dann mit Firebug im FE die User Style Werte anpassen bis es gefällt und anschließend in deine eigene CSS einfügen. In den Ordnern findest du auch das Bild für die Pfeile. Ändere aber keine Core-Dateien und lege auch keine eigenen Dateien in die Core-Ordner. Lege deinen Kram nach /files/

[rudibe]

Danke, Du hast recht. Schon allein das Bild mit den Pfeilen anzupassen würde eine Verbesserung bringen. In meinem Fall müssten die Pfeile dann kleiner sein, damit sie nicht die Produkte auf den Bildern überlagern...aber das kann man ja nach seinem Geschmack ändern...

Was mich auch noch etwas stört an der Colorbox:
- Beim Klick auf das Bild kommt man immer nur vorwärts. Mir würde es gefallen, wenn man beim Klick auf die linke Hälfte zum vorherigen Bild und beim Klick auf die rechte Hälfte zum nächsten Bild gelangen würde.
- Schön wäre natürlich auch noch eine Swipe-Funktion, denn alle wollen doch "wischen"

Eine sehr ansprechende Alternative habe ich noch gefunden (leider auch nicht swipe-fähig aber sonst top), die Nivo Lightbox:

https://github.com/fritzmg/contao-nivo-lightbox

Vielleicht kennt ja jemand noch eine für Mobilgeräte optimierte Alternative zur Colorbox?

Danke und herzliche Grüße

[stefan-at-work]

Vielleicht kennt ja jemand noch eine für Mobilgeräte optimierte Alternative zur Colorbox?

Tosrus

[Andreas]

Mir würde es gefallen, wenn man beim Klick auf die linke Hälfte zum vorherigen Bild und beim Klick auf die rechte Hälfte zum nächsten Bild gelangen würde.
- Schön wäre natürlich auch noch eine Swipe-Funktion, denn alle wollen doch "wischen"

Das mit der großen Klickfläche kannst du über CSS regeln.

/* ... Colorbox click 50/50 ...
-------------------------------------------------------------------------------------------------*/
#cboxPrevious,
#cboxNext {
  background: transparent;
  width: 50%;
  height: 100%;
  top: 0;
  margin-top: 0;
}
#cboxPrevious {
  left: 0;
}
#cboxNext {
  right: 0;
}
#cboxPrevious:before,
#cboxNext:before {
  background-image: url("../../assets/jquery/colorbox/1.6.1/images/controls.png");
  position: absolute;
  width: 28px;
  height: 65px;
  top: 50%;
  margin-top: -33px;
  content: '';
}
#cboxPrevious:before {
  background-position: left top;
  left: 5px;
}
#cboxNext:before {
  background-position: right top;
  right: 5px;
}
#cboxPrevious:hover:before {
  background-position: left bottom;
}
#cboxNext:hover:before {
  background-position: right bottom;
}
/* ... Colorbox click 50/50 ... END
-------------------------------------------------------------------------------------------------*/ 

Den Pfad zum Bild musst du auf deine Situation anpassen.

Dass die Colorbox nicht swipet wundert mich ein wenig. Ich hätte jetzt erwartet, dass die Lightboxen in Contao automatisch swipen. Vielleicht sollte Contao für den Core nochmal auf die Suche gehen nach jQuery und MooTools Lightboxen, welche swipen und evtl. sogar Vollbild darstellen können.

Bei der Mediabox sieht es tatsächlich so aus, als wäre da seit 4 Jahren nichts mehr angepasst worden. https://github.com/iaian7/mediaboxAdvanced