Extensions Club Extensions Minimoo2 Gallery
Minimoo2 Gallery
Minimoo2 is a completely rewritten version of our previous image slider - Mini Moo Gallery. Minimoo2 uses jQuery and a much smarter way to load images into the gallery which make creating a sliding image gallery almost effortless. Minimoo2 uses jQuery in no conflict mode so it should work with any other script. This beautiful, simple image slider is perfect for showcasing your images without the hassle of major extensions, and comes with an amazing set of features that will satisfy your every need.
Download
Demonstration
Overview
You can use Minimoo2 with our JB Library, and you'll get a great gallery that shows thumbnail previews of your images, and then provides you with dozens of transitions styles to use. Its powerful, and still simple, using just a folder location to automatically generate everything.
Dependancies
Joomla 1.5 only.
JB Library plugin is required for this extension.
features
- Minimoo2 uses jQuery in no conflict mode
- Load unlimited images into the module automatically from a folder on your webserver
- Smart Image resizer from Shifting Pixel resizes one image to create thumbnail and main images.
- Easy setting of cropping ratio to crop images to fit desire width or height.
- Your choice of prettyPhoto and Thickbox, open in new window, open in same window as options to display the original image when the image is clicked.
- Belated PNGFix built in for prettyPhoto.
- 31 transitions using the jQuery easing script.
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
Minimoo2 requires some images to work, so you will need to have this ready before we begin. If you are using a quickstart package with Minimoo2 already installed, view the demo content for examples.
Create or use a folder in your images directory that will house the images specifically for this. Place only the images you wish to use in the gallery, because it automatically adds all pictures in the directory. Also, if you wish to use captions for the images, name the images based on what you wish the caption to be. Remember to use web safe characters, so it is best to use alphanumeric characters only.
Once you have your selection of images ready, you can then start to work with MiniMoo2.
General settings
To begin we have some basic settings. These are the most important settings, so make sure they are correct.
Module Class Suffix
Use this setting to add your own unique styling to the module, based on the available options from your template.
Directory for images
This is the directory that you wish to pull images from. Do not use a slash in front, but do include it at the end, such as images/stories/minimoo2/
Width and height of the module
Here you specify how much space the module should take up in pixels. Consider where you wish to place the module and that should help you determine these settings.
Action to occur when main image is clicked
You can enable a lightbox effect called PrettyPhoto, or for just the images select none and nothing will occur on clicks.
prettyphoto settings
PrettyPhoto is where part of the name for the module comes from, its a script that creates the lightbox effect. Here we will either disable it entirely or configure the way it is displayed. This only matters if PrettyPhoto is selected above.
Enable PrettyPhoto
Select whether to enable the prettyPhoto lightbox. Set this option to no if you have already included the prettyPhoto script in a module that already displays on the page. Otherwise this needs to be set to yes if you have set the link behaviour setting to display the images in a lightbox.
Overlay Theme
Select the style of the overlay and prettybox when the image is displayed in the lightbox. You can select between the following themes for the prettyPhoto Overlay. Light Rounded | Dark Rounded | Light Square | Dark Square. Please note that these themes are based on the original prettyPhoto themes and have limited support for ie6.
Overlay Opacity
The degree of transparency when the image is shown in the lightbox. Setting this value to 1 will make the overlay 100% opaque while a setting of 0 will mean that there is no overlay at all.
prettyPhoto Padding
The padding around the prettyPhoto container once an image is displayed.
Resize Image
Setting this image to yes enables the image to be resized to its full height if the original dimension of the image is wider or taller than the browser window.
Show Image Title
Display the image title of the image when displayed in the lightbox.
Overlay Speed
The speed for the transition to occur when an image is shown in the lightbox.
transition settings
This portion allows you to change the way the transition functions.
Speed of the transition
This is the speed in milliseconds for the transition. So 1000 would be one second, 500 would be half a second, and so on.
Type of transition
There are 31 different animation transitions to choose from. The names are a big cryptic, so you can go to the jQuery Easing Plugin page to see them in action under Example (read the instructions for more information).
thumbnail settings
The small thumbnails are automatically generated, and here you can specify their settings.
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 cropping 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.
Thumb Top Margin
Sets the top offset for the main image. Enter a value without the px eg 400
Thumb Image Left Margin
Sets the left offset for the main image. Enter a value without the px eg 400
Thumbnail Area Width
Sets the width for the div that holds the thumbnails. Enter a value without the px eg 400.
image resize settings
Here you can specify more detail about way images are resized, if you have enabled that option.
Image Width
The resized width of the image.
Image Height
The resized height of the image.
Crop Ratio Width
The height ratio for the image. Set this to 1 and the crop ratio height to 1 to retain the original aspect of the image.
Crop Ratio Height
The height ratio for the image. Set this to 1 and the crop ratio width to 1 to retain the original aspect of the image.
Main Image Top Margin
Sets the top offset for the main image. Enter a value without the px eg 400
Main Image Left Margin
Sets the left offset for the main image. Enter a value without the px eg 400
Display nav buttons
How to load the Minimoo2 module in your content.
So what if you dont want your module loaded into a module position in your template? Thats easily fixed.
In Joomla 1.0 the task took around 5 steps to publish a module in a content item but in Joomla 1.5 its as easy as two. The following instructions assume that you have already uploaded your images to the correct folder and the prettyBox module is displaying normally (or how you want it to display) in a normal module position in your template.
1. Firstly create your content item and type the words { loadposition prettyBox } - there is an extra space after the curly brackets so that the module wont render in this content so when you are implementing this you will need to remove the space.
2. Go to the prettyBox module admin and in the module position dropdown box type prettyBox. Now you need to create a link to the content item in question in order for the gallery to appear. If you already have the content item displaying on your site then you can skip this step.
a. Go to menu --> main menu (or the menu you want the faq linked from) and create a menu item that links to the content item that you created in step
3. Navigating to the front end of your site should show a link to the newly created item and your beautiful faq should be displayed on the screen.
An example of the settings of Minimoo2 displayed in the demo on this page
Troubleshooting
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.
