Created: 19/04/2011
By: pixelentity
Profile: Themeforest
Thank you for purchasing our component. If you have any questions that are beyond the scope of this help file, please feel free to email us via our Envato profile page contact form here. Thanks.
Copy or upload the js/pe.kenburns folder somewhere onto your server, for example into the top level "js" folder. To save space, you can remove the "src" sub folder which is only needed if you wish to modify the javascript source code.
Include the following javascript and css code into HEAD section of the page
<!-- skin stylesheet --> <link rel="stylesheet" href="js/pe.kenburns/themes/default/skin.min.css" /> <!-- jQuery --> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <!-- Ken burns slider plugin --> <script type="text/javascript" src="js/pe.kenburns/jquery.pixelentity.kenburnsSlider.min.js" /></script>
Create HTML markup for slides into BODY section of the HTML page.
Set the slider size by adding the following CSS into the HEAD section of the HTML page.
Activate the plugin once the document is ready by placing the following into the HEAD section of the HTML page.
<script> jQuery(function($){ $(".peKenBurns").peKenburnsSlider() }) </script>
This component uses unobtrusive javascript to transform a block of html markup into a slider, all customization is done trough the use of HTML5 data attributes. The markup validates for HTML5 rules, while the content will also be fully indexed by search engines. The slider may be customised by altering the default values of several parameters, some of which are global while other can be changed on per slide basis. The general structure of markup follows this schema.
The first parent div is the container which will be substitute by the slider once javascript code is run
the class="peKenBurns" is needed because it will apply some CSS rules which will prevent your page layout from breaking
if user has javascript turned off.
The "peKb_active" class controls which slides would be visible if javascript is turned off.
Caption can be defined using "h1", "h2", "h3", "h4" or "p" tag
To size the slider, all that is needed is a CSS rule for the class "peKenBurns", as can be seen here below.
This CSS rule will set slider size to 920px in width and 400px in height. In general the main div is assigned the global parameters (we'll see them on upcoming sections) and contains the individual slides for the slider. Each slide is defined inside this main div as a separate div which contains an image and a caption (h1) Captions are not mandatory. As we'll see in a moment, even if captions are added into the HTML markup as seen above (h1 tags), there is a global parameter which allows you to turn them on or off for all slides. If captions are only required on some slider and not on others, this can be achieved by removing the HTML markup on those slides which do not require a caption.
Global parameters are applied to the main div and allows the slider behaviour to be changed. Multiple sliders may be inserted into a single HTML page and so using these global parameters, each slider can be assigned different parameters to control how it works. These global parameters are defined using custom data-attributes which are valid HTML5 but ignored by your browser so they won't interfere with the HTML page rendering. Below is an example of the available global parameters and their accepted values. Remember all global parameters are set on the main parent div, the div with a class of "peKenBurns".
Parameter | Accepted values |
---|---|
data-mode | set slider working mode, it can be a value from "kb" keen burns mode (default) "swipe" swipe mode |
data-logo | controls logo tab visibility "enabled" display "disabled" hidden (default) |
data-logo-link | controls the link attached to the logo tab. Insert full url into this attribute. |
data-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 |
data-shadow | controls shadow visibility "enabled" display (default) "disabled" hidden |
data-thumb | 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 |
data-controls | controls behaviour & visibility of slider controls panel "always" always visible (default) "inner" *NEW* 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) |
data-autopause | 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 |
If a global parameter does not feature inside the main div's tag, meaning it has not been added, then it is the same as setting the parameter to its default value. See above for each parameters default value. This allows for cleaner HTML markup if customisation of only 1 or 2 parameters or elements are required.
These parameters are added on to a slide's div tag. Shown below is an example of the available per slide parameters and their accepted values.
Parameter | Accepted values |
---|---|
data-delay | time (in seconds) before next slide is loaded |
data-thumb | thumbnail img url for thumb preview |
KEN BURNS PARAMETERS (when data-mode="kb") | |
data-duration | keen burn effect duration in seconds, default value is 15s (the higher the value, the slower the movement will be) |
data-zoom | zoom mode, can be "in", "out" or "random" |
data-align | image alignment, in the form "vertical, horizontal" where vertical can be "top" "center" or "bottom" horizontal can be "left" "center" or "right" examples: "top,left" , "center,center" , "bottom,right" also data-align="random" is available |
data-pan | controls image panning direction, in the form "vertical, horizontal" where vertical can be "top" "center" or "bottom" horizontal can be "left" "center" or "right" examples: "top,left" , "center,center" , "bottom,right" During the Ken Burns effect transition, the image will move from the position set at "data-align" to the position set at "data-pan". |
SWIPE PARAMETERS (when data-mode="swipe") | |
data-transition | transition type, can be "fade", "swipe" or "flyBy" |
If you have a lots of images, you can save user bandwidth and make page loads faster by using lazy loading for slides images. When working this way, each image will only be loaded when the relevant slide is about to be shown. Lazy loading is a per image setting. To enable it you will need to set the "src" attribute to "blank.png" image and set (found in download package - 1px x 1px blank png file) the real url of the image in the "data-src" attribute as shown here below.
Each slide image can be linked to a youtube/vimeo video (which will playback in slider frame if browser supports flash) or external resource link like another HTML page. A video is inserted into a slide by wrapping the slide's image in an anchor "a" tag as follows:
The above example shows an inserted Vimeo video. Notice the video's url is placed into the "href" attribute, the "a" tag's class is set to
"video" to make the slider aware that the link is a video. If a "video" class is not added to the "a" tag, the url will be opened like a normal
link once the user clicks the image.
Additional classes like "hd", "skiptonext", "autostart" and "loop" may be added as options
to the "video" tag in order to control the video's behaviour.
The new option "skiptonext", when set, cause the slider to autojump to next slide when video playback ends; since it uses Youtube / Vimeo latest APIs (which are still marked as experimental), it's not guaranteed to work in every browsers (it fails on ie7 for example).
To insert a Youtube video into a slide you can use the very same syntax as shown above. The only difference is the youtube video link is
inserted into the "href" attribute instead of the vimeo link.
In the case where flash is not available on the user's machine to play this inserted videos (Some mobile devices) then the user is redirected
automatically to YouTube or Vimeo to their HTML5 version of the video Players. Alternatively on Apple's iOS running devices, if a native
YouTube application is available on the device this will automatically open and launch a linked YouTube video.
This component includes an additional custom mode which is meant to work as image effect activated on mouse over. This mode can be seen in demonstration number 5 on the item's sales/preview page. This mode consists of each target image being turned into a separate ken burns mini slider which has a single image and a looping transition effect. For this effect you do not need to use the full markup code as shown in the other examples in this document. Instead all you need is to give each image a class name of "peKbGallery" (In this example its "peKbGallery" but it may be anything as long as the class name in the javascript code shown below is the same)
Next the following code much be inserted into the HEAD section of the HTML page.
<script> jQuery(function($){ $(".peKbGallery").peKenburnsSlider() }) </script>
In the HTML code shown above, the "alt" attribute is used to set optional caption text, the "data-delay" attribute defines the length of time before the Ken Burns transition loops, in such case that the user leaves the mouse pointer hovering over the image for an extended period of time. This custom mode may also be integrated with a lightbox plugin. Here we have used the PrettyPhoto plugin. Basically the image is wrapped in an anchor tag "a" and this tag's "href" attribute defines the path to the large image which will be shown in the lightbox once the user clicks the Ken Burns item.
This component has been designed to allow the use of external custom fonts, specifically Google web fonts. If you set the CSS style rules so that the captions use these external font, then you will probably want the slider to be aware of this, because depending on the custom font used, the slider may need to recalculate the width of the caption text once the external fonts are loaded. (to correctly calculate the caption's background size and the caption position) This can be done when initializing the plugin as shown below:
<script> jQuery(function($){ $(".peKenBurns").peKenburnsSlider({externalFont:true}) }) </script>
Once externalFont is set to true (as above), the captions will not be displayed until the slider has been informed that all fonts have been loaded. This can be done easily by adding the following lines below the above plugin initializing code in the HEAD section of the HTML page.
<script> jQuery(window).load(function() { $(".peKenBurns").each(function() { $(this).data("peKenburnsSlider").fontsLoaded() }) }) </script>
The slider offers a public API which you can use to control component inside the Slider from within your own scripts. To access this api, use the following code.
Once this is done you may use any of the following functions:
Method | Description |
---|---|
api.pause() | pause the timer (and current ken burns if data-mode="kb") |
api.resume() | resume the timer (and current ken burns if data-mode="kb") |
api.pauseTimer() | pause the timer |
api.resumeTimer() | resume the timer |
api.prev() | jump to previous slide |
api.next() | jump to next slide |
api.show(n) | jump to n° slide where n = 1 .. number of slides |
api.length() | returns number of slides |
Because this component is a plugin and has been designed to use interchangable skins, the organisation of the css stylesheets is a little different than that of a normal website or template. This component uses one stylesheet to control it's layout, margins, padding, heirarchy and basically everything which is not to do with how the item looks on the surface. By this I mean, the colors, buttons, radius of rounded corners, border styles etc. These are all specified in a separate CSS stylesheet, because these are related to the component's skin. The benefits of this organisation is that the skin stylesheet can then be replaced with a new skin stylesheet and the whole look of the component can therefore be easily changed, without having to worry about upsetting the underlying CSS structure of the component.
It is important that the folder structure of this component is maintained. All CSS information for the component is contained inside the "themes" folder. Inside the folder is the "common.css" file and then a subfolder for each skin. Each one of these subfolders contains a separate skin stylesheet and an "img" folder. This folder contains all the images which are specific to that skin.
Stylesheet | Description |
---|---|
themes/common.css | Controls all CSS layout structure, spacing, positioning for the component & it's controls. |
themes/default/style.css | Controls the external look of the "default" theme or skin. This includes the buttons, background images, colors, patterns. |
This component included 4 skins which can be easily applied to change the look of the slider. These skins can be found in the "themes" folder which is located at: "js/pe.kenburns/". These 4 skins are mentioned here below. you will find the 4 included skins of this component. These are "pixelentityAs a result of this method of CSS organisation, these separate stylesheets
Skin Name | Description |
---|---|
Pixelentity (default) | Seen in demo 1 on the CodeCanyon item preview, this skin consists of light controls with blue highlights. |
Light (neutral light) | This skin consists of neutral momotones to suit almost any color scheme. |
Dark (neutral) | This skin also consists of neutral momotones but is a lot darker than the above skin. |
Organic (Custom) | This is an example which has been include to show the potential for creating custom skins for this component. |
Basic styling of elements like caption background, font used for titles or frame borders doesn't require you to create a custom skin. Those changes can be accomplished in a very simple way by adding a bunch of css rules: to change slider frame border, you'll just add
The border area can use a solid color or even a background image
The inner frame is contained inside the border, it's like a default background for slider images (in fact, it has the same size)
The only thing you have to pay attention is to place these rules after component skin has been loaded, it can be another style sheet or even a <style> area placed at the end of the page HEAD section Captions styles are customized in the very same way: to change titles font
Caption padding (which is space between title and caption background)
Caption margin between caption background and slider border
Caption background color
This section will outline the various steps which need to be taken in order to create a custom skin for this component.
The first item which need to be modified is the stylesheet referencing within the head section of the HTML page. This component's total standard CSS information has been compressed once development was completed. The reason for this is to ensure speedy page loading when this plugin is being used. However if a custom skin is to be used, the stylesheets must be inserted separately and the compressed (minified) stylesheets removed. See the following code snipped for an example of the before and after views of the HTML page's HEAD section.
BEFORE
AFTER
"yourCustomTheme" being the name of the folder containing your new skin's "style.css" file and the "img" folder for your new images. While "yourGeneralStyles.css" being the name of your main HTML page's stylesheet. When creating this new stylesheet, it is generally a good idea to copy a stylesheet from one of the other theme folders and paste it into your new skin's fonder. Then as you got through the CSS selectors you will be reminded of what images you need to change. Similarly, you can copy all the images from one of the other themes, paste them into your "img" folder in the new skin folder, and then going one by one, replace these images with your custom images. This is a good way create a checklist of what need to be done to creat a full new skin.
To help in the creatin of a custom skin this component includes all the necessary photoshop files to make the required skin images. These files can be found in the "skin_psds" folder in the download package. These files will open with Photoshop CS3 and later. In many of these files the items have been created on separate layers and using shapes with layerstyles, hence retaining their editability. In some cases, due to the lack of support for some CSS properties in Internet Explorer, a separate image will be require for use with Internet Explorer 7 & 8. In these cases you will see an additional image inside the skin's image folder with an "ie" or "internet_explorer" in its title.
When making new images for a custom skin, make sure to check the exact pixel dimension of the required image and make your replacement image the same size. The Photoshop files will not always be sized exactly to the image and instead the guides (which are included) will need to be used to select and crop out your required image portion. One particular image which requires special mention is the "timer_sprite_ie.png". This image is required for Internet Explorer 7 & 8 for the animated circular timer to function. Basically all you will need to do with this image is to change the color of the circle segements. To do this just double click on a layers's "color Overlay" layer style and select a new color. Then simply hold "Alt" key on the keyboard and drag this layer style to all the other layers to change their color to match the first one. Finally save a replacement png image and thats it.
The above image is an example of a "sprite" which is an single image which contains different items or items of different states inside. This image is then loaded only once by the CSS and repositioned to reveal only the desired portion. You will notice that almost all of the control buttons for this component are also created using a sprite. Be careful when editing these sprites in Photoshop because if individual items inside the sprite are moved from their location, it will result in the icon or button, not being aligned correctly by the CSS. Almost all required editing of the images or buttons can be done using layer styles, without needing to touch the actual buttons itself.
The included psd files are as follows:
File Name | Description |
---|---|
buttons_sprite_dark_skin.psd | Controls for the included dark skin |
buttons_sprite_default_skin.psd | Controls for the included default skin |
buttons_sprite_light_skin.psd | Controls for the included light skin |
buttons_sprite_organic_skin.psd | Controls for the included organic skin |
close_video_background_internet_explorer.psd | Background image for the close video button for all skins for Internet Explorer only |
controls_and_video_close_background.psd | Background image tiles for the controls and video close buttons in modern browsers |
logo_tag_background.psd | Background image for the logo tan on left hand side, for all skins and browsers |
popup_thumb.psd | The background image for the thumbnail popup image when the slide buttons are rolled over. For all browsers |
shadow_ends.psd | The left and right ends of the shadow image |
shadow_middle_tile.psd | The middle section of the shadow is made up of this tile image. |
timer_sprite_internet_explorer.psd | This is the timer segments image (referred to above) required for internet explorer only. The color of the timer in modern browsers is controlled via the skin stylesheet. |
Design and development of "Estro" Slider by iamdok & bitfade.
There have been no updates to this item yet.
Once again, thank you so much for purchasing this theme. If the above help documentation has not answered your questions, the following are your options:
regards, pixelentity