Add field to slides to launch modal?

Hi Brad,

You’re in luck… this is possible in Meta Slider 2.5.

Try adding this to your themes functions.php file:

add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {

        // to get the slide ID, use:
        // $slide_id = $slide['id'];

        // add data-reveal-id attribute to <a>, with a value of 'myModal'
	$attributes['data-reveal-id'] = 'myModal';
	return $attributes;
}

You might want to modify that PHP to check the $slider_id so that it only applies to your carousel slideshow. Just make sure the function always returns $attributes.

Regards,
Tom

Awesome support Tom!

I’m sorry, but I need just a bit more explanation. Adding this to the functions I’m hard coding the data-reveal-id correct? So if I have 3-5 slides in a carousel, how should I approach that? And this doesn’t add a field to the slide on WP admin, it would have to be updated in the functions file?

Great support and great plugin!

Hi Brad,

Yes, it’s hard coded so you’d have the same attribute for each slide in the carousel. What values do you need to use for the data-reveal-id attribute and how are you defining them? Can they be linked to the slide ID somehow?

It would be possible, for example, to set the attribute value for each slide to ‘myModal-#SLIDE_ID#’

Regards,
Tom.

Or… you could hijack the URL field for the slide, and use it to define the attribute value instead, which would be something like this:

add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {
        // add data-reveal-id attribute to <a>. Use the slide URL as the attribute val
	$attributes['data-reveal-id'] = $attributes['href']; // set the attribute value to the URL value
        $attributes['href'] = '#'; // kill the URL
	return $attributes;
}

To make the modals work with Foundation, you put a div at the end of the page with an id eg “myModal”. So ya, the #SLIDE_ID# would work great I think. I’d just have to make sure the id’s match up.

I’m having a hard time with the code above though. Here’s how it is my functions:

add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {

        // to get the slide ID, use:
        $slide_id = $slide['slide-2112'];

        // add data-reveal-id attribute to <a>, with a value of 'myModal'
	$attributes['data-reveal-id'] = 'myModal';
	return $attributes;
}

Here’s some of the page HTML:

<div id="metaslider_container_2106">
<div id="metaslider_2106" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 600%; margin-left: 0px;">
<li style="display: block; width: 300px; float: left;">
<a target="_self" href="#">
<img class="slider-2106 slide-2112" width="300" src="https://localhost/wp-content/uploads/2013/11/video_happier-274x0.jpg" draggable="false">

It’s not adding the attribute?

Are you using Meta Slider 2.5-beta1? (the filter was only added in 2.5-beta – yesterday)

PS the code should look a little more like this:

add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {
        // add data-reveal-id attribute to <a>, with a value of 'myModal'
	$attributes['data-reveal-id'] = 'myModal-' . $slide['id'];
	return $attributes;
}

I was typing my response when you updated the functions code, thank you!

So I put that code into functions, and it isn’t affecting the HTML

<div id="metaslider_container_2106">
<div id="metaslider_2106" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 600%; margin-left: 0px;">
<li style="display: block; width: 300px; float: left;">
<a target="_self" href="#">
<img class="slider-2106 slide-2112" width="300" src="https://localhost/wp-content/uploads/2013/11/video_happier-274x0.jpg" draggable="false">

I just updated to the latest version a few moments ago. Sorry for being difficult. Thanks so much for the help!

Ah, I see now.. sorry, my mistake. Shoddy copy and paste bug from me, Try this:

add_filter('metaslider_nivo_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {
        // add data-reveal-id attribute to <a>, with a value of 'myModal'
	$attributes['data-reveal-id'] = 'myModal-' . $slide['id'];
	return $attributes;
}

(Flex slider is currently using the nivo slider filter, I’ve added both filters to the code above so once I’ve fixed it (in the next version) your filter will continue working)

Regards
Tom.

Working seamlessly! Thank you for your help!

Above you mentioned applying it to just one slider, so it doesn’t interfere with any others. I see the $slider_id, but how do I use that to say only on this one slider? I might try your suggestion of hijacking the URL field.

Cool ??

This is how you’d check the ID:

add_filter('metaslider_nivo_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_rel_attribute', 10, 3);
function metaslider_rel_attribute($attributes, $slide, $slider_id) {
        // add data-reveal-id attribute to <a>, with a value of 'myModal'
        if ($slider_id == 123) { // change 123 to your slideshow ID
	    $attributes['data-reveal-id'] = 'myModal-' . $slide['id'];
        }
	return $attributes;
}