WordPress Plugin LiteBox

A Simple plugin that enables popup for your video/image/iframe/inline content.

This is a modal window. You can do the following things with it:

1 Read: modal windows will probably tell you something important so don’t forget to read what they say.

2 Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.

3 Read: modal windows will probably tell you something important so don’t forget to read what they say.

4 Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Hello there

Description
Litebox is a wordpress plugin for modal popup. Its uses a light weight jQuery plugin litebox.This plugin will enable you to easily add Video,Audio,Image,Iframe,and Inline content to your WordPress site.Using it is as simple as adding the shortcodes to your post and page or if preferred adding the shortcodes to the required theme template files.

Plugin Features
* Support for Video and Audio content.
* Support for image,iframe,inline popup.
* Lots of admin options to play with
* Lots of shortcodes parameter to customize each popup modal.
* Thumbnail Support.
* Gallery Support.
* Support for javascript functions that can be executed at various times during
the popup event.

Installation
1. Download the .zip file of the plugin and extract the content.
2. Upload the complete `litebox` folder to the `/wp-content/plugins/` directory.
3. Activate the plugin through the ‘Plugins’ menu in WordPress.
4. Go to to litebox settings page and select the default options which should be used.
5. That’s it! You’re done. Now you can place your shortcodes to your post/pages or your theme files.

Video Example
Add the shortcodes to your post or pages. The href attribute should be the url of your video or audio content,the thumbnail size and gutter can be set in the admin panel.The top,right,bottom,left attribute is used to position the litebox for this particular link,if these attribute are not set, the litebox position set in the admin panel is used. Also the youtube video used the top,right,bottom,left and iconhover attribute.

[litebox href="http://www.youtube.com/watch?v=EmSOTxW3lNI"   top="30" left="30" right="30" bottom="30" iconhover="true"]

[litebox href="http://vimeo.com/45427826"] 

[litebox href="http://www.dailymotion.com/video/x15wmv4_alexander-rusinov-extreme-workout_sport" ]

[litebox href="http://www.hulu.com/watch/249837"  ]

Audio Example

[litebox href="http://www.rdio.com/artist/The_Black_Keys/album/Brothers/" iconhover="hover"]

[litebox href="http://www.mixcloud.com/TechnoLiveSets/jon_rundell-live-electrobeach-festival-benidorm-16-08-2013/"]

[litebox href="http://soundcloud.com/forss/flickermood" ]

[litebox href="http://chirb.it/qAre2K"]

Iframe Example

Iframe

[litebox href="http://cnn.com" anch="Iframe"  top="20" left="20" right="20" bottom="20"]

Inline Example
For the inline content div up the content and set the display to none,the incolor attribute is used to set the background color of the inline container only, the first inline example below has the incolor attribute set, while incolor attribute for the second example is not set, so it uses the default value set in the admin page for its color,the default header text is “Modal” use the “inhead” attribute to change it,see example below.

Inline1

Inline2

[litebox href="#inline" anch="Inline1" class="anch_link" top="10" right="30" bottom="10" left="30" group="inline" incolor="#1e8cbe"]

[litebox href="#inline2" anch="Inline2" class="anch_link" top="10" right="30" bottom="10" left="30" group="inline" inhead="Chapter 1"]
<div style="display:none;" >
 <div id="inline">
  <p> Hello there </p>
  <p> Hello there </p>
  <p> Hello there </p>
  <p> Hello there </p>
  <p> Hello there </p>
  <p> Hello there </p>
  <p> Hello there </p>
 </div>
</div>

Single Image Example
The first image uses the iconhover attribute.

[litebox href="../wp-content/uploads/2014/07/HD-1.jpg"  iconhover="true"]
[litebox href="../wp-content/uploads/2014/07/HD-2.jpg" ]
[litebox href="../wp-content/uploads/2014/07/HD-3.jpg" ]
[litebox href="../wp-content/uploads/2014/07/HD-4.jpg" ]

