Updated 2011-02-28; minor bug fix. Thanks, brian!
Every time I create or use a jQuery plugin, I realize that the assigning of behaviors to elements on the page is a design decision, not a programming one, and one that should be made by the guy in charge of the CSS, not the guy in charge of the javascript. Even when I'm the same guy, I want to wear each hat separately. But these presentational enhancements are written in javascript and applied in javascript. So my "presentational" code is in two different files:
- style.css
.gallery a { border: 1px solid green }- style.js
$('.gallery a').lightbox({overlayBgColor: '#ddd'});
I could put the presentational javascript in the HTML with $.metadata but while that's fine for quick-and-dirty pages, it's evil in production since it completely violates the separation of data/structure/presentation/behavior.
As I and others have noted before, the application of these plugins belongs in the stylesheet, and I finally got it to work:
- style.css
.gallery a { border: 1px solid green; -jquery-lightbox: {overlayBgColor: '#ddd'}; }
and a single call to start it off: $(document).parsecss($.parsecss.jquery) .
