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.
