Carousel

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{#ev:youtube|P41kZYE9Vg8|400|right}}
+
__NOTOC__
'''Series:''' [[DisplayBuddy]]
+
==Description==
+
Carousel lets you display a rotating set of images anywhere on your site with customizable content and effects. Multiple groups of images may be created for use anywhere on your site. Each group can be fully customized.
+
  
 +
[[File:Carousel300b.png|Carousel300b.png|300px|link=|right]]
  
==Groups==
+
'''Carousel''' lets you display a rotating set of images anywhere on your site with customizable content and effects. Multiple groups of images may be created for use anywhere on your site. Each group can be fully customized.
Carousel has the ability to save multiple groups that can each have different images and settings. The only information required to create a group is a group name.
+
  
 +
{{#ev:youtube|P41kZYE9Vg8|400|right}}
  
==Adding Images==
+
<div class="exchange-home-list">
In order to add images you will need to select a group then adjust the "Slide Image Dimensions" width and height so that the Carousel plugin will know what dimensions it will need to resize the images to. After saving the desired image dimensions then you can add an image by clicking the "+Add image" button. Carousel uses WordPress's built in media up-loader. This will allow you to either upload new images or select images that you have already added to the media library. In order to select an image to add from the list of images click the "show" link for that image and then click the "select this image" button as shown in the image below.
+
==Carousel Basics== __NOEDITSECTION__
 +
*[[Carousel_Groups|Groups]]
 +
*[[Carousel_Adding_Images|Adding Images]]
 +
*[[Carousel_Settings|Settings]]
 +
</div>
  
[[File:Displaybuddyselectimage.png|408px]]
+
<div class="exchange-home-list">
 +
==FAQs== __NOEDITSECTION__
 +
*[[How_Can_I_Move_the Arrows_from_Overlapping_the_Carousel?|How Can I Move the Arrows from Overlapping the Carousel?]]
 +
*[[The_Carousel_Container_is_Too_Large_Until_the_Page_Finishes_Loading._How_Do_I_Fix_This?|The Carousel container is too large until the page finishes loading. How do I fix this?]]
 +
*[[Is_It_Possible_to_Open_Linked_Full_Sized_Images_in_a_Lightbox?|Is it possible to open linked full sized images in a lightbox?]]
 +
*[[Can_I_Have_Email_Links_INSTEAD_of_URL_Links_for_Carousel?|Can I have email links INSTEAD of URL links for Carousel?]]
 +
</div>
  
 +
<div class="exchange-home-list">
 +
==Customize Carousel== __NOEDITSECTION__
 +
*[[Extra_Customizations|Official policy and details on any Extra Customizations]]
 +
*[[Customize_Carousel_Dimensions_and_Placements_via_CSS|Customize Carousel Dimensions and Placements via CSS]]
 +
*[[Replace_Navigation_Images_with_Custom_Images|Replace navigation images with custom images]]
 +
*[[Align_Images_Between_Navigation_Arrows|Align Images Between Navigation Arrows]]
 +
</div>
  
==Settings==
+
<div class="exchange-home-list">
Here is a list of all of the Carousel settings and a description of what each setting controls.
+
 
+
'''Group Title''' - This setting will allow you to change the title of the group at any time.
+
 
+
'''Carousel orientation and direction''' - This will change which direction the images slide.
+
 
+
'''Horizontal Alignment''' - This controls the horizontal alignment of Carousel on a page.
+
 
+
'''Entity width''' - This option is used to set the width of the entire Carousel container.
+
 
+
'''Images to show at once''' - This sets the amount of images to display at one time. If the entity isn't wide enough to show all of the images then it will hide any images that extend outside that width.
+
 
+
'''Scroll duration''' - This determines how long the scroll transition will last in milliseconds.
+
 
+
'''Pause duration''' - This is the amount of time that Carousel will pause in between each automatic transition.
+
 
+
'''Start delay''' - The amount of time after the page loads before a transition will happen.
+
 
+
'''Pause on hover''' - Option to pause transitions if a visitor hovers their mouse over Carousel.
+
 
+
'''Randomize image order each page load''' - Option to randomize the order that the images are displayed in each time the page loads.
+
 
+
'''Circular loop''' - When the carousel transitions to the end of the images it automatically transitions back to the beginning image.
+
 
+
'''Inifinite''' - Set whether carousel infinitely loops through the images continuously transitioning through them.
+
 
+
'''Display navigation''' - Option to display buttons that allow visitors to manually control the transitions.
+
 
+
'''Display pagination''' - Option to display pagination for each of the transitions below the Carousel.
+
 
+
 
+
==FAQ==
+
===How can I move the arrows from overlapping the Carousel?===
+
 
+
The CSS styling below can be added to your theme's style.css. Adjust the -60 and -70 pixel values as needed.
+
 
+
To apply the change to all Carousels:
+
<pre class="brush:html">
+
a.pb_carousel_default_prev {
+
  left: -60px !important;
+
}
+
a.pb_carousel_default_next {
+
  right: -70px !important;
+
}
+
</pre>
+
 
+
To apply the change to an individual Carousel (replace the 1 with the specific entity you want to style):
+
<pre class="brush:html">
+
#pb_carousel_prev-1 {
+
  left: -60px !important;
+
}
+
#pb_carousel_next-1 {
+
  right: -70px !important;
+
}
+
</pre>
+
 
+
===The Carousel container is too large until the page finishes loading. How do I fix this?===
+
 
+
The CSS styling below will cap the height of the Carousel so that overflowing content will not show before the page is done loading. Change the 75 to your desired height:
+
<pre class="brush:html">
+
#pb_carousel-1 {
+
  height: 75px;
+
  overflow: hidden;
+
}
+
</pre>
+
 
+
===Is it possible to open linked full sized images in a lightbox?===
+
 
+
Yes. Use [http://www.semiologic.com/software/auto-thickbox/ Auto Thickbox] plugin.
+
 
+
Source: http://ithemes.com/forum/index.php?/topic/14059-expand-image-on-carousel/#p67840
+
 
+
 
==Additional Resources==
 
==Additional Resources==
# [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy]
+
*[http://ithemes.com/free-wordpress-plugins/ Free Plugins by iThemes]
 
+
*[http://ithemes.com/tutorials/ iThemes Tutorials]
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
+
*[http://ithemes.com/ iThemes.com]
# [http://pluginbuddy.com/ PluginBuddy.com]
+
*[http://ithemes.com/forum/ Support Forums]
# [http://pluginbuddy.com/support/ Support Forums]
+
</div>
  
[[Category:PluginBuddy]]
+
<br />
 +
[[:Plugins|← Back to Plugins Codex Home]]

Latest revision as of 16:52, July 24, 2013


Carousel300b.png

Carousel lets you display a rotating set of images anywhere on your site with customizable content and effects. Multiple groups of images may be created for use anywhere on your site. Each group can be fully customized.


Carousel Basics


← Back to Plugins Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox