Button launching a lightbox

  • BrianTX

    (@briantx)


    12 years, 3 months ago

    I’m using your button shortcode in a slide layer from Slider Pro. What I would like to do is have the button launch the Slider Pro lightbox to play a video.

    The author of Slider Pro gave me some code to try but I’m not sure how to make it work using the button shortcode.

    Watch a video

    The key in the code seems to be the rel=”slider-lightbox”. I’ve tried using different combinations of the code in the maxbuttons url field to no avail. I’m also using external CSS for the button in my style sheet for some custom changes.

    Will the shortcode accept the argument of rel=”slider-lightbox”?

    If not, should I ditch the shortcode and implement the button via a html button class? If so, what would that sample code look like?

    I’m on a local host currently so I can’t provide a link.

    Thanks~

    https://ww.wp.xz.cn/plugins/maxbuttons/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter BrianTX

    (@briantx)

    12 years, 3 months ago

    Hello,

    After looking at this problem a bit more, the issue seems to be your plugin is using a-tags around the button to apply css (even when a link has not been specified), and in my specific use case, an a-tag within an a-tag simply will not work.

    To get my button to work peacefully with my theme shortcode, I had to first remove the a-tag from the button css (e.g., a.maxbutton-1 to maxbutton-1) and then insert the button via html.

    I believe the button shortcode would have worked out of the box had your plugin used p-tags or a span and only embed the button in an a-tag when a url/(href) has been specified in the button setup.

    I’m sure there will be others that would like to use your button shortcode, in conjunction with their theme shortcode, to launch lightboxes, videos, images etc.

    I hope you will seriously consider making some codes change to make this plugin even more flexible!

    Thanks!

    Plugin Author johnbhartley

    (@johnbhartley)

    12 years, 2 months ago

    Brian, thanks for the note. While I understand your issue, it is unlikely that we will be making that change in the future, but there is another way to get the desired effect.

    After creating your styled button, head to the bottom of the page and click “View CSS” from there you can reconstruct the button in whatever elements will work best inside of the other shortcode. Just use the same structure and adjust the CSS accordingly. Hope that helps!

    CornleaGirl

    (@cornleagirl)

    12 years, 1 month ago

    I’m trying to achieve similar results as above, I am using Form Lightbox and MaxButtons. I cannot figure out how to get the MaxButton to link to the lightbox. I’m assuming i need to change the part behind “behavior” to the code for the lightbox instead of the URL that is currently in there, but I don’t know exactly how or if that’s what I need to do. I’m a beginner!

    Here is the form light box info-

    [formlightbox title=”I have a Gehl Grinder” image=”wpid-auction_503_3152718.jpg”]
    [contact-form-7 id=”25249″ title=”I have a Gehl Grinder”]
    [/formlightbox]

    here is the button info-

    a.maxbutton-1 { text-decoration: none; color: #ffffff; font-family: Arial; font-size: 13px; font-style: normal; font-weight: bold; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #3f3f3f; background: linear-gradient(rgba(63, 63, 63, 1) 45%, rgba(63, 63, 63, 1)); background: -moz-linear-gradient(rgba(63, 63, 63, 1) 45%, rgba(63, 63, 63, 1)); background: -o-linear-gradient(rgba(63, 63, 63, 1) 45%, rgba(63, 63, 63, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(63, 63, 63, 1)), color-stop(1, rgba(63, 63, 63, 1))); border-style: solid; border-width: 1px; border-color: #3f3f3f; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-shadow: -1px -1px 0px #3f3f3f; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(63, 63, 63, 1) 45%, rgba(63, 63, 63, 1)); position: relative; behavior: url(“http://www.wegenerimplement.com/wp/wp-content/plugins/maxbuttons/pie/PIE.htc”); } a.maxbutton-1:visited { text-decoration: none; color: #ffffff; } a.maxbutton-1:hover { text-decoration: none; color: #ffffff; background-color: #747475; background: linear-gradient(rgba(116, 116, 117, 1) 45%, rgba(116, 116, 117, 1)); background: -moz-linear-gradient(rgba(116, 116, 117, 1) 45%, rgba(116, 116, 117, 1)); background: -o-linear-gradient(rgba(116, 116, 117, 1) 45%, rgba(116, 116, 117, 1)); background: -webkit-gradient(linear, left top, left bottom, color-stop(.45, rgba(116, 116, 117, 1)), color-stop(1, rgba(116, 116, 117, 1))); border-color: #747475; text-shadow: -1px -1px 0px #747475; box-shadow: 0px 0px 0px #333333; -pie-background: linear-gradient(rgba(116, 116, 117, 1) 45%, rgba(116, 116, 117, 1)); position: relative; behavior: url(“http://www.wegenerimplement.com/wp/wp-content/plugins/maxbuttons/pie/PIE.htc”); }

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Button launching a lightbox’ is closed to new replies.