NP_GreyBox is a simple plugin to add GreyBox functionality to Nucleus blogs. NP_GreyBox will automatically create a thumbnail of the image, and when clicked, will show the full size image in GreyBox style. Can also be used to display pages and page sets in a greybox window.
| General Plugin info | |
|---|---|
| Author: | Frank Truscott, based on NP_LightBox by Seventoes |
| Current Version: | 1.37 |
| Download: | Here .zip ~175kb |
| 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_GreyBox is very easy. To make an automatic thumbnail, and add greybox functionality to an image, just follow this format while writing your post:
<%GreyBox(imagepath|Caption|setname|boxtype|width|height)%>
The format used by Seventoes' NP_LightBox plugin is accepted as well:
!~~imagepath|Caption|setname|boxtype|width|height~~!
You must use Seventoes' format, in posts, if you use one of the parsing editor plugins like TinyMCE, WYSIWYG, bbcode, Markup, etc…
You must use the standard nucleus tag format (<%GreyBox(…)%>) in skins, for all installs.
where:
The nucleus <%popup()%> behavior can also be replaced with NP_GreyBox 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 dont 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):
<%GreyBox(myNewBaby.jpg|Isnt it cute?|image)%>
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 GreyBox effect.
<%GreyBox(myNewBaby.jpg|Isnt she cute?|baby|imageset)%>
<%GreyBox(firstbath.jpg|Looking even cuter|baby|imageset)%>
<%GreyBox(bundledup.jpg|All cozy now|baby|imageset)%>
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 GreyBox effect. The user will be able to click Prev and Next links in the GreyBox window to navigate to the other images in the set called “baby”.
<%GreyBox(1/vacation/thehotel.jpg|Right on the ocean|image)%>
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 GreyBox effect.
<%GreyBox(1/vacation|Right on the ocean|florida|imageset)%>
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 GreyBox effect. The user will be able to click Prev and Next links in the GreyBox window to navigate to the other images in the set called “florida”.
<%GreyBox(1/vacation(3)|Right on the ocean|florida|imageset)%>
(new in 1.36) This will show thumbnails of the first three files in the directory media/1/vacation. When a user clicks on a thumbnail, the regular sized image will be shown using the GreyBox effect. The user will be able to click Prev and Next links in the GreyBox window to navigate to the other images in the set called “florida”.
<%GreyBox(http://www.nucleuscms.org/|Nucleus CMS Home Page||pagefs)%>
This will show the Nucleus CMS Home Page in a greybox comprising the full available screen. Scrollbars are provided as needed.
<%GreyBox(http://www.nucleuscms.org/|Nucleus CMS Home Page||page|500|300)%>
This will show the Nucleus CMS Home Page in a greybox with a width of 500px and a length of 300px. Scrollbars are provided as needed.
<%GreyBox(http://www.nucleuscms.org/|Nucleus CMS Home Page|nucleus|pageset)%>
<%GreyBox(http://skins.nucleuscms.org/|Nucleus CMS Skins|nucleus|pageset)%>
<%GreyBox(http://wiki.nucleuscms.org/plugin|Nucleus CMS Plugin List|nucleus|pageset)%>
Clicking any of these links will show, the clicked page in a fullscreen greybox, with navigation to the other two. Scrollbars are provided as needed.
<%GreyBox(http://nucleuscms.org/buttons/nucleusbt11.gif|Nucleus Logo||image)%>
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.
<%GreyBox%> - Used to add required css and javascript files to pages. Put in the head section of your skins.
<%GreyBox(imagepath|Caption|setname|boxtype|width|height)%> - Used to add greybox activated images and links in the 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_GreyBox 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_GreyBox 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/greybox/ 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 greybox root directory The URL to the base directory in which your greybox files are installed (js and css). This option MUST be set correctly, or NP_GreyBox 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 TB_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 greybox? Whether or not to replace nucleus <%popup%> behavoir with NP_GreyBox behavior. Defaults to no.
Replace normal image links with greybox? Whether or not to replace normal HTML image links with NP_GreyBox 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|boxtype|width|height~~! 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 , NP_ThickBox, and NP_GreyBox conflict, so you can not use these plugins together in the same skin.
There are other compatibility issues with skins (like Laila) that use a title attribute in the link tag calling the main css file. There are also conflicts with other javascript files. Some of these conflicts can be mitigated by inserting or appending lightboxInit() in the onload attribute of the page body tag.
The Thumbnail feature will not work if your site hotlink protection enabled, unless the direct requests are allowed.
Please report any other compatibility issues to the forum thread for discussion: Forum Thread.
NP_GreyBox version 1.33 works with Nucleus CMS version 3.31 - 2007-11-11 kg