Carousel

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Added "Is it possible to open linked full sized images in a lightbox?")
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''Series:''' [[DisplayBuddy]]
+
__NOTOC__
  
'''Release date:''' October 26, 2010
+
[[File:Carousel300b.png|Carousel300b.png|300px|link=|right]]
  
==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.
  
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.
+
{{#ev:youtube|P41kZYE9Vg8|400|right}}
  
==Features==
+
<div class="exchange-home-list">
* Display multiple images at once.
+
==Carousel Basics== __NOEDITSECTION__
* Horizontal & vertical modes.
+
*[[Carousel_Groups|Groups]]
* Two optional navigation methods.
+
*[[Carousel_Adding_Images|Adding Images]]
* Optional automatic transitioning.
+
*[[Carousel_Settings|Settings]]
* Upload images or use existing Media Library images.
+
</div>
* Customizable image size.
+
* Some Carousel options include:
+
** Pause on hover.
+
** Bullet navigation.
+
** Full speed control.
+
** Navigation arrows.
+
* Unlimited Carousel groups.
+
* Widget support.
+
* Shortcode support.
+
* Support for changing layouts. More coming soon.
+
* Customizable animation speeds.
+
* Automatic upgrades.
+
  
==FAQ==
+
<div class="exchange-home-list">
===How can I move the arrows from overlapping the Carousel?===
+
==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>
  
The CSS styling below can be added to your theme's style.css. Adjust the -60 and -70 pixel values as needed.
+
<div class="exchange-home-list">
 
+
==Customize Carousel== __NOEDITSECTION__
To apply the change to all Carousels:
+
*[[Extra_Customizations|Official policy and details on any Extra Customizations]]
<pre class="brush:html">
+
*[[Customize_Carousel_Dimensions_and_Placements_via_CSS|Customize Carousel Dimensions and Placements via CSS]]
a.pb_carousel_default_prev {
+
*[[Replace_Navigation_Images_with_Custom_Images|Replace navigation images with custom images]]
  left: -60px !important;
+
*[[Align_Images_Between_Navigation_Arrows|Align Images Between Navigation Arrows]]
}
+
</div>
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
+
  
 +
<div class="exchange-home-list">
 
==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 17: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