Lust auf einen moderner wirkenden Colorbox-Style (hier als Beispiel in
modified-Farben
) ?
Habe am Wochenende mal gespielt.
- Neu gestylt, z.B.:
- Overlay-Bild ersetzt mit rgba() und Opacity für Browser die es verstehen
- Steuerpfeile vergrößert und außerhalb der Lightbox gesetzt
- Bild- oder iFrame-Titel nach oben mit mehr Platz gesetzt
- Tooltips auf die Pfeil-Buttons mit Hinweis, daß man Bildwechsel auch mittels Pfeiltasten auf dem Keyboard steuern kann (momentan noch nicht touch-kompatibel).
CSS:#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; /*overflow:hidden;*/}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#cboxOverlay{background:rgba(0,0,0,.6);}
#colorbox{outline:0; background:rgba(124,39,89,0.6);border-radius:5px;}
#cboxTopLeft{width:21px; height:10px;}
#cboxTopRight{width:21px; height:10px;}
#cboxBottomLeft{width:21px; height:10px;}
#cboxBottomRight{width:21px; height:10px;}
#cboxMiddleLeft{width:21px;}
#cboxMiddleRight{width:21px;}
#cboxTopCenter{height:10px;}
#cboxBottomCenter{height:10px;}
#cboxContent{/*overflow:hidden;*/ border-radius:5px;}
.cboxIframe{}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin:25px 0 25px;border-radius:5px;}
#cboxTitle{font-weight:400;line-height:20px;font-size:14px;font-weight:bold;top:-2px;color:#fff;left:0;position:absolute;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;width:100%;}
#cboxTitle {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#cboxCurrent{font-weight:400;line-height:20px;position:absolute;bottom:-2px;left:0;color:#fff;font-size:10px; }
#cboxLoadingOverlay{}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute;bottom:0;right:30px;color:#0092ef;}
#cboxPrevious{position:absolute;bottom:50%;left:-65px;width:40px;height:40px;font-size:32px;color:#fff;outline:none;}
#cboxPrevious:hover{color:#ccc;}
#cboxNext{position:absolute;bottom:50%;right:-65px;width:40px;height:40px;font-size:32px;color:#fff;outline:none;}
#cboxNext:hover{color:#ccc;}
#cboxClose{position:absolute;bottom:-18px;right:-32px;width:25px;height:25px;font-size:17px;background:#fff;border-radius:50%;outline:none;}
#cboxClose:hover{color:#7c2759;}
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*BOC tooltip on next and prev buttons, 09-2020, noRiddle*/
#cboxPrevious i.fas::after, #cboxNext i.fas::after {
content: attr(data-title);
display:none;
position:absolute;
top:-50%;
min-width:130px;
padding:3px;
font-size:12px;
line-height:18px;
background:transparent;
color:#ddd;
}
#cboxPrevious i.fas::after{right:100%;}
#cboxNext i.fas::after{left:100%;}
#cboxPrevious:hover i.fas::after, #cboxNext:hover i.fas::after {display:block;}
/*EOC tooltip on next and prev buttons, 09-2020, noRiddle*/
Screenshots: [ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]
Tooltips:In
/templates/tpl_modified_responsive/javascript/extra/colorbox.js.php das ersetzen
$(".cbimages").colorbox({rel:'cbimages', scalePhotos:true, maxWidth: "90%", maxHeight: "90%", fixed: true, close: '<i class="fas fa-times"></i>', next: '<i class="fas fa-chevron-right"></i>', previous: '<i class="fas fa-chevron-left"></i>'});
mit diesem
$(".cbimages").colorbox({rel:'cbimages', scalePhotos:true, maxWidth: "90%", maxHeight: "90%", fixed: true, close: '<i class="fas fa-times"></i>', next: '<i class="fas fa-chevron-right" data-title="<?php echo NR_USE_ARROWS_TXT; ?>"></i>', previous: '<i class="fas fa-chevron-left" data-title="<?php echo NR_USE_ARROWS_TXT; ?>"></i>'});
und in
/lang/SPRACHE/extra/ in einem PHP-File die Konstanten definieren.
Beispiel für German:
define('NR_USE_ARROWS_TXT', 'Sie können zum Bildwechsel auch die Pfeiltasten auf Ihrem Keyboard benutzen.'); Gruß,
noRiddle