hm ... ja und nein.
Habe eine Kopie von j_colorbox.html5 in den /templates Ordner kopiert. Dort geändert. In /files/lib/jquery/colorbox/ das Original entpackt abgelegt. Das kopierte template habe ich geändert zu
HTML-Code:
<?php
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'files/lib/jquery/colorbox/1.3.20/example1/colorbox.css||static';
?>
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$('a[data-lightbox]').map(function() {
$(this).colorbox({
// Put custom options here
loop:false,
rel:$(this).attr('data-lightbox')
});
});
});
})(jQuery);
</script>
Ich erhalte immer noch Fehler, da der Pfad nicht stimmt (Firebugausgabe)
Code:
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/controls.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/border.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/overlay.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/loading_background.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/loading.gif"
Im Original CSS sieht es beispielhaft so aus:
Code:
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
Sieht für mich so aus, als ob /assets/css/ die Basis für alle CSS ist - ich hatte erwartet, dass die Basisurl der Ordner des CSS ist. Eigentlich wollte ich /assets/ nicht mit neuen Dateien füllen. Das finde ich nicht sehr updatesicher. Das CSS zu ändern (mit ../../ arbeiten) ist auch eher lästig, wenn ich fertige js/CSS Scripte aus dem Netz hole - wie z.B. colorbox. Wäre schön, wenn man sowas einfachst einbinden könnte.
Ich bin mir nicht sicher, ob meine Gesamtstrategie richtig ist? Sollte ich besser ein privates Modul entwicklen und dort alle JS/CSS ablegen, anstatt nur in /files und /templates zu arbeiten?!? Muss/Sollte man /assets mit neuen Daten füllen??
Lesezeichen