Extensions Club Extensions Pretty Slider
Pretty Slider
Pretty Slider Gallery is a Joomla module that will have your images sliding and fading in no time. It is coupled with the prettyPhoto overlay and the image resize script from Shifting Pixel so the module is able to resize your images on the fly and display the full size original in an elegant lightbox. This great Joomla image slider modulewill spice up any image gallery with smooth effects and no need for extra bulky components.
pretty Slider in action
features
- Displays as many images as your space allows
- Pulls the images directly from one directory
- Automatically resizes the images to fit the space you need
- Use the gallery as a traditional light box and display the full size image in a lightbox popup.
- Allows you to add titles and just using the file name, and you decide if its displayed
- Complete control over the resizing of the thumbnail image.
- Easy to use controls to change the settings within the Joomla module manager
- Full control over animation speed and settings
Overview
Pretty Slider is easy to an easy to use, beautiful sliding image gallery that will spice up your old image gallery. Setting up the gallery is as simple as designating a folder where the images should be pulled from and the module will do the rest.
Dependancies
Joomla 1.5 only.
JB Library plugin is required for this extension.
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
Pretty Slider needs images to work, or else it has nothing to show. If you are using a quickstart package with Pretty Slider already installed, view the demo content for examples.
Create a folder in your images directory that you will use specifically for this gallery. Upload the images to this directory, and go ahead and upload the fullsized image. There is no need to create a thumbnail or smaller version, the module will take care of that for you.
Once you have your selection of content ready, you can then start to work with Pretty Slider.
naming your images
The module uses the file name to provide a title to the image. If you wish to use this feature, then simply rename the files based on the title of the image.
Warnings about image names
You have to be careful what charaters you use when naming your images, sometimes they might be confused as part of the program. It is recommended to stay with alpha-numeric characters, the hyphen, and underscore.
Back to topgeneral slider settings
This is a simple path to your images directory. Normally you should not put a slash at the front. Capitalization matters, so make sure you have it exact.
link behaviour
Pretty Slider can add links to the images, and has several options about how the module should display the image.
No link
This disables the link entirely.
Opens in a Lightbox
This will open the image in a lightbox window, which is generally the preferred method. This 'window' is not a new browser window, just a neat way to overlay the image above the page.
Opens image in the same window
This will link directly to the image, so when it is clicked you will see just the full sized image. It also specifies that it will open the image in the same window you are currently viewing.
Opens image in a new window
This acts the same as above, except that it will try to open a new browser window to display the image.
Back to top
pretty photo settings
Pretty Photo 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.
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 at the top of theimage when displayed in the lightbox. Please note this setting does not relate to the title of the image in the left corner of the lightbox.
Overlay Speed
The speed for the transition to occur when an image is shown in the lightbox.
Back to top
image 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.
Back to top
transition settings
Here you can specify how the transitions in the slider module should act. You can control the type of transition, its speed, and the time between events.
Type of the transition
Select the type of transition that should occur when the next or previous image is displayed in the slideshow. You can choose from the following transitions: Fade | Scroll Up | Scroll Down | Scroll Left | Scroll Right | Slide X | Slide Y | Turn Up | turn Down | Turn Left | Turn Right | Zoom | Fade Zoom | Curtain X | Curtain Y.
Speed of the transition
The speed in which the transition to the next or previous image will appear.
Display time
The time before a new image is fisplayed in the slideshow.
Back to top
slideshow navigation
The last section deals with how the module navigates through the images, and if they are available.
Display the navigation buttons
Select whether to display the next and previous buttons that allow the user to click to the next and previous image in the slideshow.
Display the slideshow pagination
Select whether or not to display the numbered pagination that allows the user to click between the images.
Button Theme
Select from Grunge | Clean | Sticker as options for the next and previous buttons on the nav. The images can be found in the modules/mod_prettySlider/images folder.
Top offset for the pagination
The top offset in px from the bottom of the slideshow image. This value is best set to 20 to give the nav some breathing space from the bottom of the images.
Left offset for the pagination
The left offset in px from the left edge of the module. 0 will place the nav at the very left edge of the module.
Back to top
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.
Also check that none of your images have forbidden characters in the file name, try making sure they are all letters, numbers, hyphens, and underscores.
