Rotating Images

Features

  • Unlimited Rotating Images Groups — Create and add settings to multiple image groups with multiple image entries.
  • Fade Animation with Customizable Settings — Enable fade animation to images for a smooth transition and set fade options including image sort order, display time in seconds and length of time to fade each image
  • Text Overlay — Add text overlays to images with options for font family, size and color.
  • Linkable Entries — Optionally add URLs to image entries

Rotating Image Basics

Groups

The first step to adding Rotating Images to your site is to a group to store the images you wish to display. The link to Rotating Images in the WordPress admin area is in the DisplayBuddy section of the menu. When you click the Rotating Images link it will direct you to the area where you can create a group.

Group Settings

  • Group Name - This where you name your group of images.
  • Rotating Images Width - This controls the width of the images you upload into your Rotating Images group. Images will be generated from the original images uploaded. Images will not be upscaled larger than the originals. You may change this at anytime.
  • Rotating Images Width - This controls the height of the images you upload into your Rotating Images group. Images will be generated from the original images uploaded. Images will not be upscaled larger than the originals. You may change this at anytime.
  • Enable Fade Animation - This setting will enable the fade transition. You can edit the fade options on the edit group page.
  • Enable Responiveness - This setting will make Rotating Images responsive.
  • Enable Text Overlay - When enabling this setting you can setup a text overlay for your Rotating Images slider in the groups edit page.

Add New Image

  • Image - This is where you select the images you want to use.
  • Link URL - This is where you insert an URL for a link.

Rotating Images Settings

  • Default URL - This is the default link that will be used if an image doesn't have a URL.
  • Open URL in New Tab/Window - When clicking a linked image it will now open in a new window
  • Center in Display Area - This setting will center your Rotating Images slider inside the area where you are displaying it.

Fade Options

  • Image Sort Order - This setting will change the order of the images in the slideshow
  • Image Display Time - Length of time to display each image in seconds.
  • Image Transition Delay - Length of time to fade in seconds.
  • Enable Sliding Effect - Overrides display and fade times. Original images must be larger than configured dimensions to function properly.
  • Double Fade Transparent Images - When using images with transparency, this can fix problems with one image showing through and changing suddenly. Only use if needed.

Overlay Options

  • Text Horizontal Alignment - Horizontal alignment of overlay text.
  • Text Vertical Posistion - Vertical alignment of overlay text.
  • Text Padding in Pixels - Padding for text overlay.
  • Overlay Header Text - Header Text for the Rotating Images overlay
  • Header Text Size - Size of header text overlay in pixels.
  • Header Text Color - Color of header text overlay
  • Header Text Font Family - Font of header text overlay(leave blank for default).
  • Overlay Subheader Text - Subheader text for the Rotating Images overlay.
  • Subheader Text Size - Size of subheader text overlay in pixels.
  • Subheader Text Color - Color of subheader text overlay.
  • Subheader Text Font Family - Font of subheader text overlay(leave blank for default).

FAQs

Images other than first appear lower (or smaller in height) in spite of actually being the same size.

Add the following at the end of your theme's style.css:

#rotating-images-rotator_1 img {
   margin-top: 0;
} 

If you add additional rotating image groups you may need to change the 1 above to 2, 3, 4 and so on for each instance.

For an explanation, see http://ithemes.com/forum/index.php?/topic/3935-image-size-changes-despite-images-being-same-size/

Update : If the above CSS code doesn't work, use the following:

#ithemesrotatingimages-1 img {
   margin-top: 0;
}

Source: http://ithemes.com/forum/index.php?/topic/8989-rotating-images-position-bug/#p44454

Remove Top Margin in the Image Rotator

Add the following to your theme's css file

#rotating-images-rotator_1 img {
    margin-top: 0;
} 
Have more questions? Submit a request
Powered by Zendesk