Diashow - Bilder zu groß
Hallo Bocki,
das ist mir auch schon aufgefallen!
Wenn Du nur die Größe anpassen willst, geht das sehr gut über "Admin > Layout > Farben & Einstellungen > CSS > Eigener CSS Code"!
Zu beachten ist bei Größenveränderung, dass der Wert der Höhe (height) in Zeile 1 größer sein muss, als in Zeile 2 (ca. 30px, Bildbeschreibung).
Mit "margin-bottom" bekommst Du noch einen Abstand unterhalb der Bilder hin.
Getestet im Business-Template.
2
.mimagewrap {height:180px;min-width:90px;margin-bottom:10px;}
.mimagewrap img{max-width:150px;max-height:150px;}
Willst Du noch mehr anpassen, sieht es wie folgt aus.
Hier wird die Hintergrundfarbe für Beschreibung und Bild, Schriftgröße und der Bilderrahmen angepasst.
2
3
4
.mimagewrap {border:none;height:180px;min-width:90px;margin-bottom:10px;}
.mimagewrap div {background: #383838;border-radius:0 0 5px 5px;}
.mimagewrap img{max-width:150px;max-height:150px;border-radius:5px 5px 0 0;}
.mimagewrap a {color: #eeeeee; font-size:13px;font-weight:bold;}
Wenn Du alle Bilder ausblenden willst und nur bei Bedarf anschauen willst, habe ich ein paar Lösungen bei mir im Forum vorgestellt!
Habe hier so einiges Zur "Lightbox" und angehängte Bilder geschrieben!
Hier der Link: Diashow für angehängte Bilder modifizieren!
Bis dann
Wolfgang
Forum für Hilfe, Tricks & Tipps / 104774 / Business-Template / Internet Explorer 11
Ich bin mir grade nicht sicher was Wolfgangs Code macht, das sieht mir aber eher nach einer Änderung der Anzeige der Vorschaugrafiken aus.
Um wirklich nur die Lightbox so anzupassen, dass die Bilder egal auf welchem Endgerät maximal 100% der Bildschirmbreite ausfüllen kannst du folgendes CSS-Addon verwenden:
Dazu bitte unter Admin→Layout→Farben & Einstellungen→CSS folgendes eintragen:
#lightbox-image,#lightbox-container-image-box,#lightbox-container-image-data-box{max-width: 100%; height: auto !important;}
#jquery-lightbox{overflow:hidden;}
Ich denke mal das werden wir auch so ins nächste Update übernehmen.
Technik · 
Hallo und gleich mal ein sorry vorweg!
Stimmt,
habe zuerst an die Vorschaubilder gedacht!
Sind bei mir recht groß!
Ich habe die Bilder im Anhang als Referenz für die "Lightbox" genommen.
Hier sind quadratische, horizontale und vertikale Bilder dabei!
Hier kann man gut sehen, wie CSS-Einträge greifen!
Hallo @Ingmar
Bei Deinem Eintrag muss noch der Close-Button bedacht werden. Er wird von "Next" überdeckt (bei mir jedenfalls, im Business)!
Klickt man auf "Close" geht es ein Bild weiter!
Habe "#lightbox-nav-btnNext, #lightbox-nav-btnPrev {height:100% !important;}" noch hinzugefügt!
Die Bilder werden mit Deinen Eintrag mit 100% Breite angezeigt, super!
Aber bei horizontalen Bildern muss man viel scrollen!
Habe noch einen Vorschlag für eine max. Größe, ohne scollen:
2
3
4
5
6
7
#lightbox-image-details-currentNumber {font-weight:bold !important;font-size:15px;padding-top:12px;}
#lightbox-container-image-box img{max-width:60%;height:auto !important}
#lightbox-container-image-box {max-width:95%; height:auto !important;}
#lightbox-container-image-data-box {max-width:94%;background:#aaaaaa;}
#lightbox-nav-btnNext, #lightbox-nav-btnPrev {height:100% !important;}
#lightbox-secNav-btnClose {padding-top:10px;}
#jquery-lightbox{overflow:hidden;}
1. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n2_DhAyxeag.jpg
2. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n3_cOwnVWta.jpg
3. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n4_MkFhbqgL.jpg
4. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n5_ukBVOaHe.jpg
5. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n6_kMTPBKtn.jpg
6. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n7_QtZESpRw.jpg
7. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n8_URNdKPtw.jpg
8. https://files.homepagemodules.de/b214495/f11769157t544300p7323367n9_YWwAVdZO.jpg
Bis dann
Wolfgang
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!