Group Image Example
For group images use the attribute group, the value can be any string, but make sure they values are the same for the entire images. Notice the grayeffect from the 1st – 5th image. Also notice the top,right,bottom,left and color attribute used from the 6th – 10th image. Click the first thumbnail,use the nav button to navigate through and see the effects.

[litebox href="../wp-content/uploads/2014/07/FALL-1.jpg"  group="gh" grayeffect="true"]
.
.
.
.
.
[litebox href="../wp-content/uploads/2014/07/FALL-6.jpg"  group="gh"  top="10" right="30" bottom="50" left="30" color="#944F0C"]
[litebox href="../wp-content/uploads/2014/07/FALL-7.jpg"  group="gh" top="30" right="10" bottom="30" left="50" color="#FFEF5E"]
[litebox href="../wp-content/uploads/2014/07/FALL-8.jpg"  group="gh" top="50" right="30" bottom="10" left="30" color="#EF4D0F"]
[litebox href="../wp-content/uploads/2014/07/FALL-9.jpg"  group="gh" top="30" right="50" bottom="30" left="10" color="#F7A503" ]
[litebox href="../wp-content/uploads/2014/07/FALL-10.jpg"  group="gh" top="10" right="30" bottom="50" left="30" color="#BF582B"]

Group Image Example With Indicators
The top,right left and down attribute will not work on images using indicators,litebox will use the defaults to position the modal. Also if you are using the opacity and color attribute on images with indicators make sure the are the same for all the group images.

[litebox href="../wp-content/uploads/2014/07/IN-1.jpg"  group="ghh" indicators="true"]
[litebox href="../wp-content/uploads/2014/07/IN-2.jpg"  group="ghh" indicators="true"]
[litebox href="../wp-content/uploads/2014/07/IN-3.jpg"  group="ghh" indicators="true"]
[litebox href="../wp-content/uploads/2014/07/IN-4.jpg"  group="ghh" indicators="true"]
[litebox href="../wp-content/uploads/2014/07/IN-5.jpg"  group="ghh" indicators="true"]

Shortcode Theme file Example
Add the function with the shortcodes to your theme template files.

<?php
 echo do_shortcode(' [litebox href="http://vimeo.com/45427826" ]'); 
?>

For any bug report,please use the comment form below. Also if you like to see any additional feature included to this plugin, free free to let us know.Thanks.

