NP_LightBox2 is a simple plugin to add LightBox2 functionality to Nucleus blogs. NP_LightBox2 will automatically create a thumbnail of the image, and when clicked, will show the full size image in LightBox2 style.
| General Plugin info | |
|---|---|
| Author: | Frank Truscott, based on NP_LightBox by Seventoes |
| Current Version: | 1.37 |
| Download: | Here .zip ~85kb |
| Demo: | Here |
| Forum Thread: | Here |
If installing version 1.3 or higher, all previous version (<1.3), need to be uninstalled first. Then proceed with installation steps outlined below.
Using NP_LightBox2 is very easy. To make an automatic thumbnail, and add lightbox functionality to an image, just follow this format while writing your post:
<%LightBox2(imagepath|Caption|setname)%>
The format used by Seventoes' NP_LightBox plugin is accepted as well:
!~~imagepath|Caption~~!
If you are using TinyMCE2 editor, or other editor plugin, you have to use Seventoes' code to insert image as the <% %> tag will not work properly with the editor.
where: imagepath is the path to the image relative to the imageURL option setting which defaults to your media directory. Optionally, as of 1.36, if you append a number, inside parentheses, to the end of the imagepath parameter, it will limit the thumbnails displayed, but not the set. For instance, common/vacation(3) would create a set of all the images in your media/common/vacation folder, but only the first 3 thumbnails will show (and be loaded) on your page. Appending (0) will keep all thumbnails from displaying. This is useful if you are creating a set using multiple individual images but only want certain ones to display a thumbnail on the page. If you need to show more than 100 thumbnails on a page, you will need to append a number higher than 100 (the default limit). Caption is the caption you want used shown when a user hovers over the image. Optional, defaults to image filename. setname is the name given to group a series of images into a navigatable set. Optional, but required to put images into a set.
The nucleus <%popup()%> behavoir can also be replaced with NP_LightBox2 according to a plugin option setting. This is disabled by default. Here's an example:
<%Popup(img.jpg|200|100|Caption)%>
Width and height are ignored, so you don't need them.
Normal HTML image links may be replaced according to a plugin option setting. This is disabled by default.
<a href=“img.png”><img src=“img.png”></a>
The link's location must be the same as the image's source.
Here are some examples (assuming the imageURL plugin option is left as default media directory):
<%LightBox2(myNewBaby.jpg|Isnt it cute?)%>
This shows a thumbnail of the image called myNewBaby.jpg in the media directory, with a caption of “Isn't it cute?”. When the thumbnail is clicked, the regular sized image will be shown using the LightBox effect.
<%LightBox2(myNewBaby.jpg|Isnt she cute?|baby)%>
<%LightBox2(firstbath.jpg|Looking even cuter|baby)%>
<%LightBox2(bundledup.jpg|All cozy now|baby)%>
This will show thumbnails of the three images listed from the media directory, with their respective captions. When a thumbnail is clicked, the regular sized image will be shown using the LightBox effect. The user will be able to click Prev and Next links in the LightBox window to navigate to the other images in the set called “baby”.
<%LightBox2(1/vacation/thehotel.jpg|Right on the ocean)%>
This shows a thumbnail of the image called thehotel.jpg in the media/1/vacation directory, with a caption of “Right on the ocean”. When the thumbnail is clicked, the regular sized image will be shown using the LightBox effect.
<%LightBox2(1/vacation|Right on the ocean|florida)%>
This will show thumbnails of all the files in the directory media/1/vacation. When a user clicks on a thumbnail, the regular sized image will be shown using the LightBox effect. The user will be able to click Prev and Next links in the LightBox window to navigate to the other images in the set called “florida”.
<%LightBox2(1/vacation(3)|Right on the ocean|florida)%>
(new in 1.36) This will show thumbnails of the first 3 files in the directory media/1/vacation. When a user clicks on a thumbnail, the regular sized image will be shown using the LightBox effect. The user will be able to click Prev and Next links in the LightBox window to navigate to the other images in the set called “florida”.
<%LightBox2(http://nucleuscms.org/buttons/nucleusbt11.gif|Nucleus Logo)%>
External links can be used in the imagepath parameter, but the link must be to a image file, not a directory. Captions and setnames are supported for external links.
<%LightBox2%> - Used to add required css and javascript files to pages. Put in the head section of your skins.
URL to your image folder The URL to the base directory in which your images will be held. This option MUST be set correctly, or NP_LightBox2 WILL NOT work. Defaults to your media URL and does not need to be changed for most installations. Must end with a trialing slash '/'.
Absolute filesytem path to your image folder The full filesystem path to the base directory in which your images will be held. This option MUST be set correctly, or NP_LightBox2 WILL NOT work. Defaults to your media directory path and does not need to be changed for most installations. Must end with a trialing slash '/'.
Relative filesytem path to your image folder The relative filesystem path from the plugins/lightbox2/ folder to the base directory in which your images will be held. This option MUST be set correctly, or NP_GreyBox WILL NOT work. Defaults to ../../../media/ and does not need to be changed for most installations. Must end with a trialing slash '/'. New in 1.3.
Which path should be used by thumbnail.php to find image files? Which of the path methods above should be used by your thumbnail.php file to find the image files. Default to URL and should work for most cases. If the thumbnails appear as a black box with a red X, try one of the other methods. Relative is generally a better idea than Full for most cases. New in 1.3.
URL to your lightbox2 root directory The URL to the base directory in which your lightbox2 files are installed (js and css). This option MUST be set correctly, or NP_LightBox2 WILL NOT work. Defaults to your URL for this plugin's folder and does not need to be changed for most installations. Must end with a trialing slash '/'.
Text to be displayed if no caption is provided The text which should be displayed if no caption is provided. This option can be set to LB_imageName to show the image's filename.
Do you want to display thumbnails? Whether or not to display thumbnails, if not, the caption will be displayed. Defaults to yes. If supported by your version of the PHP GD module, thumbnails can be generated for jpg, gif, png, and wbmp formats.
What is the maximum size for thumbnails? The maximum size in pixels that thumbnails can be. The largest side of the image will be reduced down to this size.
Replace the default nucleus <%popup()%> behavior with lightbox? Whether or not to replace nucleus <%popup%> behavoir with NP_LightBox2 behavior. Defaults to no.
Replace normal image links with lightbox? Whether or not to replace normal HTML image links with NP_LightBox2 behavior.
If you use a WYSIWYG, TinyMCE, Markup, BBCode, or other item parsing plugin to format your posts, you will need to use the !~~imagepath|Caption|setname~~! syntax for this plugin. Otherwise, you will see errors including Disallowed(…) instead of your images. (Thanks, danielck).
Also, if you use a skin that employs the nicetitle.js script (such as the default skin), the images will display fine, but the captions will not display with your images. If the captions are important, you will need to remove the call to nicetitle.js in the head.inc of your skin, or shoose a skin that doesn't use this script.
The javascripts behind NP_LightBox and NP_ThickBox conflict, so you can not use these two plugins together in the same skin.
There are hard-coded paths in the javascript files. If you have changed the name of the nucleus (admin) directory, you will need to modify the javascript files directly. Also, some multiblog configurations (particularly where you use separate subdirectories) can also cause some similar path issues. (Thanks danielck).
There are some additional compatibility issues involving large image files, and stylesheet link attributes in certain skins. Please read the forum thread for additional compatibility notes.
The Thumbnail feature will not work if your site hotlink protection enabled, unless the direct requests are allowed.