Support » Plugin: Shortcodes Ultimate » Lightbox Inline Content

Viewing 3 replies - 1 through 3 (of 3 total)
  • For this purpose you can use Easy Fancybox
    Enable inline content Media > Fancybox setting
    And wrap it in a div, you can also use a Shortcodes Ultimate button to open it.

    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 </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;
    Ultimate Peter


    Update (more efficient method): used by me at]
    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

    -“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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lightbox Inline Content’ is closed to new replies.