### Table of Contents

1. Quick Setup
2. Global parameters
3. Slider parameters
4. Per slide paramaters
5. CSS Styling - Skins
6. Filters / hooks / public functions

### A. Quick Setup - top

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.

1. In the "General" tab, first select the skin for your slider
2. Set the desired width and height of your slider in pixels.
3. Click the "New Slider" button to create the slider - this will take you to the "Edit Slider" tab. (see below)

4. In the "Edit Slider" tab, set a unique ID for the slider (optional - an ID will be assigned automatically)
5. Give the slider a name and select the slider type - "Ken Burns" or "Swipe"
6. Next you need to insert a slide by clicking the "Add Slide" button.
7. You will see a new slide item has been added to the user interface. Click the box to upload an image in the normal way, then click "Insert into Post" in the wordpress media uploader.
8. Once the slide has been inserted, you will need to save your changes by clicking the "Save" button.

9. Next switch to the "Sliders" tab and locate your slider in the displayed list. If you have more than one slider they will be displayed here.
10. Now in order to insert the slider into your page, you will need a shortcode. To get this shortcode, click the shortcode icon on your slider and the code will be displayed. The shortcode will be highlighted and ready to be copied to the clipboard by pressing Ctrl + C (Cmd + C on the Mac). Now in the Wordpress page editor simply paste this shortcode where you would like the slider to appear.

### B. Global parameters - top

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)

### C. Slider parameters - top

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

### D. Per slide paramaters - top

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

### E. Basic Styling - Frame & Captions - top

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;
    }

### F Filters / hooks / public functions - top

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");

### Thank You! - top

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:

1. Go to the component's sales page on CodeCanyon.net, more specifically the discussion page, and read through the questions left there by other buyers. In general buyers tend to have similar questions, and if this is the case, then your questions is likely to have already been answered there.
2. If an answer to your question cannot be found on the discussion tab, feel free to leave a comment of your own. Be sure to describe your problem in as much detail as possible and we will get back to you as soon as we can.
3. Generally it is best to use the discussion tab to ask questions because when these are answered other buyers can read the answers and this avoids senseless repetition on our behalf. However if your questions deals with a sensitive issue, such as a quotation for customisation work, or a link to a demo site which you would not like to be public, then you may contact us using the email address at the top of this help file.

regards, pixelentity

Go To Table of Contents