Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 1 down vote favorite
2

i tried this shortcode:

[gallery class="fancybox" link="file" columns="5"]

But the class="fancybox" isn't been added to the a href tag of each image.

How can i add class="fancybox" to each a href tag??

ps: where is the source code of gallery?

share|improve this question
ok i am testing with add_filter('wp_get_attachment_link' but how do i make sure it only applies to the shortcode Gallery? – alex Mar 9 '12 at 11:03
Ok i added this but i like to make sure it only applies to the gallery shortcode, how do i do this? function my_get_attachment_link($html) { $postid = get_the_ID(); $html = str_replace('<a', '<a class="fancybox"', $html); return $html; } add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1); – alex Mar 9 '12 at 11:17
3  
Why not change the javascript selector that fancybox works on? – sanchothefat Mar 9 '12 at 12:08
@sanchothefat is on the right track. You're looking at the problem wrong. You're increasing the overhead of processing the gallery for no good reason. – Dan Jan 31 at 16:25

2 Answers

up vote 6 down vote accepted

You can use javascript/jquery to solve this.

When you insert a gallery in a wordpress posts, the whole gallery is wrapped by a div with id like "gallery-1" but also a class that's always "gallery". Also, every item is surrounded by two other "dl" and "dt", with class "gallery-item" and "gallery-icon" respectively.

So, you can just use jquery to match every link inside those classes, and add whatever lightbox script you want.

If it's fancybox, i think something like this should work:

jQuery(".gallery-icon a").fancybox();

You can be more specific, matching css classes .gallery .gallery-item .gallery-icon in that order and then the a (for the link).

Or use a simple plugin that use the same approach from Viper007Bond, that does clean and nicely, but using colorbox instead.

share|improve this answer
3  
jQuery runs in no-conflict mode in WordPress. I changed your code accordingly. Oh, and welcome to WordPress Stack Exchange! – toscho♦ Mar 9 '12 at 18:40
up vote 3 down vote 
jQuery(".gallery-icon a").fancybox().attr('rel', 'wp-gallery-fancybox');

Gives all links the same rel attribute, this way the user will be able to slide between the images.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.