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


  1. Setup a custom "image-list" Field for your articles and set a class for it.
  2. Enter the field class in CW-Fotorama, like in the screenshot above.
  3. Publish some pages and select images within the custom field.
  4. 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.