Extensions Club Extensions Bamboo Box
Bamboo Box
The Bamboo Box module is an incredibly flexible gallery module for Joomla that uses your very own Joomla content to create a slick gallery for your site using nothing more than a module and your Joomla content. It pulls information either directly from articles or from a directory, and can be integrated with our great captify effect and lightbox. Its an unbelievable gallery that has unlimited potential with your Joomla website.
Examples
Overview
What makes the Bamboo Box module different from other galleries is that you dont need to install other components or plugins, and you can use your existing Joomla content to create a simple but effective way of presenting your artwork, photos or anything else that needs a gallery.
Dependancies
Joomla 1.5 only.
JB Library plugin is required for this extension.
features
- Display unlimited number of images from your Joomla content items in a module
- Use the gallery as a traditional light box and display the full size image in a lightbox popup.
- Use the gallery to display the entire content item in a popup.
- Display More Details and View Image links beneath the image.
- Display the title of the content item the image is drawn from using the captify effect.
- Complete control over the resizing of the thumbnail image.
- Easy to use controls to change the settings within the Joomla module manager
- When using content items, if no image is assigned to it, then it is automatically ignored
Instructions
First make sure you install the module using the Joomla Installer in the administration, and then that you've published the module into the position you desire. Then you will be ready to change and configure the settings. Please take the time to review the following information and see the documentation for your specific template for further information. Please ensure you have also installed and published the JB Library plugin.
before you begin
Bamboo Box is powerful on its own, but setting it up requires some content. If you are using a quickstart package with Bamboo Box already installed, view the demo content for examples.
Create or use a category devoted specifically for the articles that you wish to display in the module. You should then place the image you'd like to display in the article first. Then add any text and addition content you need.
Bamboo Box selects the first image it finds in the article, so it is important the image you wish to show is the first image. Once you have your selection of content ready, you can then start to work with Bamboo Box.
General Module Setup
To begin we have some basic settings. Please check these, especially if you are using Bamboo Box more than once on a page.
Module Class Suffix
Use this setting to add your own unique styling to the module, based on the available options from your template.
Module ID
When you use multiple instances of BambooBox on one page, assign each a unique ID so they don't conflict.
Back to topthumbnail settings
Here you can control the way the thumbnails are generated. The beauty of the module is that it can automatically resize the images based on these parameters, so you don't have to worry about it. It is suggested to make small changes when working with these values to help fine tune the display, as they all effect the final output.
Width and height of the resized image
These values are used to calculate the new size of the images. They are set in pixels, but only input the number. In general, images are approximately a width-to-height ratio of 4x3, meaning a 400 pixel wide image is usually around 300 pixels tall. When images are resized, the program will automatically expand the image to fit
Width and height ratio of the image
This is related to the above values, because it sets the ratio of the images hight and width. If an image should be very wide and short, then the width ratio should be larger than the height ratio. If the image is to be taller, then the height should be larger. Generally, one should be set to 1 and the other to the appropriate ratio.
Main image fade on hover
This adds support for the thumbnails to fade slightly on hover, to give them a unique effect. You can disable this to remove the effect.
Thumbnail right and bottom margins
This sets the amount of space that should be between the images to the right and below in pixels. Use them to help set breathing room for the images.
Images per row
This last setting configures how many images should be displayed on the row. If the images are too large to fit in the space allowed, they will not display correctly, so it is important to either change the image sizes or the number of images per row so they can fit.
Back to top
content display options
Bamboo Box is able to display the content in a variety of ways, and allows you to control what occurs when the items are clicked.
Action
This controls what happens when a user clicks on the item. The choices are to display the content page in a popup window, display just the image in a popup window, go to the content page, or no action at all.
Count
This is the number of items to display. You should consider using a number that is divisible by the number per row above. That way each row will be of equal size.
Select the category to display the items from
Choose the category which it should pull the content items from. At the moment only one category can be selected, and sections are not available either. All items have to be in the same category.
Ordering of content
Here you get to choose what order the images are arranged, so select based on your needs.
Back to top
fancybox popup settings
If you decided to show the content in a popup modal window, then these settings are applied. You can safely ignore them if you aren't using one of the two popup display options above.
Display title in FancyBox
You can show or hide the title of the article when the popup is opened.
Use gallery method to group popups
This adds to the popup box, and allows the user to navigate through the content items in the window. For example, in the popup the user will see the content they clicked on, and then can select Next to see the next item without closing the window and clicking on the next item.
Use the overlay
This option enables or disables the gray overlay that is applied when the window is opened. This is to help bring focus to the window if you select this option.
Overlay opacity
This sets how transparent the overlay is over the content. A value of 1.0 will block out everything, and 0 will make the overlay invisible. Generally a value of 0.9 to 0.7 works great.
Popup padding, width, height
Here you can specify the size in pixels of the popup by changing the width or height, as well as the padding, which is the space between the border and the contents of the window. Use only the number value in the field.
Back to top
Meta info and links below images
Here you can specify more detail about the fine display options that can be used below the images in the module. By default they are disabled, but they allow you to add the information below the images much like you might see on images in a full scale gallery.
Display links below image
This setting turns on or off all of the following settings. Setting this to yes will show the addition image links below the images.
Display content item title
This will show the image title right below the image.
Content item title link
If the above is enabled, then this determines if the title is a link to the content item or just plain text.
More details link behaviour
If the More details link is enabled, then it determines how clicks should be handled. See the Content Display section for details on how to change the way clicks are handled on the images.
Display more details link and More details link text
This turns on or off the link to more details, and the text can be customized to say anything. It creates a link under the image with the text to the content item, and displays the content based on the behaviour selected above.
VIew image link and View image link text
This allows you to set a link to view the image directly instead of the whole content item, and the text option allows you to specify the text for the link.
Back to top
Captify Effects
Bamboo Box comes ready to apply captify, a sleek way to add captions to the images. The effect will add a hidden layer of text that slides up to reveal the title of the article when the image is rolled over. See the demo to see the action in effect. Here you can change the captify effects.
Enable the Captify effect
This turns on the effect, or disables it entirely.
Transition Speed In/Out
This sets the time of the transition for the caption to animate in or out. It is set in milliseconds, so 800 means 0.8 seconds. For one second, you would use 1000.
Opacity
To change how transparent the background of the caption is, edit this value. The values should be between 1.0 and 0. 1 would be full color without any transparency, and 0 would be completely invisible.
Transition
This sets the type of animation to be used with the caption, slide up or fade in.
Position
To set the location of the caption, change this value to where it best fits on your images.
Back to top
Troubleshooting
My images aren't lined up right, they don't sit in clean rows.
Most of the time this happens when your display options don't work well with the place you have put the module in the template. It is recommended to reduce the width and height of the images until they line up correctly, or to change the number of items to show on each line.
The effects aren't showing up.
This either means that you do not have the JB LIbrary plugin installed and/or published or that you have the jQuery library loading more than once. jQuery runs in no conflict mode is generally hassle free except if it is being displayed more than once on a page. If this is the case then youneed to track down the component, module or plugin that is generating the extra jQuery reference and disable it.
In order for jQuery scripts to work in Joomla the jQuery library must be referenced after the default Joomla mootools library is called.
