CW-fotorama setup
Open Extensions->Modules from the Admin menu and add a new module of type "cw-fotorama".
Administration
in the first tab you have to choose, what to load with each module:


- Use css
Load the style sheets that come with the module. If you use the module for the first time for a particular page or set of pages, and you want to use the default styles, leave this switched on.
If you already use another instance of the module within the same set of pages, you should switch it off, otherwise the styles would be loaded twice.
You can also disable it, to use your own custom styles. - use javascript
The same rules apply for the modules script. If you already use another instance of CW-fotorama within the same set of pages, disable it, to avoid it being loaded more than once. Otherwise leave it enabled. - Load jQuery
If you already load jQuery in your template, this should be switched off. Only if jQuery isn't used for your site so far, this has to be enabled.
Fotorama parameters
In this tab, you can set all the parameters to customize the fotorama. These parameters are identical with the original options of fotorama.Dimensions
Here you can set the sizes and ratio for the images, and how they should be fitted into the stage of the slideshow.
- Width
Stage container width in pixels or percents. Default: 100% - Minimum width
Stage container minimum width in pixels or percents. Leave empty for no limit. - Maximum width
Stage container maximum width in pixels or percents. Leave empty for no limit. - Height
Stage container height in pixels or percents. Default: 100%. - Minimum height
Stage container minimum height in pixels or percents. Leave empty for no limit. - Maximum height
Stage container maximum height in pixels or percents. Leave empty for no limit. - Ratio
Width divided by height. Recommended if you’re using percentage width. Example: 4/3 or 1.3333333333. - Fit images
There are 4 ways to fit an image/thumbnail into a fotorama:
'contain' Default - Stretching the image to be fully displayed while fitting within the fotorama.
'cover' Default for thumbnails - Stretching and cropping the image to completely cover the fotorama.
'scaledown' - Stretching the image if it is bigger than the fotorama.
'none' - Using the image’s own dimensions. - Horizontal margins
Horizontal margins for frames in pixels. Leave empty for no margins. - Glimpse
Glimpse size of nearby frames in pixels or percents. Leave empty for no glimpse.
Behaviour
In this section you will find all parameters to set how fotorama should behave.
- Start frame
Index or id of the frame that will be shown upon initialization of the fotorama. (Starting at 0) - Transition duration
Animation length in milliseconds. - Transition
Select which transition to use. - Auto play
Let fotorama play photos automatically - Auto play interval
Set any interval in milliseconds, for example, 3 seconds: 3000. Default: 5000 (5s) - Stop on touch
Stop slideshow at any user action with the fotorama. This is not a pause, autoplay will end until the page is reloaded. - Loop
Loop the last and the first frame for seamless transition. - Shuffle
Shuffle the frames - Direction
Flip fotorama direction on Hebrew or Arabic sites. It chages frame order, captions position, and autoplay direction. Default: left to right. - Lazy load
Enable lazy loading of images. Doesn't work on Joomla custom field as data source!
Navigation
Choose the way, visitors can navigate through the slideshow
- Navigation style
Select the navigation style. Available options: dots, thumbnails or none - Navigation position
Navigation container position relative to stage - Navigation width
Navigation container width in pixels or percents. Default: 100% - Tumbnail width
Tumbnail width in pixels. Default: 60 - Tumbnail height
Tumbnail height in pixels. Default: 60 - Tumbnail margins
Size of thumbnail margins. Leave empty for none. - thumbnail Border width
Border width of the active thumbnail. - Fit thumbnails
There are 4 ways to fit an image/thumbnail into a fotorama:
'contain' Default - Stretching the image to be fully displayed while fitting within the fotorama.
'cover' Default for thumbnails - Stretching and cropping the image to completely cover the fotorama.
'scaledown' - Stretching the image if it is bigger than the fotorama.
'none' - Using the image’s own dimensions. - Arrow navigation
Show arrow navigation buttons. - Click navigation
Enable navigation by clicking on the image. - Swipe navigation
Enable navigation by swiping the image. - Trackpad navigation
Enables trackpad support and horizontal mouse wheel as well. - Keyboard navigation
Turn on keyboard navigation using the arrow keys - Allow fullscreen
Whow a button to allow entering fullscreen
Images
Here you can select the image source and the image folder.
Image source
Select the image source you want to use. Without the CW-fotorama XT plugin, only Select directories is available.
With the plugin, the following image sources are available:
Select directories

Select one or more directories, within the "images" directory. All images in these directories will be shown in alphabetical order.
Joomla custom field

- Setup a custom "image-list" Field for your articles and set a class for it.
- Enter the field class in CW-Fotorama, like in the screenshot above.
- Publish some pages and select images within the custom field.
- Publish the CW-Fotorama instance on all pages where you have defined the image-list custom field.
Image manager
The image manager enables you to selct, upload and organize particular images. It is decribed in the next tab "Image manager".
Image manager
The image manager enables you to upload and use images from the joomla media center. You can sort the images by draging them around, and you can add captions to individual images. The captions can contain html and it is rather easy to style them via css within your template.