Add rel="lightbox[metaslider_id]"

Thank you for your quick response!
Do I need to do anything to the html shortcode after I put this in my functions?

Also this works with responsive slider right?

Hey I put in the function and I see no difference. Am I missing something?
I really like this plugin and am hoping to continually use this because its awesome! But would really like the lightbox function to work.

I used the code:

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;
}

I get the light box to open, but it isn’t playing the youtube video I pasted for the URL. Is there additional steps I need to do?

Im trying to get the youtube video to play inside the lightbox instead of directing me to youtube. Right now when I click on the image, the lightbox opens but I just see a spinning circle.

ricamolet,

The code I pasted will only add “rel=lightbox[{slider-id}]” to the slide URL attributes – that’s all it does (as requested in the first post). I haven’t tested anything else as the actual lightbox opening functionality is not part of Meta Slider.

By the looks of it you’ll also need the slimbox plugin installed.
You’ll then need to paste the URL to the full image in the URL field on the slide.

Fatalxerror, the same goes really – the code will only add the ‘rel’ attribute, you’ll need to find a plugin that allows you to open YouTube videos in the lightbox.

Regards,
Tom.

Awesome!! That plugin works!
Thank you!

Is there a way to tell it to separate into the different galleries that I’ve created on the one page?
I’ve got 12 different galleries and don’t want it all to be in one gallery when it becomes a lightbox.

@matcha

Thanks for the quick reply. Can you recommend a plugin for this? Or if I upgrade to the pro version that supports youtube slides. Do those open in a lightbox?

Thanks again.

ricamolet,

When you say ‘gallery’ do you mean slideshow? Each slideshow should open in it’s own ‘group’, but it depends on how slimbox is implemented.

@fatalxerror, I don’t know of any plugins sorry – I’m not that familiar with lightbox plugins. Videos play inline with Meta Slider Pro. Proper lightbox integration will be next on the list for Meta Slider Pro.

Regards,
Tom.

Yes slideshow. Ooh I figured it out. It works with flex slider. I had most of them on responsive. So it has it separated. Thanks!

Thanks for the reply. I look forward to seeing that lightbox feature. Im sure that will come in handy for alot of people.

Possible work around?

I was wondering if there was a way I can use a shortcode in the “url field” instead of a url. Without the plugin automatically formatting the shortcode.

Example of the shortcode im trying to use is:

[video_lightbox_youtube video_id=”G7z74BvLWUg&rel=0″ width=”640″ height=”480″ anchor=”metaslider_id”]

Right now the plugin links me to this when I paste the shortcode in the url:

https://mysite.com/pagehere/[video_lightbox_youtube video_id=

Hi,

I thought I’d share some information relevant to this topic with the hope that it would help someone out. I am using the wp-video-lightbox plugin with metaslider (flexslider).

Everything discussed so far has been to add the rel attribute to all slides. I needed only a specific slide to contain the rel attribute. To remedy this, I added the following to functions.php:

Add rel attribute to the slide that has a particular image

add_filter ('metaslider_image_slide_attributes', 'metaslider_lightbox', 10, 3);
function metaslider_lightbox($slide, $slider_id, $settings) {
	if ($slide['src'] == "link/to/slide/image.png")
	{
		$slide['rel'] = "wp-video-lightbox";
	}
	return $slide;
}

Copy the rel attribute from slide image to slide anchor

add_filter('metaslider_flex_slider_anchor_attributes', 'link_slide_ref_and_a_ref', 10, 3);
function link_slide_ref_and_a_ref($anchor_attributes, $slide, $slider_id) {
	$anchor_attributes['rel'] = $slide['rel'];
	return $anchor_attributes;
}

Structure-wise, in Flexslider (and possibly the others), the slide image is nested under the slide link/anchor. As shown, I selected the slide image with the correct image url and added the rel attribute. Of course, this doesn’t do anything with the wp-lightbox-plugin, because the plugin requires the link/anchor to have this attribute for the lightbox effect to work. Therefore, in the second code block, I copied the rel attribute from the slide to the anchor.

I’m not too familiar with PHP so if there is a better way, feel free to share here. Thanks!

Hi Hart,

Nice work ??

I think you could also do something like this:

add_filter('metaslider_flex_slider_anchor_attributes', 'link_slide_ref_and_a_ref', 10, 3);
function link_slide_ref_and_a_ref($anchor_attributes, $slide, $slider_id) {
    if ($slide['href'] = 'lightbox') {
        $anchor_attributes['rel'] = 'wp-video-lightbox';
        $anchor_attributes['href'] = '';
        return $anchor_attributes;
    }
}

Then you can just set the URL on the slide to ‘lightbox’ ?? (Not tested, just an idea!)

Whoa, thank you so much for the code!!

I tried it out but all of the slides ended up with the same url ?? I tweaked a bit and settled on this:

add_filter('metaslider_flex_slider_anchor_attributes', 'link_slide_ref_and_a_ref', 10, 3);
function link_slide_ref_and_a_ref($anchor_attributes, $slide, $slider_id) {
    if ($slide['src'] == 'some/link/to/slide/image.png') {
        $anchor_attributes['rel'] = 'wp-video-lightbox';
        $anchor_attributes['href'] = 'insert/some/link/here';
    }
	return $anchor_attributes;
}

Only slight differences are:

• Changed “=” to “==” in if statement. I think this was why all the slides were being set to the same URL.
• Moved “return $anchor_attributes;” outside of the if statement. Otherwise, the slides other than the one specified in the if statement will have no href.
• Changed “$slide[‘href’]” to “$slide[‘src’]”. For some reason, the href attribute for $slide wasn’t being picked up so nothing was being changed.

Seriously, I can’t thank you enough! This solution works much more elegantly and simply than the one I had! ??

Whoops, I can’t edit my post anymore so I’ll write a followup. I found that “$slide[‘url’]” is the correct way to get at the slide link, so I used that in place of “$slide[‘src’]”! Here’s the final code:

add_filter('metaslider_flex_slider_anchor_attributes', 'link_slide_ref_and_a_ref', 10, 3);
function link_slide_ref_and_a_ref($anchor_attributes, $slide, $slider_id) {
    if ($slide['url'] == 'insert/some/link/here') {
        $anchor_attributes['rel'] = 'wp-video-lightbox';
        $anchor_attributes['href'] = 'insert/some/link/here';
    }
	return $anchor_attributes;
}

Thanks again! ??