WordPress.org

Support

Support » Plugins and Hacks » Meta Slider » [Resolved] Add field to slides to launch modal?

[Resolved] Add field to slides to launch modal?

  • brad_magnus

    @brad_magnus

    This is a kinda involved question, and if you could help me figure it out, that’d be awesome! I’m using a theme built on Zurb’s Foundation 4. I’d love to have a carousel that launches a modal. See the Foundation docs: http://foundation.zurb.com/docs/components/reveal.html

    In order to get the modal you need the HTML on the page, and the link to look like this <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>. I’m not a super advanced developer, but couldn’t I make a minor modification to the plugin and have an extra field for the slides that appends data-reveal-id?

    I’m in a bit of a pickle over promising to a client, help on this would mean a ton to me! Thanks.

    http://wordpress.org/plugins/ml-slider/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Matcha Labs

    @matchalabs

    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

    brad_magnus

    @brad_magnus

    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!

    Plugin Author Matcha Labs

    @matchalabs

    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.

    Plugin Author Matcha Labs

    @matchalabs

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

    @brad_magnus

    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="http://localhost/wp-content/uploads/2013/11/video_happier-274x0.jpg" draggable="false">

    It’s not adding the attribute?

    Plugin Author Matcha Labs

    @matchalabs

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

    Plugin Author Matcha Labs

    @matchalabs

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

    @brad_magnus

    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="http://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!

    Plugin Author Matcha Labs

    @matchalabs

    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.

    brad_magnus

    @brad_magnus

    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.

    Plugin Author Matcha Labs

    @matchalabs

    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;
    }
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Add field to slides to launch modal?’ is closed to new replies.
Skip to toolbar