Slideshow2 - Quadratische Thumbnails (Seitenverhältnis ändern)

**sternenatem** · 05.05.2012, 19:47

Liebe Slideshower,

gibt es eine Möglichkeit in der Slideshow2 2.0 die Thumbnails von rechteckigen Bildern quadratisch auszugeben?

Hintergrund: Ich habe neben Contao die Slideshow2 von Version 1.0 auf 2.0 aktualisiert und nach kleineren Anpassungen via CSS bringe ich keine quadratischen Thumbnails mehr zustande (ausser ich zwinge via CSS das „img“ sich zu „strecken“). Im Backend habe ich unter „Bildbreite und -höhe der Thumbnails“ jeweils 56px geschrieben. Im Frontend werden dann die Thumbnails genau 56px breit, jedoch nur 45px hoch, was auch dem korrekten Seitenverhältnis der grossen Bilder entspricht.

So sieht es im Moment aus:
thumbnails.png

Und so möchte ich es gerne (wieder) haben:
thumbnails2.png

Das untere Bild läuft so mit Slideshow2 1.0 (Contao 2.9.2) und soweit ich noch weiss, habe ich damals ohne Anpassungen quadratische Thumbnails erhalten.

Vermutlich gibt es dafür eine Einstellung in der „slideshow.js“ im plugins-Verzeichnis. Ich bin jedoch nicht so stark mit JavaScript bewandert und brauche deshalb Hilfe.

Besten Dank im Voraus.

**sternenatem** · 09.05.2012, 15:40

Ich habe es jetzt auf eine andere Weise gelöst:

Im Backend habe ich die Thumbnail-Masse so eingestellt, dass die kürzere Seite jeweils mindestens 56 (bzw. 58) Pixeln entspricht. Dann habe ich via CSS (overflow:hidden) den „überstehenden“ Bereich der Thumbnails auf 56 x 56 (bzw. 58 x 58) Pixel „abgeschnitten“:

HTML-Code:

.slideshow-thumbnails ul li {
	margin: 0 10px 10px 0;
	height: 58px !important;
	width: 58px !important;
}

.slideshow-thumbnails ul li a {
	border: 1px solid #FFFFFF;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	width: 56px;
	height: 56px;
}

.slideshow-thumbnails ul li a:hover {
	background-color: #FFFFFF !important;
}

.slideshow-thumbnails ul li a img {
	margin-left: -7px;
}

Hier dazu noch zwei weiterführende Links:

Ich hoffe, dass hilft vielleicht dem Einen oder Anderen weiter.