Add rel="lightbox[metaslider_id]"

Hi,

Have you already managed to add rel=’lightbox’ to your images, and if so how did you do it?

Regards,
Tom.

Thank you for your quick answer!

I have installed add-rel-lightbox plugin, but it gets post-id.

Hi,

Thanks. It might be tricky to do without editing the source code.

Have a look at this thread: https://www.ads-software.com/support/topic/add-class-to-the-slide-url?replies=5

In your case you’d be looking to add something like :

$html = "<a href='{$slide['url']}' class='lightbox[{$this->slider->ID}]' target='{$slide['target']}'>" . $html . "</a>";

Regards
Tom.

Hi, Tom,

I have installed now Lightbox Plus Colorbox, I did the change on source code line 182, but the lightbox doen’t works in the sliders.

What class should I put on the colorbox settings to read the class that is now in the line 182 of the source code? I specify the name of the class Lightbox instead of using the default in the colorbox settings, but it doen’t works.

I give you the link to the page:
https://www.minasdesierramorena.es/guia-de-campo/ferrocarril/zafra-huelva/

Sorry for my code ignorance.

Thank yo again.

Hi,

I’m not sure what you should put in as I’m unfamiliar with that plugin.

You have probably edited the line for responsive slides rather than flex slider, try making the same change but to line 141 (ish) – the function is called ‘get_flex_slider_markup’. Check the HTML output of the slider by viewing the page source to make sure the changes are in the right place.

Regards,
Tom.

The flexslider on the top is allright. I have the problem with the four responsive sliders that are on the left side of the content of the page. Sorry, I didn’t explain that before.

What I need is just to open each of that small sliders on a different lightbox group for each one, instead of all the images of the page together in the lightbox window.

Thanks for all your help.

Thank you for your help, Tom, I have solved it with this code:

$html = "<a href='{$slide['url']}' rel='lightbox[{$this->slider->ID}]' target='{$slide['target']}'>" . $html . "</a>";

Your help has been really useful.

It is resolved.

Hi,

Quick update on this for anyone who has googled this (as I just did!)

In Meta Slider 2.3-beta I’ve added a filter to allow you to make this edit without modifying the source code. Try adding this to your functions.php file:

function metaslider_rel_attribute($slide, $slideshow_id) {
	$slide['rel'] = "lightbox[{$slideshow_id}]";
	return $slide;
}
add_filter('metaslider_image_slide_attributes', 'metaslider_rel_attribute',10, 2);

Regards,
Tom

Hello,

Thanks Tom for your update.

I have just updated the plugin to v. 2.4.2. and I have tried to use this function you wrote, but it doen’t work for me. I still see all the photos there is in the page when click for the Lightbox.

By the moment I will continue using the source code modifying, because it works fine.

Hi mmya,

I’ve just checked and the code I posted adds the “rel” attribute to the <img> tag, not the <a> tag… so that explains why it’s not working…

How have you set it up? Are you using the URL field on the slide to link to a large version of the slide image, or are you just opening the slide image itself (same size) in a lightbox?

Regards,
Tom

I am using the URL field for a large version, Tom.

Thanks for your quickly answer.

Regards,
Ana

Where do I need to put this code that you have attached? Is it updated to adding the “rel” attribute to the tag Matcha Labs?

Please ignore any previous code in this thread (I would edit it.. but I can’t), this is the code you’re looking for!

You should paste it into your themes functions.php file (if it doesn’t work, please check the single quotes were not converted to curly quotes when you pasted it into the functions.php file – it happens sometimes)

add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_lightbox', 10, 3);
function metaslider_lightbox($attributes, $slide, $slider_id) {
    $attributes['rel'] = "lightbox[{$slider_id}]";
    return $attributes;
}

Regards,
Tom.