If you want to use either Fancybox or Lightbox scripts for image galleries, you need to add the rel attribute to all full size image links. Here is how to do it:
add_filter('wp_get_attachment_link', 'add_gallery_id_rel');
function add_gallery_id_rel($link) {
global $post;
return str_replace('<a href', '<a rel="gallery-'. $post->ID .'" href', $link);
}We simply replace <a href with <a rel="gallery-n" href where n is a unique post ID. This filter is applied in /wp-includes/post-template.php.
Thank, just what I needed for a project I’m working on.
Very interesting! However I manually included a rel attribute in most of my old posts. Would there be an easy way to check for the existence of a current rel attribute in each tag with an if/else statement so that a double rel doesn’t get added? Yeah, I know, how lazy of me to ask, but I’m still finding my way around PHP…
Yes, Vince. Simply check if
rel="is present, before replacing it:Thank you very much! I’m adding this to my list of planned improvements; I’ll have to adapt it to Shadowbox but that shouldn’t be too difficult…
Would i add this in my functions.php ? or the mentionned post-template.php ?
To your theme’s
functions.php.jQuery(“div.gallery .gallery-icon a”).attr(“rel”, “prettyPhoto[gallery]“); Will Work replace jQuery with ($) if your not en-queuing jQuery
jQuery(document).ready(function(){
jQuery(“div.gallery .gallery-icon a”).attr(“rel”, “relAttributeName”);
Update: First implementation did not work for me because of initially sloppy coding: I have tons of old posts where the order of my link attributes is inconsistent. Title might come first in one, rel in the next, etc.
Excellent approach and thanks!
Only issue I see is that this adds the rel attribute to both image links and attachment links. Wouldn’t it be better if it only applied this attribute to image links?
That’s correct, Josh. I have since decided that using javascript for adding the rel attributes (before calling the lighbox-type of scripts) is a better way of doing it.
Or you could simply use the
if (!is_attachment())check before doing anything.I’m gonna paste some code here so hopefully it goes through ok. I used your PHP code with some JavaScript. Might be over kill but I get the expected result…
[code] // Initialize prettyPhoto
$(‘.gallery-icon a[href*=”.bmp”], .gallery-icon a[href*=”.gif”], .gallery-icon a[href*=”.jpeg”], .gallery-icon a[href*=”.jpg”], .gallery-icon a[href*=”.png”]’).prettyPhoto({
theme: ‘pp_default’, /* light_rounded / dark_rounded / light_square / dark_square / facebook */
deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */
social_tools: false
});[/code]
Thanks SO SO SO SO much, just spent half my Sunday trying to make something like this work.
Kaspars, thank you and to you as well, Vince!
Wow, just spent 4 hours trying to fix this. Thanks so much for sharing… worked like a charm!
Awesome, worked a treat!! Nice and easy. Thanks.
Very Nice! Exactly what I needed to get the script loaded by the theme to also work on my native gallery! Thx!
Thanx for your tip, it works perfectly!
I have a question:
My problem is to have multiples galleries on a same post – each galleries must show only their own images (from ids in the shortcode).
So, do you have any idea to assign to each galleries a different id ?
I thought about a “while” or “foreach” but honestly i dont know hot to put it in the function file!
How to create an id per gallery?
Thanx for helping!
Nat, there is no easy way of doing it via PHP, so my suggestion would be to use javascript instead — a script that loops through all galleries and appends the gallery index to rel attribute of each image within that gallery. Something like this should work:
jQuery('.gallery').each( function(g) { $('a', this).attr('rel', function(i, val) { return val + '-' + g; }); });Here is a working example of this idea.
thanx for the rapid solution do you have!
it works very well and i learn a little more about jquery with this one ^^
I’m using a Vanilla Forum, so if I’m out of place by asking this here than please disregard this message. How can I alter this bit of code that adds a rel attribute to image links to fit my forum? I would also need it to be by post ID.
Thank you much in advance.
I would suggest that you implement a javascript only solution for your Vanilla forum, like the one described in this post, Dan.
Thank you! Got it all fixed.
You rock, just what i looked for.