Carousel - Revision history

Bes: Added /* Can I have email links INSTEAD of url links for Carousel? */

2011-11-01T19:08:34Z

Added - Can I have email links INSTEAD of url links for Carousel?

Bes: Fixed spelling - from "Check our the" to "Check out the" /* Extra Customizations Policies */

2011-10-13T17:43:14Z

Fixed spelling - from "Check our the" to "Check out the" - Extra Customizations Policies

Bes: Added /* Replace navigation images with custom images */ and "Align Images between Navigation Arrows" sub-sections

2011-09-23T02:40:54Z

Added - Replace navigation images with custom images: and "Align Images between Navigation Arrows" sub-sections

Bes: Added Related link to /* Customize Carousel Dimensions and Placements via CSS */

2011-09-19T20:12:20Z

Added Related link to - Customize Carousel Dimensions and Placements via CSS

Bes: Added info to add the CSS to the theme's css file at the very end /* Customize Carousel */

2011-09-19T20:08:52Z

Added info to add the CSS to the theme's css file at the very end - Customize Carousel

Bes: Created /* Customize Carousel */ section with "Extra Customizations Policies" and "Customize Carousel Dimensions and Placements via CSS" sub-sections

2011-09-19T20:06:47Z

Created - Customize Carousel: section with "Extra Customizations Policies" and "Customize Carousel Dimensions and Placements via CSS" sub-sections

Skylermoore at 21:33, June 15, 2011

2011-06-15T21:33:16Z

Skylermoore at 21:29, June 15, 2011

2011-06-15T21:29:16Z

Skylermoore at 20:41, June 15, 2011

2011-06-15T20:41:25Z

Skylermoore at 20:38, June 15, 2011

2011-06-15T20:38:39Z

← Older revision		Revision as of 19:08, November 1, 2011
Line 87:		Line 87:

	Source: http://ithemes.com/forum/index.php?/topic/14059-expand-image-on-carousel/#p67840		Source: http://ithemes.com/forum/index.php?/topic/14059-expand-image-on-carousel/#p67840
		+
		+	===Can I have email links INSTEAD of url links for Carousel?===
		+
		+	You may want your Carousel images (or certain groups/images) to be email links, so that people can send emails. That is easily done by putting the following (changing '''email@email.com''' to YOUR email) in the '''LINK''' field for the Carousel image in question:
		+
		+	<pre code="html">mailto:email@email.com</pre>
		+
		+	That's it! Now your Carousel image will be an email '''mailto''' link.
		+
		+	*Related forum thread
		+	**http://ithemes.com/forum/index.php?/topic/19762-linking-images-in-carousel/

	==Customize Carousel==		==Customize Carousel==

@@ Line 91: / Line 91: @@
 ====Extra Customizations Policies====
-[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check our the official policy and details on any Extra Customizations]
+[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check out the official policy and details on any Extra Customizations]
 ====Customize Carousel Dimensions and Placements via CSS====

@@ Line 130: / Line 130: @@
 *Related link
 **http://ithemes.com/forum/index.php?/topic/18392-images-part-revealed/#p86475
 ==Additional Resources==

@@ Line 127: / Line 127: @@
+}
 </pre>
 ==Additional Resources==

@@ Line 96: / Line 96: @@
 Sometimes, Carousel shows everything properly BUT your image dimensions may result in more or fewer images being shown. This can be fixed by selecting the proper size or number of images.
-You can also customize the entire Carousel Display via CSS. The following CSS code template can be used to customized to your own needs.
+You can also customize the entire Carousel Display via CSS. The following CSS code template can be used to customized to your own needs. You need to add this css to your theme's css file at the very end.
 *Remember: the following will change the styling for ALL Carousels on your site EXCEPT the first <code>#pb_carousel-1</code> part, which (only that part) will work only on the 1st Carousel (Carousel whose shortcode is 1).
@@ Line 127: / Line 127: @@
+}
 </pre>
 ==Additional Resources==

← Older revision		Revision as of 20:06, September 19, 2011
Line 87:		Line 87:

	Source: http://ithemes.com/forum/index.php?/topic/14059-expand-image-on-carousel/#p67840		Source: http://ithemes.com/forum/index.php?/topic/14059-expand-image-on-carousel/#p67840
		+
		+	==Customize Carousel==
		+
		+	====Extra Customizations Policies====
		+	[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check our the official policy and details on any Extra Customizations]
		+
		+	====Customize Carousel Dimensions and Placements via CSS====
		+	Sometimes, Carousel shows everything properly BUT your image dimensions may result in more or fewer images being shown. This can be fixed by selecting the proper size or number of images.
		+
		+	You can also customize the entire Carousel Display via CSS. The following CSS code template can be used to customized to your own needs.
		+
		+	*Remember: the following will change the styling for ALL Carousels on your site EXCEPT the first <code>#pb_carousel-1</code> part, which (only that part) will work only on the 1st Carousel (Carousel whose shortcode is 1).
		+
		+	<pre brush"css">
		+	#pb_carousel-1 { /* Controls the actual Carousel in question. In this example, it is Carousel 1. You can find the Carousel number in the shortcode in your Carousel admin panel */
		+	left: 90px ! important;
		+	width: 960px ! important;
		+	}
		+
		+	.pb_carousel_default { /* Controls the width of the actual Carousel - this is usually always changed, if you want, with the actual Carousel */
		+	width: 960px ! important;
		+	}
		+
		+	.caroufredsel_wrapper #pb_carousel-1 { /* controls the entire Carousel wrapper */
		+	width: 960px ! important;
		+	}
		+
		+	#pb_carousel_prev-1 { /* controls the Carousel's previous left button */
		+	left: 30px;
		+	top: 65px;
		+	}
		+
		+	#pb_carousel_next-1 { /* controls the Carousel's next right button */
		+	right: 30px;
		+	top: 65px;
		+	}
		+	#pb_carousel_pag-1 { /* controls the Carousel's bottom navigational buttons */
		+	margin-top: 10px !important;
		+	}
		+	</pre>
		+

	==Additional Resources==		==Additional Resources==

@@ Line 10: / Line 10: @@
 ==Adding Images==
-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 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.
 [[File:Displaybuddyselectimage.png|408px]]

← Older revision		Revision as of 21:29, June 15, 2011
Line 12:		Line 12:
	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 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.

−	[[File:~~Medialibraryup~~.png\|408px]]	+	[[File:Displaybuddyselectimage.png\|408px]]

@@ Line 1: / Line 1: @@
-[[File:Displaybuddy200.png|right]]
+{{#ev:youtube|P41kZYE9Vg8|400|right}}
 '''Series:''' [[DisplayBuddy]]
 ==Description==
@@ Line 46: / Line 46: @@
 '''Display pagination''' - Option to display pagination for each of the transitions below the Carousel.
 ==FAQ==

@@ Line 17: / Line 17: @@
 ==Settings==
 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.