WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
Lightbox Inline Content (3 posts)

  1. nucleardev
    Member
    Posted 8 months ago #

    Hi,

    I want to use my contact form shortcode on a lightbox.
    So when i click on a button or a url or an image the lightbox pups up and shows my contact form. i use best websoft contact form and my shortcode for it is [bestwebsoft_contact_form lang=en].
    when i use the page text editor and open shortcode "lightbox" i don't know what to put in "Content source" field. I cant leave it blank so what should i put inside to use my form?

    thanks. best regards

    http://wordpress.org/plugins/shortcodes-ultimate/

  2. AJD
    Member
    Posted 5 months ago #

    Unless I'm missing something key, it is not "intuitive" to get lightboxes to work.

    Here's an example of my solution:

    Put this in your content:

    [lightbox type="inline" src=".gift-box"] <h2>Click Here For Your Lightbox</h2>[/lightbox]
    
    <div class="gift-box"> This is what will pop up in the lightbox [bestwebsoft_contact_form lang=en]</div>

    add this to your theme .css file:

    .gift-box {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 2px solid #CCCCCC;
      border-radius: 5px;
      height: 50%;
      margin: 0 auto;
      padding: 25px;
      position: relative;
      width: 50%;
    
    }
    
    .gift-box {
    display: none;
    }
    
    .mfp-content .gift-box {
      display: block;
    
    }
    .su-lightbox > h2:hover {
      cursor: pointer;
      opacity: .6;
    }
  3. Ultimate Peter
    Member
    Posted 3 months ago #

    Update (more efficient method): used by me at http://qbservices.net
    Yeah, this lightbox deal was bugging me. I need to place several inline html chunks in lightboxes on the same page. No documentation on this really. Thanks AJD for your stepping stone, however your solution is a little inefficient. This would mean you have to add CSS to your theme file for every new div you want to turn into a lightbox. That is messy and scary, if you were ever to mess up your CSS file.

    I did some tinkering and came up with a way to only edit the CSS of the plugin once.

    Here's what you do:
    1. Navigate to /wp-content/plugins/shortcodes-ultimate/assets/css/magnific-popup.css
    2. Go to line 53, which should look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 100%;
      cursor: auto; }

    and change it to look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 50%;
      background: #fff;
      padding: 25px;
      border-radius: 25px;
      cursor: auto; }

    3. That's it, now a special note when you are creating the code for the post with inline. It will look like this:

    [su_lightbox type="inline" src=".church"]here is the button[/su_lightbox]
    
    <div class="church mfp-hide">
    this is the inline content
    blah
    blah
    </div>

    Note:
    -"church" is the made up identifier that the lightbox calls. With this method, you just make a unique identifier for each inline lightbox on the page.
    -Each lightbox div will also use class "mfp-hide"
    -mfp-hide is a class that I found already resident in magnific-popup.css
    I played around and found that when you use it, it force-hides the div on the page, but allows it to change to "display: block;" when it opens the lightbox. I tested it and it is great now! I can put the six seperate page popups in!

    YAY! Do this change and use the two classes, and it will work every time without further CSS creations...

    Of course, buttons work best, instead of regular text, because then it is obvious you must press it.

    Keep in mind, if you update the plugin, it will probably overwrite this.
    Suggestion: keep the css code somewhere saved to redo the change, or ask the author to incorporate it.

Reply

You must log in to post.

About this Plugin

About this Topic