How to Use Lightbox with src=inline

Here is the link that will help anyone who needs to be able to add inline content into the light box:

https://www.23systems.net/wordpress-plugins/lightbox-plus-for-wordpress/demos/

I found it by installing another lightbox plugin.

@vladimir Anokhin is you could add this into the advanced examples this would be helpful for others ??

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

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

@ultimate Peter :

If you modify the code in the CSS you run into problems:

1. Your changes are lost when the plugin updates.
2. The “insert shortcodes” pop-up on the post/page editor will conform to the CSS you change.

Shortcodes Ultimate has a place in the settings for custom CSS. Both problems are resolved by pasting your CSS there instead. It even accepts advanced CSS3, media queries, and the like. While your solution works, it’s better in the end to place it in the custom CSS area of the plugin so you don’t lose changes, so the changes are only on the website front end, and its just easier to edit.

Cheers!

Remy.

(I, for example, used your hack in the SU setting page and you can see the results on my website.)

Hey, that sounds great!

So you mean, just PUT IT IN HERE?

Do you just put it in the black text area and save?
Should I be putting it in one of the specific CSS’s at the top?

You got it, just put it in that black text area and hit save. It should save it across plugin updates, too.