Hi zusammen.
Ich versuche#cboxClose (oben rechts), #cboxPrevious (mitte links) und #cboxNext (mitte rechts) absolut zu positionieren. Mit purem CSS scheint das nicht so ohne weiteres umsetzbar. Irgendwelche Tipps?
Druckbare Version
Hi zusammen.
Ich versuche#cboxClose (oben rechts), #cboxPrevious (mitte links) und #cboxNext (mitte rechts) absolut zu positionieren. Mit purem CSS scheint das nicht so ohne weiteres umsetzbar. Irgendwelche Tipps?
Warum nicht? Link zur Seite?
Ja, die sind bereits absolut positioniert. Siehe demo.contao.org.Zitat:
Zitat von mapfei
Ansonsten hatte ich mir die Colorbox in Contao 3.5 mal so angepasst, dass ich nicht auf die Pfeile für next und previous zielen muss, sondern direkt jeweils die Hälfte des Bildes ein next oder previous auslöst. Hier das CSS:
PHP-Code:/* ... 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"); /* Contao 3.5 */
/* background-image: url("https://demo.contao.org/assets/colorbox/images/controls.png"); Contao 4 */
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
-------------------------------------------------------------------------------------------------*/
Hm, ich möchte aber das close und vor/zurück jeweils am Rand des Browserfensters platzieren. Aktuell stehts ja absolut am Rand des jeweiligen Fotos. Irgendwie stehe ich da gerade aufm Schlauch... :oZitat:
Zitat von Andreas
Das ist auch nicht so einfach, weil einige Elternelemente auf overflow:hidden und position:not-static stehen. Deswegen sieht man sie zum einen nicht bei Neuausrichtung außerhalb des parents und zum anderen orientiert sich die Positionierung am ersten parent mit position:not-static.
Hab jetzt ne andere Lightbox eingebaut, ist wohl unkomplizierter. ;)
Wie hast du's gelöst?
Indem ich eine andere Lightbox verwendet habe. ;)Zitat:
Zitat von aadursun
Z.B. so:Zitat:
Zitat von aadursun
Siehe auch hier: http://www.jacklmoore.com/colorbox/#setting-dimensionsPHP-Code:// Put custom options here
...
maxWidth: '100%',
maxHeight: '100%',
width: '100%',
height: '100%'
...