WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Lightbox Plus]Inline (4 posts)

  1. silver163
    Member
    Posted 2 years ago #

    I read their documentation about creating inline lightboxes but I really still having a hard time understanding how the get it working:

    http://www.23systems.net/plugins/lightbox-plus/demos/

    I find their documentation atrocious, their examples aren't the same as what they post as the code. Has anyone posted the inline? I got a price table I would like to put in there. Please help.

  2. silver163
    Member
    Posted 2 years ago #

    anyone?

  3. Dan Zappone
    Member
    Posted 2 years ago #

    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>
  4. boobymonster
    Member
    Posted 2 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.