Slideshow

(Difference between revisions)
Jump to: navigation, search
(Added code to show Rotating Text over Slideshow - Show Image OR Text OVER Slideshow)
(10 intermediate revisions by 2 users not shown)
Line 38: Line 38:
 
==Displaying Slideshow on your site==
 
==Displaying Slideshow on your site==
 
Slideshow can be added to your site using two different methods, widgets or shortcode.
 
Slideshow can be added to your site using two different methods, widgets or shortcode.
====Adding to a Widget====
+
====Widget====
 
Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the Slideshow widget into the widget area that you would like for it to display in and select the group from the drop-down menu that you would like to display.
 
Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the Slideshow widget into the widget area that you would like for it to display in and select the group from the drop-down menu that you would like to display.
 
====Shortcode====
 
====Shortcode====
 
The groups table in slideshow will display a shortcode for each different group that you have created. If you would like to add a Slideshow group to a post or page all you have to do is copy that shortcode and paste it the content of the page or post you would like for it to display in.
 
The groups table in slideshow will display a shortcode for each different group that you have created. If you would like to add a Slideshow group to a post or page all you have to do is copy that shortcode and paste it the content of the page or post you would like for it to display in.
  
 +
==Customize Slideshow==
 +
 +
====Extra Customizations Policies====
 +
[http://ithemes.com/codex/page/PluginBuddy#Extra_Customizations Check out the official policy and details on any Extra Customizations]
 +
 +
====Change Background Color of Caption Text====
 +
Put the following in your theme's CSS file at the very end, changing the color code example used here, #fd4507 which is red, to anything you wish:
 +
 +
<pre brush="css">
 +
.nivo-caption {
 +
background-color: #fd4507 !important;
 +
}
 +
</pre>
 +
*Related links:
 +
**http://ithemes.com/forum/index.php?/topic/18152-background-color/
 +
 +
====Show Image OR Text OVER Slideshow====
 +
You can also show images or texts ON TOP OF (over) a Slideshow so that the slides and the image/text blend in together.
 +
 +
Use the following template to add the necessary code to your theme's css file at the very end.
 +
<pre brush="css">
 +
#builder-module-4e738d2279b5e .builder-module-block { /* Shows any top area TEXT, that is in a widget ABOVE the Slideshow WIDGET< on top of the Slideshow. Change the module # to your own current module # */
 +
    position: absolute;
 +
    z-index: 2 ! important;
 +
}
 +
 +
#builder-module-4e738d2279b21 img { /* Positions the image in question from a certain Widget module right above the Slideshow. Change this module # to your own widget's module # */
 +
    padding-top: 30px ! important;
 +
    position: absolute;
 +
    z-index: 1 ! important;
 +
}
 +
#pb_slideshow_slider-1 .nivo-slice { /* Prevents the Slideshow transitions from hiding the overlapping text or image. This means NO MORE TRANSITIONS. This will also mean that the styling is applied to Slideshow numbered 1 (one) in your Slideshow admin area. The Slideshow shortcode will show you what number it is. */
 +
display: none;
 +
}
 +
</pre>
 +
 +
*Related link
 +
**http://ithemes.com/forum/index.php?/topic/18317-is-it-possible-to-have-slideshow-run-images-behind-header-title/#p86185
 +
 +
Another example is of using Rotating Text over a Slideshow with the following code:
 +
 +
<pre brush="css">
 +
#pb_slideshow_slider-1 {
 +
    z-index: 55;
 +
}
 +
.rotatingtext-wrapper { margin-bottom: -90px !important; z-index: 60;
 +
position: absolute !important;
 +
right: 820px;
 +
top: 350px;
 +
}
 +
</pre>
 +
 +
*Related link
 +
**http://ithemes.com/forum/index.php?/topic/20000-can-i-have-my-words-fly-into-image-in-a-plugin-buddy/
 +
 +
====Change/Remove Empty Space Under Slideshow OR Change Slideshow Height====
 +
 +
If you want, you can customize the height of your Slideshow so that it can also change or remove the empty space under Slideshows.
 +
 +
Use the following css styling template in your theme's css file:
 +
<pre brush="css">
 +
#builder-module-4e74d5b55108d .builder-module-block-outer-wrapper { /* This will change the entire Builder widget, in which the Slideshow is, to a height of 250px. Be sure to change the module # to your own current module # in question. You can change the 250px height to anything you want. */
 +
height: 250px !important;
 +
}
 +
</pre>
 +
 +
*Related link
 +
**http://ithemes.com/forum/index.php?/topic/18317-is-it-possible-to-have-slideshow-run-images-behind-header-title/#p86698
 +
 +
====Change or Remove Slideshow Shadows====
 +
 +
You can change OR remove the slideshow shadows, regardless of the Shadow settings in your Slideshow groups.
 +
 +
To remove the shadow completely, put the following in your theme's css file:
 +
 +
<pre brush="css">
 +
.nivoSlider {
 +
    -moz-box-shadow:0px 0px 0px #333 !important;
 +
    -webkit-box-shadow:0px 0px 0px #333 !important;
 +
    box-shadow:0px 0px 0px #333 !important;
 +
}
 +
</pre>
 +
 +
To change the color or size of the shadows instead of removing them, change the #333 to any other color, and the "0" to any number you want for the size of the shadow.
 +
 +
 +
*Related links
 +
