How to use Lightbox with Inline type

Hi @kaito1412 did you find a way to resolve this or fix this please? If so can you please post the solution as I am looking for this as well. Many thanks!!

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

Hi there,
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.

Indeed, that is a better solution.

The .mfp-hide class works great to hide the box and then display it. So, no need to create additional css for that part.

Cheers.