Tuesday, 31 July 15:02

Beautiful Joomla slider photos

Compatibility : Joomla 2.5Joomla 3.x

The Avatar Slide Skitter is a Joomla slideshow module & Joomla slideshow plugin. They  are based on the Skitter library. Skitter is a JavaScript image slider framework built on top of the jQuery with various beautiful effects


  • Slide image in Folder
  • Support create multiple modules/plugin on one page.
  • Easy to change size of module.
  • Config number of images can be displayed.
  • Set width of module in pixel or percent.
  • Use  arrows to next or previous slider.
  • Customize  time display for one image.
  • Multi specific select image folder for slide.
  • More than 20 effect transition.
  • Multi select effect.
  • On/Off : tools, focus, play/pause, random slider, control, progress bar, copyright…
  • Change navigation style : thumbs, number, dots
  • Change position of focus, play/pause button, number/dots align
Features Free Pro Unlimited (Module only)
Multiple Sliders No Yes Yes
Remove Copyright No Yes Yes
Limit Images 7 Unlimit Unlimit
Effect Random only Specific & Multi choice Specific & Multi choice
Folder Source 1 folder Multiple folders Multiple folders
Phoca Source No No Yes
JoomGallery Source No No Yes

 Change log :

Module 1.0.9 & Plugin 1.0.4:

  • Responsive
  • Plugin bug when set transition
  • Plugin support multi folder and transition


Module 1.0.8 & Plugin 1.0.4:

  • Update Jquery 1.8.2
  • Bug jquery 1.8 fixed: update jquery-color-animation
  • Bug conflict with GK-music template fixed

Module 1.0.6 & Plugin 1.0.3:

  • Fix problem when the slide below another menu dropdown

Module 1.0.4 & Plugin 1.0.2:

  • Sort image in local folder base on alphabet.

Module 1.0.3:

  • Allow to add Link for image

Module 1.0.2:

  • Fix Effect bug
  • Allow to choice background color of dot and number
  • Allow to add Description for image


Login to Joomla Control Panel page as Administrator

  1. Choice Extension>Module Manager.
  2. Click New.
  3. Choice Avatar Slide Skitter.

Set the parameter for your Module:

Source Setting

  • Select folder : choice image folder. Hold Ctrl for multi choice folder
  • Select max items can be displayed

Slide Setting

  • Set interval (Seconds)
  • Set width & height for module: example 100% or 100px for width, 100px for height
  • On/Off : tools, focus, play/pause, random slider, control, progress bar, copyright…
  • Choice animation (effect) Hold Ctrl for multi animation
  • Choice Navigation Style: Thumbs, Number, Dots. Preview.
  • Choice Position of buttons controls, focus.
  • Choice Number/Dots Align.


Insert this syntax to your joomla’s articles.

{avatarskitter options=…/}

Example :

{avatarskitter path=Test width=70% height=300px count=15 tool=true auto=false navstyle=numbers/}

Options :

  • count : Number of image
  • path: image folder in …/images/(Example: path=albums/halloween)
  • height : Height of slide (px/%)
  • width : Width of slide (px)
  • auto : (true/false) Sets whether the slideshow will start automatically.
  • animation : Defines what animation to use (example : “animation:random”,”animation:cube,cubeRandom,showBars”)
    • List animation: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart.
  • tools: (true/false) Hide numbers and navigation.
  • random: Randomly sliders.
  • navstyle: Navigation Style (example: “navstyle:thumbs”).
    • numbers
    • dots
    • thumbs
    • preview
  • controls: (true/false) Option play/pause manually.
  • controlspositon : Position of button controls (example: “controlsposition:rightTop”).
    • center
    • leftTop
    • rightTop
    • leftBottom
    • rightBottom
  • focus: Focus slideshow.
  • focuspositon: Position of button focus slideshow.
    • center
    • leftTop
    • rightTop
    • leftBottom
    • rightBottom
  • numbersalign: Alignment of numbers/dots/thumbs.
    • center
    • left
    • right
  • progress: (true/false) Show progress bar.
  • cr : (true/false) Show copyright
  • jquery :
    • unload : unload jQuery
    • latest : latest version of jQuery (Default)
    • specific version
      • example: jquery=1.8.2 (load jquery 1.8.2)


jQuery Conflict Solution

  • Module:
    • Type in to the jQuery option box: latest/unload or specific version of jQuery
  •  Plugin:
    • Add syntax "jquey=...."
      • latest : load latest version of jQuery
      • unload : unload jQuery
      • version of jQuery: load specific jQuery version