Colorbox - Responsives Design - Vorschaubilder

[stromflo]

Guten Abend,

jetzt ging es so gut vorwärts und ich habe provisorisch mal das Plugin Colorbox installiert.
Nun suche ich nach einer Option, dass sich die Menge der angezeigten Vorschaubilder nach dem vorhandenen Platz in der Box richtet.

Habe mal einen Screenshot angehängt. Da sieht man, dass die Vorschaubilder über den Rand reicht und man somit scrollen muss. Gibt man nun über die Syntax z.B. nur zwei Vorschaubilder vor, so wirkt die Seite bei anderen Auflösungen doch gar so leer.

Hat jemand da eine Lösung? Habe ich eine Einstellmöglichkeit übersehen?

Gruß Flo

[stromflo]

Nach einigem hin und her überlegen bin ich mal zu folgender Lösung gekommen:

Inhaltsseite:

Code Auswählen Erweitern


[html|<div class="fotoboxgr {ColorBox|@=Beispiel=@,picsperrow=8,maxWidth=95%,maxHeight=95%}</div>]
[html|<div class="fotoboxkl {ColorBox|@=Beispiel=@,picsperrow=2,maxWidth=95%,maxHeight=95%}</div>]


Definition:

Code Auswählen Erweitern


@media only screen and (min-width: 1366px) {
   
    .fotoboxgr{
        display: block;
    }
   
    .fotoboxkl{
        display: none;
    }
}

@media only screen and (max-width: 800px) {
 
   .fotoboxgr{
        display: none;
    }
   
    .fotoboxkl{
        display: block;
    }
}


Vielleicht gibt es ja noch eine einfachere Möglichkeit?

Gruß Flo

[stefanbe]

Probier doch mal sowas aus

Tabelen Breite 90% des content
table.gallerytable {
    width: 90%;
}

Bild Breite in der Zelle 90%
img.thumbnail {
    width: 90%;
}

lg stefanbe

[stromflo]

Hallo Stefan,

danke für deinen Tipp!
Allerdings werden die Vorschaubilder in der mobilen Ansicht dann schon richtig klein....

Da gefällt es mir fast besser, wenn die Vorschau dann in mehrere Zeilen verteilt wird.

Gruß Flo