WordPress Accordion Rotator

Image may be NSFW.
Clik here to view.“Welcome to our brand new WordPress plugin. Beautiful Accordion Slideshow will showcase your products or services in an impressive manner. A lot of cool features will help you adjust the slideshow to your web page.”

Live preview

SCREENSHOTS OF ADMIN PANEL:

Adding and editinig images is done in a way showed below. Changing order of images is done with drag and drop feature. Simply drag an image and drop it in a position you prefer. Settings of Accordion Slideshow can be changed in a manner showed on second image.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

SUPPORT

For any questions related to the plugin please visit our support forum.

If you ever come accross an idea about how to improve one of our plugins please post in in our support forum and we might make it happen.

QUICK GUIDE

When you unzip the files you just bought look for file wp-AccordionRotator.zip. Go to your WordPress admin panel and select “Plugins”. Click on button “Add new” and on next page click upload. Now browse for the zip file mentioned above and click Install now. All you have to do now is to activate the plugin. Settings for the plugin can be found under main settings of WordPress named WP Accordion Banner.

IMPLEMENTATION INTO WORDPRESS

You have two ways of implementing slideshow into wordpress. You can use shortode  ["AccordionRotator id=5 width=800 height=500"]  - remove ” when actually using it for implementation into posts or pages. ID  has to be unique and width and height should match those in settings. For implementation directly in code use < ?php echo wp_bannerFlash_short_php(5,800,500); ?> ID  has to be unique and width and height should match those in settings.

ADDING IMAGES

In WordPress go to Settings / WP Accordion Rotator. In upper menu click Add Image. You have many settings here that will help you set the image in the way you want. But first you have to upload the image. Clicking upload image will bring up WordPress form for media upload. Click Select files and search for your image. When image is ready click Insert  into post. Image is now set and ready to be used.

Now set title of the image. Simply enter in the field. Position of the title defines exact position along x coordinates for each image. This is just a fine setting to tune the exact position a bit.

Next you can select color for your title text. Simply choose a desired color from color picker.

Caption text is text that appears over image when you roll over slideshow and image appears. Select text just like for the title.

Next few settings define time each image is shown if you have auto slideshow, URL to which image points on click and whether image is clickable or not.

Following settings are all for appearance of text captions. You can set background color, transparency, type of transition, form, exact position, time of tween and easing.

SETTING ORDER OF IMAGES

In WordPress go to Settings / WP Accordion Rotator. In upper menu click All Images. To place an image into a different position simply grab it and then drag and drop it to a desired position. Order by can be done in seconds!

MAIN SETTINGS

In WordPress go to Settings / WP Accordion Rotator. In upper menu click Settings. Here you can define main settings for your slideshow.

Set width and height of your slideshow. Settings are pretty straightforward just remember that size of images have to follow these rules:

• height of the image should be the same as the height of the slideshow
• width of the image should follow this formula: width of slideshow – number of images * Width of thumbs. Width of thumbs represents width of all thumbs when you open the slideshow (if you have 5 images, when you open one, four are hidden and represented by thumbs – in our live preview width of thumb is 60 pixels)

In next field you can define thickness of the border around slideshow. Simply enter a numeric value to set your border width.

Gradient for your border can be defines with two colors that you set in next two fields. Simply choose them with color picker and your gradient will be set.

Border transparency can be a fun setting if you have a pattern background. Set it to something like 0.5 and  observe a nice effect. Values can range from 0 to 1.

One of the most intruiging feature can be set with next parameter. Roundness defines how round slideshow and images are. 0 means a square and 2000 would make an elipse. Slideshow is best viewed with values from 10 and 50.

You can set banner to be vertical or horizontal. Please note that image size have to be changed accordingly.

Width of thumbs represents width of all thumbs when you open the slideshow (if you have 5 images, when you open one, four are hidden and represented by thumbs – in our live preview width of thumb is 60 pixels).

You can also define preloader to your liking. Set exact position with X and Y coordinates and with color picker set the desired color.

If shadow of accordion is bothering you, simply disable it. Just set the value to false and it will disappear.

Banner can also be set to auto. Images will open and close every few seconds (you can set for each image how long it is opened).

DOCUMENTATION

When you unzip the files you just bought look for file wp-AccordionRotator.zip. Go to your WordPress admin panel and select “Plugins”. Click on button “Add new” and on next page click upload. Now browse for the zip file mentioned above and click Install now. All you have to do now is to activate the plugin. Settings for the plugin can be found under main settings of WordPress named WP Accordion Banner.

EDITING WORDPRESS SETTINGS:

• Width and Height – Set size of your accordion with this basic setting. This is exactly how big accordion will be on your webpage.
• Frame thickness – This setting defines how thick border around your accordion is. Simply enter a numerical value (size is in pixels). Value 0 means there is no boreder around accordion.
• Color of border – You have 2 colors from which you can build a gradient. Simply choose your colors with color picker. Simple 1 colored border can be achieved if you set both colors to the same value.
• Border transparency – Opacity of border can be set here. Value can be from 0 (invisible border) to 1 (fully visible border).
• Roundness of accordion – One of the most intruiging settings. Value can range from 0 (a square) to 2000 (elipse). Please note that elipse value requires a lot of title adjustment if you want ones. It is recommended you use eliptic form without title text for better viewing.
• Width of thumbs – This setting defines width of thumbs when image is opened. Setting this to 0 will make image open on whole stage and all other images will disappear. Disabling of title text is recommended when value is less then 30. Best viewed with values that range from 50 to 100.
• Position of preloader – Preloader can be moved anywhere you want. Simply change X and Y coordinates and move it accross the stage.
• Shadow of accordion – Shadow of accordion can be disabled. Simply enter value to false and shadow will dissappear.
• Auto Slideshow – Set if you wish accordion to be automatic (dynamic) or dependable on user (static).

ADDING IMAGE:

Adding new image is very simple through Admin panel. Below are settings that you have to provide to ensure image is added properly:

• Path do Image – Upload your image via WordPress upload form (in the end simply click Insert into post and path to image will be set). You can also provide a full path in the provided text field.
• Title of Image – This field sets title for your image.
• X position of Title – This moves title along X coordinate. This is used to adjust position of title to fit perfectly into different accordion sizes.
• Color of Title – Choose desired color for your title from a color picker.
• Clickable Image – Set to true if you wish your image to be clickable or false if you wish your images can not be clicked.
• Image External URL – Set URL that image points to on mouse click.
• Caption transition – Set transition of text caption. There are five different options of how text captions appear on stage.
• Transparency of caption background – Value from 0 (invisible) to 1 (fully visible)
• Position of text caption – Enter numerical values to set X and Y coordinates of text caption.
• Tween time of text caption – Defines how long animation of text caption appearing is.
• Easing of animation for text caption – There are six different easings available to spice up your text animations.
• Color of Text Shadow – Set the color of shadow for your text