This plugin requires at least WordPress 3.0
Step 1: Installation – http://www.youtube.com/watch?v=dVYv4UnYxpw
Step 2: Manage Images – http://www.youtube.com/watch?v=25rHDky6dfU
Step 3: Manage Multiple Carousels – http://www.youtube.com/watch?v=ZCxAN8pjBig
Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive all_in_one_carousel.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [all_in_one_carousel settings_id='1']
click here for more details regarding the shortcode
| css | the folder contains the .css files used by the pluging |
| images | the folder contains the images used by the pluging |
| js | the folder contains the .js files used by the pluging |
| carousel | the folder contains the .js & .css files that the video carousel use. |
| tpl | the folder contains the template files used by the pluging |
| all_in_one_carousel.php | the plugin itself |
From this section you can define the carousels.
If you need to include multiple carousels in your pages with different settings and playlist you can define the carousels and manage the settings for each one.
If you need only one carousel in your website, just edit the default one.
From this section you can define the video carousel settings.
| General Settings | |
| Carousel Width | carousel width |
| Carousel Height | carousel height |
| Skin Name | available skins: - sweet - powerful - charming |
| Responsive | Possible values: true - the banner will responsive false - the banner will not be responsive |
| Responsive Relative To Browser | Possible values: true - the banner will responsive false - the banner will not be responsive |
| Auto Play | You can define the time (in seconds) until the next photo will play. If you set it 0 the carousel will not autoplay |
| Number Of Visible Items | The number of visible items. It has to be an odd number: 3,5,7,9,11 etc |
| Elements Horizontal Spacing | The horizontal distance between visible items |
| Elements Vertical Spacing | The value with which the elements are becoming smaller |
| Vertical Adjustment | This value will rise the whole carousel up |
| Animation Time | The speed with which the elements are moving (in seconds) |
| Easing | The animation easing. Possible values: easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
| Resize Images | If you are using images (or front image) inside the carousel you can set it to auto resize as it moves |
| Show Element Title | Possible values: true - the photo title/description will apear false - the photo title/description will apear *** You can change the title css definition by edditing in wp-content\plugins\all_in_one_carousel\carousel\allinone_carousel.css file the "elementTitle" class associated with the skin: .allinone_carousel.sweet .elementTitle .allinone_carousel.powerful .elementTitle .allinone_carousel.charming .elementTitle |
| Target | Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window |
| Enable Touch Screen | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
| Controllers Settings | |
| Show All Controllers | Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation) |
| Show Navigation Arrows | Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear |
| Show Navigation Arrows On Init | Possible values: true - next, previous buttons will appear on first carousel init false - next, previous buttons will not appear on first carousel init |
| Auto Hide Navigation Arrows | Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out |
| Show Bottom Navigation | Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear |
| Show Bottom Navigation On Init | Possible values: true - bottom navigation buttons will appear on first carousel init false - bottom navigations buttons will not appear on first carousel init |
| Auto Hide Bottom Navigation | Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out |
| Show Preview Thumbs | Possible values: true - a preview image will appear on hovering each bottom button false - the preview image will not appear on hovering each bottom button |
| Next&Prev Buttons Margin Top | margin-top for next/previous buttons |
| Play Movie Margin Top | margin-top for play button |
| Bottom Navigation Margin Bottom | margin-bottom for bottom navigation |
| Circle Timer Settings | |
| Show Circle Timer | Possible values: true - shows the circle timer false - hides the circle timer |
| Circle Radius | circle radius |
| Circle Line Width | circle line width |
| Circle Color | circle color, in hexa |
| Circle Alpha | circle alpha, in percents. Posible values 0-100 |
| Behind Circle Color | behind circle color, in hexa |
| Behind Circle Alpha | behind circle alpha, in percents. Posible values 0-100 |
| Circle Left Position Correction | this value will be added to the left position of the circle timer |
| Circle Top Position Correction | this value will be added to the top position of the circle timer |
| Image | URL to the large image |
| Thumbnail | URL to the thumbnail image |
| Image Title / Alternative Text | alternative text used to populate "alt" tag |
| Link For The Image | You can specify a link associated to the primary photo |
| Link Target | Possible values: *** If all your links will behave the same, you can ignore this parameter and use target from Banner Settings |
| Video Beneath Image | Possible values: true - if you have video content beneath main photo false - if you don'thave video content beneath main photo |
| Content | The content (other than the large image). It can be a video beheath the large image or a HTML content if you don't have a large image. |
The shortcode is:
[all_in_one_carousel settings_id='1']
where
settings_id is the carousel ID defined in "Manage Carousels" section
Recommended Values for Each Skin
Of course, you can change the default settings as you wish but this is our recommandation.
We recommend you to change some default settings for the skins as follows:
Sweet Skin (default)
NO change
Powerful Skin
autoHideBottomNav: false
elementsVerticalSpacing: 25
verticalAdjustment: 130
animationTime: 0.6
showPreviewThumbs:false
Charming Skin
showElementTitle: false
verticalAdjustment: 50
showPreviewThumbs: false