17 thoughts on “WordPress Plugin LiteBox

  1. can you please explain how to use inline with an example or complete code i have to paste in my page.. I am not been able to use it.
    Thank you

    • First of all, in the edit section of the page your want to use it,write the following codes

       [litebox href="#inline" anch="inline"]
      

      Then just below the above codes write you have to write another code that looks like this

      <div style="display:none;" >
       <div id="inline">
         <p> Hello there </p>
         <p> Hello there </p>
         <p> Hello there </p>
         <p> Hello there </p>
       </div>
      </div>
      

      The above codes are just simple html, the outer div must have it display set to none,this will hide the entire inline content and will only reveal it onclick.

      <div style="display:none;">
      </div>
      

      Now you need another div container to house your inline content and set the value of its id attribute to be the same with the href attribute value of your shortcode minus the # sign.

      <div style="display:none;">
        <div id="inline">
        </div>
      </div>
      

      You can now proceed to write you content.

      <div style="display:none;">
        <div id="inline">
          <p> Hello there </p>
        </div>
      </div>
      

      As I said earlier,if you know html it should be easily for you,but if you don’t, I be happy to assist you. In the upcoming version we will try to simplify the inline feature.
      Thank you.

  2. Hello There.
    I insert some photos with group_img class.
    However, my photos is on vertical mode, when i desired in horizontal mode.
    There are some config to do ?

    • Hi,this is what you have to do,first of all you have add a class attribute to your shortcode it can be any string.In the example below I used “group_img” as class name and it should be the same for all the images you want to group together. Now use the style tag to float the images and then make sure that there are no space between the shortcodes.

      
      <style>.group_img{float:left;}</style>
      [litebox href="path-to-image" group="group_id" class="group_img"]
      no space.....
      [litebox href="path-to-image" group="group_id" class="group_img"]
      

      After using shortcodes insert this code to clear the float.

      <p style="clear:both;" ></p>
      

      That’s it. Please do note that group image feature of upcoming version of litebox will be more easy to implement ,do bear with us.

  3. Hi,

    I have one more issue now. i installed in wordpress 3.9 it worked fine. but when i am installing it in WP 3.5.1 it is showing a fatal error.

    error is : Call to undefined function wp_unslash()in /…../plugins/…/litebox.core.php on line 65

    Any fix for the error will be highly appreciated. I really need to use it in WP 3.5.1

    Thank you.

    • Yes there should be fatal error because the function wp_unslash() was introduced for the first time in WP 3.6.0,
      So this is what you do,get ready for some coding lessons.
      Go the the plugins folder and locate this file (litebox.core.php), this is the path to the file

      plugins/litebox/class/litebox.core.php
      

      open the file,if you are using windows use notepad++,if mac use textmate,or you can use any code editor of your choice.Then go to line 65 of the file you should see the line.

      self::$litebox_options = (array) wp_unslash(get_option("litebox_general_options", true));
      

      The wp_unslash() is for the javascript options in litebox, so if you still intended to use the javascript option replace the above line with this

      self::$litebox_options = (array)  stripslashes_deep(get_option("litebox_general_options", true));
      

      The stripslashes_deep() function was introduced in WP 2.0.0 so it should work for WP 3.6.0,if you do not intended to use the javacript options just remove it.

      self::$litebox_options = (array)  get_option("litebox_general_options", true);
      

      Then save the file and you are good to go.

      • Thank you so much for the Reply…

        Excellent.. working absolutely fine.. Thanks again..

  4. Can you please tell me how to apply your lightbox short code link to a thumbnail. Do I use the media gallery and apply it to there somehow. I am trying to get a series of videos to play from Vimeo. I have 6 gallery images on the page and six links using your short code . You can use the URL above to have a look at the page. go to the home page and then select Reels/Corp video.

    Thank you,
    Peter.

    • Hi pete
      Currently litebox does not support thumbnail for vidoes,but as we speak I am working on including this support in the next version.
      We are trying to include support for more video sites in litebox,however I checked your website and I noticed that the vimeo videos you included in your site appears to have sidebars when playing on litebox. This is what you will do to fix it, change the https of your vimeo url to http. If you would like to receive email notificaton when the next version is released do let me know,because the next version will be very soon.
      Thank you.

  5. I really like your plugin, It look me several hours to happen onto it and I am thrilled. I would like to use clickable thumbnails to link to the videos.
    Thank you

    • Thanks Tom,
      As I told pete we are working on this feature in the next release. If you would like to see support for more video sites that you would like to use thumbnail with, do let us know,because we have some sites we would like to include into litebox. Also if you would like to receive email notification for the next version release,do let us know as well.
      Thank you.

  6. I want to use this plug-in sooooo badly but this is what happens when I try to activate it.

    Plugin could not be activated because it triggered a fatal error.

    Parse error: syntax error, unexpected ‘[‘ in D:\ASCB2013\2014meeting\wp-content\plugins\litebox\class\litebox.core.php on line 183

    Not ignoring the fact that there is a conflict with another extension, but off the top, have you ever seen this problem? Can you help?

  7. Very good Plugin. But i have one problem with it. The Litebox-Iframe isn’t scrollable on iphone and some Samsung Android Phones. But most others seem to work fine. Do you know anything about this?

    • Hey Manuel,

      I do not know about the iframe issue on iphone and android devices,cause I haven’t testing on both
      devices. Sorry for the inconvenience.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website

Current ye@r *