**[http://www.webmonkey.com/2010/02/color_charts/ Color hex codes]
 +
**[http://ithemes.com/forum/index.php?/topic/19434-cannot-remove-shadow-around-slideshow/ Client shadow question and answer]
 +
 +
==FAQ==
 +
 +
====Absolute Links====
 +
Currently, you must use absolute links in Slideshow is order for them to be processed and to be shown.
 +
 +
For example, using <code>/support</code> will NOT work. However, <code>http://www.ithemes.com/support</code> will work.
  
 
==Additional Resources==
 
==Additional Resources==
 
# [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy]
 
# [http://pluginbuddy.com/free-wordpress-plugins/ Free Plugins by PluginBuddy]
 
 
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
 
# [http://pluginbuddy.com/tutorials/ PluginBuddy Tutorials]
 
# [http://pluginbuddy.com/ PluginBuddy.com]
 
# [http://pluginbuddy.com/ PluginBuddy.com]

Revision as of 17:00, November 11, 2011


Series: DisplayBuddy

Contents

Description

This plugin add the ability to display image slideshows anywhere on your site with fully customizable animated transitions and advanced effects. Slideshow has two different sliders that you can choose from, Slider and Cycle. Each slider has different animation effects and customizations.


Slider

The transitions for this mode focus on slicing up the image into multiple pieces and using those pieces for different transition effects.Since this mode focuses on slicing up the image for transition effects the settings for this mode also allow you to choose how many slices the image is divided into. This mode also offers the ability to display small thumbnail versions of the images in the group as pagination buttons that allow visitors to your site to easily control which image the slider is showing.

Animation transition effects

  • Randomly use different effects
  • Slice down
  • Slice down left
  • Slice up
  • Slice up left
  • Fold
  • Fade


Cycle

The transitions for this mode focuses on shuffling images around. This mode has many different effects to choose from, providing more options so that you can pick the effect that you like the best.

Animation transition effects

blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.


Groups

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.


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 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.

Displaybuddyselectimage.png


Displaying Slideshow on your site

Slideshow can be added to your site using two different methods, widgets or shortcode.

Widget

Navigate to the Widgets area under Appearance in the WordPress Admin area. Drag the Slideshow widget into the widget area that you would like for it to display in and select the group from the drop-down menu that you would like to display.

Shortcode

The groups table in slideshow will display a shortcode for each different group that you have created. If you would like to add a Slideshow group to a post or page all you have to do is copy that shortcode and paste it the content of the page or post you would like for it to display in.

Customize Slideshow

Extra Customizations Policies

Check out the official policy and details on any Extra Customizations

Change Background Color of Caption Text

Put the following in your theme's CSS file at the very end, changing the color code example used here, #fd4507 which is red, to anything you wish:

.nivo-caption {
background-color: #fd4507 !important;
}

Show Image OR Text OVER Slideshow

You can also show images or texts ON TOP OF (over) a Slideshow so that the slides and the image/text blend in together.

Use the following template to add the necessary code to your theme's css file at the very end.

#builder-module-4e738d2279b5e .builder-module-block { /* Shows any top area TEXT, that is in a widget ABOVE the Slideshow WIDGET< on top of the Slideshow. Change the module # to your own current module # */
     position: absolute;
     z-index: 2 ! important;
}

#builder-module-4e738d2279b21 img { /* Positions the image in question from a certain Widget module right above the Slideshow. Change this module # to your own widget's module # */
     padding-top: 30px ! important;
     position: absolute;
     z-index: 1 ! important;
}
#pb_slideshow_slider-1 .nivo-slice { /* Prevents the Slideshow transitions from hiding the overlapping text or image. This means NO MORE TRANSITIONS. This will also mean that the styling is applied to Slideshow numbered 1 (one) in your Slideshow admin area. The Slideshow shortcode will show you what number it is. */
display: none;
}

Another example is of using Rotating Text over a Slideshow with the following code:

#pb_slideshow_slider-1 {
     z-index: 55;
}
.rotatingtext-wrapper { margin-bottom: -90px !important; z-index: 60;
position: absolute !important;
right: 820px;
top: 350px;
}

Change/Remove Empty Space Under Slideshow OR Change Slideshow Height

If you want, you can customize the height of your Slideshow so that it can also change or remove the empty space under Slideshows.

Use the following css styling template in your theme's css file:

#builder-module-4e74d5b55108d .builder-module-block-outer-wrapper { /* This will change the entire Builder widget, in which the Slideshow is, to a height of 250px. Be sure to change the module # to your own current module # in question. You can change the 250px height to anything you want. */
height: 250px !important;
}

Change or Remove Slideshow Shadows

You can change OR remove the slideshow shadows, regardless of the Shadow settings in your Slideshow groups.

To remove the shadow completely, put the following in your theme's css file:

.nivoSlider {
    -moz-box-shadow:0px 0px 0px #333 !important;
    -webkit-box-shadow:0px 0px 0px #333 !important;
    box-shadow:0px 0px 0px #333 !important;
}

To change the color or size of the shadows instead of removing them, change the #333 to any other color, and the "0" to any number you want for the size of the shadow.


FAQ

Absolute Links

Currently, you must use absolute links in Slideshow is order for them to be processed and to be shown.

For example, using /support will NOT work. However, http://www.ithemes.com/support will work.

Additional Resources

  1. Free Plugins by PluginBuddy
  2. PluginBuddy Tutorials
  3. PluginBuddy.com
  4. Support Forums
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox