I wanted my client to be able to add pictures to a gallery using the build in WordPress gallery, but was hoping to customize the display of the gallery thumbs a bit. I was hoping to get it to display as the following:
use the Lightbox 2 script
able to override the CSS that is being written to the page
Since the default CSS that the gallery generates is written in the page, overriding the styles was kinda a pain to do in the site’s stylesheet I was using. However I did find that I could edit the default CSS that is being written to the page by the gallery by editing the following file:
/wp-includes/media.php
Locate the following code and edit as necessary:
$output = apply_filters('gallery_style', "
<style type='text/css'>
#{$selector} {
}
#{$selector} .gallery-item {
float: left;
text-align: center;
}
#{$selector} img {
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='$selector' class='gallery galleryid-{$id}'>"); |
$output = apply_filters('gallery_style', "
<style type='text/css'>
#{$selector} {
}
#{$selector} .gallery-item {
float: left;
text-align: center;
}
#{$selector} img {
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='$selector' class='gallery galleryid-{$id}'>");
You can see I’ve removed some styles in this case.
Further edits can be made to the gallery from this file as well. I chose to use a little bit of javascript to attach the rel attribute to my anchors instead of editing the php file. Personally, I’d rather do that so in case a future version of WordPress altered the media.php file it’d be one less thing for me to worry about.
Very basic javascript to add the rel attribute that Lightbox 2 requires to the image anchors:
var galleryDivs = YAHOO.util.Dom.getElementsByClassName('gallery', 'div', 'bd');
for (var i = 0; i < galleryDivs.length; i++) {
var imageAnchor = galleryDivs[i].getElementsByTagName('a');
for (j = 0; j < imageAnchor.length; j++) {
imageAnchor[j].setAttribute('rel', 'lightbox[gallery]');
}
} |
var galleryDivs = YAHOO.util.Dom.getElementsByClassName('gallery', 'div', 'bd');
for (var i = 0; i < galleryDivs.length; i++) {
var imageAnchor = galleryDivs[i].getElementsByTagName('a');
for (j = 0; j < imageAnchor.length; j++) {
imageAnchor[j].setAttribute('rel', 'lightbox[gallery]');
}
}
I use the YUI Dom collection to help me gather nodes.
Then it’s just a matter of calling the relevant dependancy scripts and styles into your page and it should work for you.
Upstairs at work we’ve started a little unofficial book club. Apparently the first book that are super cool club (though I may’ve been kicked out already) is reading is Dead Until Dark by Charlaine Harris. This book is the basis of the True Blood series on HBO.
Just finished reading the 
When I saw the first season of Transformers on DVD, I immediately picked it up and bought it, no hesitation. When the Transformers cartoons first aired in 1984, my brothers and all my friends at the time were instantly hooked. The rist now was would I still enjoy watching them after all these years, or could this possible ruin the fine memory I have of what was an amazing show.