The following is a quick guide designed to show you the basic steps required to insert a slider into a wordpress pages. This giude is not designed to explain all options. Please refer to the other sections in this documets tab for an explanation of each individual setting & feature.
Global parameters are applied to all sliders and used to alter Estro behaviour on the whole site. Some of them (like skin or size) can be overwritten with a custom value on a per slider basis
| Parameter | Accepted values |
|---|---|
| Skin | Choose the component skin (can be overwritten in slider settings) |
| Size | Set default component size (can be overwritten in slider settings) |
| Advanced options | Display more advanced options for finer control - it will affect both global options and slider options |
| Lazy loading | If you have a lots of images, you can save user bandwidth and make page loads faster by using lazy loading for slide images. When working this way, each image will only be loaded when the relevant slide is about to be shown. |
| Tooltips | Show hide tooltips in admin area (requires page to be reloaded if changed) |
Slider parameters are applied to one slider only so any change in this section won't affect other defined sliders
| Parameter | Accepted values |
|---|---|
| ID | This value is used as shortcode parameter in order to select which slider to display |
| Title | Used only in admin area as descriptive text for your own convenience |
| Type | Set slider working mode (ken burns or swipe) |
| Controls | Controls behaviour & visibility of slider controls panel "always" always visible (default) "inner" inner controls "disabled" hidden "over" show only on mouse over "hideOnFirst" control panel shows at start, then auto hides after a few seconds, then works like "over" (above) |
| Auto pause | Pause/resume timer when mouse is over slider "image" pause when mouse over image (default) "controls" pause when mouse over controls "image,controls" pause when mouse over image or controls "none" never pause |
| Thumbnails | Controls slider button rollover thumbnail preview (additional per slide parameter needed for each slide, see next section) "enabled" display image with ken burns effect (default) "fixed" display fixed image "disabled" hidden |
| Size | Overrides global setting for this slider size |
| Shadow | Controls shadow visibility "enabled" display (default) "disabled" hidden |
| Skin | Override global setting for this slider skin |
| Logo tab | Controls logo tab visibility "enabled" display "disabled" hidden (default) |
| Logo link | Controls the link attached to the logo tab. Insert full url into this attribute. |
| Logo target | Controls whether the logo link opens in a new tab/window or in the current tab/window. "_self" opens in current tab/window (default) "_blank" opens in new blank tab/window |
This parameters are applied to a single slide (image)
| Parameter | Accepted values |
|---|---|
| BASIC OPTIONS | |
| Image | Slider image - you can either paste a full url in the field or click the big image on left to open media uploader and upload/select the image |
| Caption | Caption text (optional) |
| Delay | Time (in seconds) before next slide is loaded |
| Link | Slide link can be a youtube/vimeo video or url to image/page |
| Link type | Set the link type, use Video to make the slideshow play the movie inside slider frame
or new/same tab open the url as normal link in new/same table Type "lightbox" will add data-rel="lightbox-slide" to the link to allow lightbox integration |
| ADVANCED OPTIONS (Ken Burns mode) | |
| Zoom | Zoom mode, can be "in", "out" or "random" |
| Duration | Keen burn effect duration in seconds, default value is 15s (the higher the value, the slower the movement will be) |
| Start position | Image starting position |
| End position | Image ending position |
| ADVANCED OPTIONS (Swype mpde) | |
| Transition | Transition type, can be "fade", "swipe" or "flyBy" |
| ADVANCED OPTIONS (Video) | |
| Hd | Play high resolution video (if available) |
| Autoplay | Don't require user to pless play button on youtube/vimeo player |
| Autostart | Start video playback as soon as slide is loaded |
| Loop | Restart playback once finished |
Basic styling of elements like caption background, font used for titles or frame borders can be accomplished in a very simple way by adding a bunch of rules to your wordpress theme css. Estro comes with 4 skins so you'll need to add skin name to rules in order to customize styles for a give skin. All rules will be then prefixed with the
.peKenBurns.SKIN_NAME
selector, in the following example we'll assume changes are applied to "default" skin but you can replace ".default" with
".neutral" / ".neutral_light" / ".organic" to override other skins settings.
For example, to change slider frame border, you'll just add
/* set border size to 8px */
.peKenBurns.default .peKb_slides {
padding: 8px;
/* customize rounded border (not supported in ie < 9) */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
The border area can use a solid color or even a background image
.peKenBurns.default .peKb_slides {
background-color:#E0DEDF;
}
The inner frame is contained inside the border, it's like a default background for slider images (in fact, it has the same size)
.peKenBurns.default .peKb_slides .peKb_frame{
background-color:#000000;
}
The only thing you have to pay attention is to have these rules after component skin has been loaded, if that's not possible, you can use "!important" to make sure your customizations override default values. Captions styles are customized in the very same way: to change titles font
.peKenBurns.default .peKb_slides .peKb_caption h1 {
font-family: Arial;
font-size: 11px;
color: #FEFEFE;
}
Caption padding (which is space between title and caption background)
.peKenBurns.default .peKb_slides .peKb_caption .peKb_real{
padding: 10px;
}
Caption margin between caption background and slider border
.peKenBurns.default .peKb_slides .peKb_caption {
margin: 0px 5px 5px 5px;
}
Caption background color
.peKenBurns.default .peKb_slides .peKb_caption .peKb_background {
background-color: #202020;
}
Component use 2 custom filters which can be used to alter slider markup and add custom javascript code
| Name | Type | Description |
|---|---|---|
| pe_estro_slider_markup | filter | Applied to full slider html markup, can be used to alter/add/remove properties and tags |
| pe_estro_slider_customJS | filter | Executed right after slider markup has been generated. Filter gets id of the main markup container as parameter and must return valid javascript code which will be excecuted before plugin code. |
| $peEstroPlugin->the_slider($sliderID) | function | Can be called in your php code (like inside action hook) to show slider with ID = $sliderID |
Let's see how this filter can be used to integrate the slider with a jquery lightbox like prettyPhoto (other lightbox implementations can also be used)
function my_estro_slider_markup($markup) {
/*
Replace
data-rel="lightbox-slide"
with
rel="prettyPhoto"
*/
return strtr($markup,array('data-rel="lightbox-slide"'=>'rel="prettyPhoto"'));
}
add_filter("pe_estro_slider_markup","my_estro_slider_markup");
function my_estro_slider_customJS($id) {
/*
Add custom javascript code which will be executed before initializing the plugin
Code is placed inside a script tag right after slider markup which can be accessed/modified using
jQuery("$id")
the example shows how you can integrate with prettyPhoto
*/
return <<<EOL
jQuery("$id a[rel='prettyPhoto']").prettyPhoto()
alert("$id");
EOL;
}
add_filter("pe_estro_slider_customJS","my_estro_slider_customJS");
Once again, thank you so much for purchasing this item. If the above help documentation has not answered your questions, the following are your options:
regards, pixelentity