[Plugin: Lightbox Plus]Inline

anyone?

Well really there is no documentation. I haven’t every really written any to encompass the newer features. The forthcoming release of 2.5 should have more robust examples and documentation. Which examples aren’t the same as the used code so I can address those?

Using Inline Lightboxes

Inline lightboxes are used to display content that exists on the current page. It can be used to display a form, video or any other content that is contained on the page. In order to display inline content using Lightbox Plus and Colorbox you must at a minimum has the following items set: Link Class, Content ID, Width, Height, and Opacity.

Example

The following example shows how to setup content for display in a lightbox. You will need to create a link to the content that contains a class that has the same value as the Link Class for the inline lightbox you are using.

<a class="lbp-inline-link-1" href="#">Inline HTML Content</a>

You will also need to set up a div element to contain you content. The div element that contains the content must contains have and id with a value of the Content ID for the inline light box you are using. Finally if you want the content to be hidden until the visitor clicks the link, wrap the content div with another div and set the value for style to display:none or assign a class that has display:none for a property

<div style="display:none">
    <div id="lbp-inline-href-1" style="padding: 10px;background: #fff">
        Inline Content Goes Here
    </div>
</div>

Well that’s incorrect cause you also need this code:

<script type="text/javascript">
jQuery(document).ready(function($){
  $("a[rel*=lightbox]").colorbox({initialHeight:"400", maxWidth:"80%",maxHeight:"80%",opacity:0.8});
  $(".lbpModal").colorbox({innerWidth:"50%",innerHeight:"50%",maxWidth:"80%",maxHeight:"80%",opacity:0.8, iframe:true});
  $(".lbp-inline-link-1").colorbox({width:"50%", height:"50%", inline:true, href:"#lbp-inline-href-1"});
  $(".lbp-inline-link-2").colorbox({width:"50%", height:"50%", inline:true, href:"#lbp-inline-href-2"});
  $(".lbp-inline-link-3").colorbox({width:"50%", height:"50%", inline:true, href:"#lbp-inline-href-3"});
});
</script>