Colorbox #cboxClose #cboxPrevious #cboxNext

[mapfei]

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?

[Spooky]

Warum nicht? Link zur Seite?

[Andreas]

Irgendwelche Tipps?

Ja, die sind bereits absolut positioniert. Siehe demo.contao.org.

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:

/* ... 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
-------------------------------------------------------------------------------------------------*/ 

[mapfei]

Ja, die sind bereits absolut positioniert. Siehe demo.contao.org.

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...

[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.

[mapfei]

Hab jetzt ne andere Lightbox eingebaut, ist wohl unkomplizierter.

[aadursun]

Wie hast du's gelöst?

[mapfei]

Wie hast du's gelöst?

Indem ich eine andere Lightbox verwendet habe.

[Andreas]

Wie hast du's gelöst?

Z.B. so:

        // Put custom options here
        ...
        maxWidth: '100%',
        maxHeight: '100%',
        width: '100%',
        height: '100%'
        ... 

Siehe auch hier: http://www.jacklmoore.com/colorbox/#setting-dimensions