This plugin requires at least WordPress 3.0
Installation - https://www.youtube.com/watch?v=HHwNe2CYXL0
How To Create a Perspective Carousel - https://www.youtube.com/watch?v=RsOReGcav38
How To Create a Classic Carousel - https://www.youtube.com/watch?v=uk_V4vX8AMo
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 multimedia_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: [multimedia_carousel settings_id='1']
click here for more details regarding the shortcode
From this section you can:
- add a new carousel
-
select the carousel you want to edit by clicking "Carousel Settings"
- add/edit playlist images by clicking "Playlist"
- delete an existing carouel by clicking "Delete"
- duplicate an existing carouel by clicking "Duplicate"
From this section you can define the carousel settings.
A. PERSPECTIVE TYPE
General settings | |
Skin | Possible values: - black - white |
Carousel Width | carousel width |
Carousel Height | carousel height |
Width 100% | Possible values: true - the carousel width will be 100% false - the carousel width will be what you've set for 'width' parameter |
Center Plugin | Possible values: true - the carousel will be centered on the page false - the carousel will be centered on the page |
Carousel Loading Delay | The timeout delay (in seconds) for carousel loading |
Image Width | image width |
Image Height | image height |
Responsive |
Possible values: true - the carousel will responsive false - the carousel will not be responsive |
Responsive Relative To Browser | Possible values: true - the carousel will be responisve relatively to browser dimensions false - the carousel will be responisve relatively to parent div |
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 swing liniar |
Resize Images | If you are using images (or front image) inside the carousel you can set it to auto resize as it moves |
Active Item Optional Class | You can insert here the name of a css class which you want for the active item. The class can be defined in your css files or in Appearance->Customize->Additional CSS |
Border Width | the image border thickness |
Border Color OFF State | the image border color for OFF state. It can be a hexa value or 'transparent' |
Border Color ON State | the image border color for ON state. It can be a hexa value or 'transparent' |
Target Window For Link | 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 |
Show Element Title | Possible values: true - the photo title/description will apear false - the photo title/description will apear |
Title Color | title color, hexa value. |
Enable Touch Screen | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
LightBox Window Width Divider | The LightBox window width divider. The Lightbox window with will be equal to browser width / LightBox Window Width Divider |
LightBox Window Height Divider | The LightBox window height divider. The Lightbox window with will be equal to browser height / LightBox Window Height Divider |
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 |
B. CLASSIC TYPE
General settings | |
Carousel Name | |
Skin | Possible values: - black - white |
Carousel Width | carousel width |
Carousel Height | carousel height |
Width 100% | Possible values: true - the carousel width will be 100% false - the carousel width will be what you've set for 'width' parameter |
Image Width | item top image width |
Image Height | item top image height |
Responsive |
Possible values: true - the carousel will responsive false - the carousel will not be responsive |
Responsive Relative To Browser | Possible values: true - the carousel will be responisve relatively to browser dimensions false - the carousel will be responisve relatively to parent div |
Auto Play (in seconds) | 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 Thumbs Per Screen | The number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 3 |
Item Padding | item padding |
Item Background Color OFF State | item background color, OFF state, in hexa |
Item Background Color ON State | item background color, ON state, in hexa |
Title Color OFF | item title color, OFF state, in hexa |
Title Color ON | item title color, ON state, in hexa |
Title Font Size | item title font size |
Title Margin Top | item title top margin |
Description Color OFF | item description color, OFF state, in hexa |
Description Color ON | item description color, ON state, in hexa |
Description Font Size | item description font size |
Description Margin Top | item description top margin |
Target Window For Link | 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 |
LightBox Window Width Divider | The LightBox window width divider. The Lightbox window with will be equal to browser width / LightBox Window Width Divider |
LightBox Window Height Divider | The LightBox window height divider. The Lightbox window with will be equal to browser height / LightBox Window Height Divider |
Controllers Settings | |
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 |
Bottom Navigation Margin Bottom | Bottom navigation bottom margin |
Bottom Navigation Position | Bottom navigation position. Possible values: 'left', middle', 'right' |
Image | Main image |
Image Title | The current content title |
Image description - Only for 'Classic' carousel version - |
The current content description |
Preview Thumb | A preview image will appear on hovering the corresponding bottom button |
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 JS options |
Large Image | The path to the large image |
Vimeo Video ID | The VIMEO video ID |
YouTube Video ID | The YOUTUBE video ID |
Audio File | The path to the audio file. You need to have both extensions (.mp3 and .ogg) in order to work on all browsers and Operating Systems. The files should have the same name, the only difference would be the extension: the_audio_file.mp3 |
Self Hosted/Third Party Hosted Video | The path to the video file. You need to have both extensions (.mp4 and .webm) in order to work on all browsers and Operating Systems. The files should have the same name, the only difference would be the extension the_video_file.mp3 |
The shortcode is:
[multimedia_carousel settings_id='1']
where
settings_id is the slider ID defined in "Manage Carousels" section