WordPress.org

Ready to get started?Download WordPress

Forums

Meta Slider
[resolved] Add field to slides to launch modal? (12 posts)

  1. brad_magnus
    Member
    Posted 5 months ago #

    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/

  2. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

    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

  3. brad_magnus
    Member
    Posted 5 months ago #

    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!

  4. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

    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.

  5. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

    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;
    }
  6. brad_magnus
    Member
    Posted 5 months ago #

    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?

  7. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

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

  8. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

    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;
    }
  9. brad_magnus
    Member
    Posted 5 months ago #

    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!

  10. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

    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.

  11. brad_magnus
    Member
    Posted 5 months ago #

    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.

  12. Matcha Labs
    Member
    Plugin Author

    Posted 5 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic