');
progressbar = $canvas.find('div.bk_progressbar');
} else {
$canvas.append('');
var outer_wrap = $canvas.find('canvas.bk_canvas_timer');
if( set.timer_position == 'top-right' ) {
outer_wrap.css({ top: '0px', right: '0px' });
} else if( set.timer_position == 'top-left' ) {
outer_wrap.css({ top: '0px', left: '0px' });
} else if( set.timer_position == 'bottom-right' ) {
outer_wrap.css({ bottom: '0px', right: '0px' });
} else if( set.timer_position == 'bottom-left' ) {
outer_wrap.css({ bottom: '0px', left: '0px' });
} else if( set.timer_position == 'center' ) {
var y = place_on_center( height, outer_wrap.outerHeight(true) );
var x = place_on_center( width, outer_wrap.outerWidth(true) );
outer_wrap.css({ top: y + 'px', left: x + 'px' });
}
pie_timer = $canvas.find('canvas.bk_canvas_timer').get(0);
pie_timer.setAttribute('width',$canvas.find('canvas.bk_canvas_timer').width());
pie_timer.setAttribute('height',$canvas.find('canvas.bk_canvas_timer').height());
}
} else {
if( set.timer_position == 'line' ) {
$canvas.append('
');
progressbar = $canvas.find('div.bk_progressbar');
}
}
}
var title = $image.attr('alt');
if( set.show_titles && title != '' && title != undefined ) {
$canvas.append(' +')
');
$canvas_img = $canvas.find('img');
$target = $canvas;
$overlay = $canvas_img;
} else {
$canvas.append('');
$target = $canvas;
canvas = $canvas.find('canvas.bk_canvas').get(0);
canvas.setAttribute('width',canvas_width);
canvas.setAttribute('height',canvas_height);
$overlay = $canvas.find('canvas.bk_canvas');
}
zoomfactor = ( set.zoomfactor == 'random') ? getrandzoom() : zoomfactor;
set_start_rect();
set_dest_rect();
$image.trigger("bk.kenburns.init");
draw_current_frame();
$overlay.fadeIn('slow');
bind_handlers();
start_kenburns();
}
function interpolate_point(x1, y1, x2, y2, i) {
// Finds a point between two other points
return {x: x1 + (x2 - x1) * i,
y: y1 + (y2 - y1) * i}
}
function interpolate_rect(r1, r2, i) {
// Blend one rect in to another
var p1 = interpolate_point(r2['x'], r2['y'], r1['x'], r1['y'], i);
var p2 = interpolate_point(r2['width'], r2['height'], r1['width'], r1['height'], i);
return [p1.x, p1.y, p2.x, p2.y];
}
function validate_rect( rect, zoom ) {
if( rect['x'] < 0 ) {
rect['x'] = 0;
}
if( rect['y'] < 0 ) {
rect['y'] = 0;
}
if( rect['x'] + rect['width'] > orig_img_width - 1 ) {
rect['x'] = ( orig_img_width - rect['width'] );
}
if( rect['y'] + rect['height'] > orig_img_height - 1 ) {
rect['y'] = ( orig_img_height - rect['height'] );
}
return rect;
}
function get_random_value( start, stop ) {
return Math.floor( Math.random() * ( stop - start )) + start;
}
function set_start_rect() {
var x = set.start_cpoint[0];
var y = set.start_cpoint[1];
if( set.start_cpoint_random ) {
x = get_random_value( set.start_cpoint[0], set.start_cpoint[1] );
y = get_random_value( set.start_cpoint[0], set.start_cpoint[1] );
}
var center_x = Math.round( orig_img_width * x / 100 ); // x coordiante of canvas center point on orignal image described in pixels
var center_y = Math.round( orig_img_height * y / 100 ); // y coordiante of canvas center point on orignal image described in pixels
start_rect['x'] = Math.round( center_x - width / 2 );
start_rect['y'] = Math.round( center_y - height / 2 );
start_rect['width'] = width;
start_rect['height'] = height;
start_rect = validate_rect( start_rect, 1.0 );
}
function set_dest_rect() {
var x = set.dest_cpoint[0];
var y = set.dest_cpoint[1];
if( set.dest_cpoint_random ) {
x = get_random_value( set.dest_cpoint[0], set.dest_cpoint[1] );
y = get_random_value( set.dest_cpoint[0], set.dest_cpoint[1] );
}
var center_x = Math.round( orig_img_width * x / 100 ); // x coordiante of canvas center point on orignal image described in pixels
var center_y = Math.round( orig_img_height * y / 100 ); // y coordiante of canvas center point on orignal image described in pixels
dest_rect['x'] = Math.round( center_x - (width * zoomfactor) / 2 );
dest_rect['y'] = Math.round( center_y - (height * zoomfactor) / 2 );
dest_rect['width'] = Math.round( width * zoomfactor);
dest_rect['height'] = Math.round( height * zoomfactor);
dest_rect = validate_rect( dest_rect, zoomfactor );
}
function animate_frame() {
if( !is_playing )
return;
draw_current_frame();
if( current_frame < frames_amount)
{
current_frame++;
$image.oneTime(frame_time, function() {
animate_frame();
});
}
else
{
if( set.play_in_loop )
{
current_frame = 1;
zoomfactor = ( set.zoomfactor == 'random') ? getrandzoom() : zoomfactor;
set_start_rect();
set_dest_rect();
$overlay.fadeOut(delay, function(){
animate_loop_transition();
});
}
}
}
function animate_loop_transition() {
draw_current_frame();
$image.oneTime(frame_time, function() {
animate_frame();
});
$overlay.fadeIn(delay);
}
function update_timer() {
if( use_canvas_timer && pie_timer != null ) {
var drawX = drawY = radius = 20 / 2;
// Calculate the end angle
var end_angle = -Math.PI/2 + ( current_frame / frames_amount ) * Math.PI * 2;
// add current wedge
var context = pie_timer.getContext("2d");
context.clearRect(0, 0, pie_timer.width, pie_timer.height)
context.globalAlpha = set.timer_alpha;
context.beginPath();
context.arc(drawX, drawY, radius, 0, Math.PI*2, true);
context.fillStyle = set.timer_color;//'white';
context.fill();
context.moveTo(drawX,drawY);
context.arc(drawX, drawY, radius - 2, -Math.PI/2 , end_angle, false);
context.closePath();
context.fillStyle = set.base_color;//'black';
context.fill();
} else if( progressbar != null ) {
var prg_width = ( current_frame / frames_amount ) * width;
progressbar.css({ width: prg_width + 'px' });
}
}
function draw_current_frame() {
var r = interpolate_rect(start_rect, dest_rect, current_frame / frames_amount );
if( set.show_timer )
update_timer();
if( !support_canvas ) {
var s = width / r[2];
var p1 = r[0] * s * -1;
var p2 = r[1] * s * -1;
if( jQuery.browser.msie ) {
$canvas_img.css({'filter': 'progid:DXImageTransform.Microsoft.Matrix(FilterType="nearest neighbor",M11=' + s + ',M12=0,M21=0,M22=' + s + ",Dx=" + p1 + ",Dy=" + p2 + ")"});
$canvas_img.css({'-ms-filter': 'progid:DXImageTransform.Microsoft.Matrix(FilterType="nearest neighbor",M11=' + s + ',M12=0,M21=0,M22=' + s + ",Dx=" + p1 + ",Dy=" + p2 + ")"});
} else if( Modernizr.csstransforms ){
if( Modernizr.hw3dTransform ) {
$canvas_img.css({ '-webkit-transform': "translate3d(" + p1 + "px," + p2 + "px,0) scale(" + s + ")",
'-ms-transform': "translate3d(" + p1 + "px," + p2 + "px,0) scale(" + s + ")",
'-o-transform': "translate3d(" + p1 + "px," + p2 + "px,0) scale(" + s + ")",
'-moz-transform': "translate3d(" + p1 + "px," + p2 + "px,0) scale(" + s + ")",
'transform': "translate3d(" + p1 + "px," + p2 + "px,0) scale(" + s + ")" });
} else {
$canvas_img.css({ '-webkit-transform': "translate(" + p1 + "px," + p2 + "px) scale(" + s + ")",
'-ms-transform': "translate(" + p1 + "px," + p2 + "px) scale(" + s + ")",
'-o-transform': "translate(" + p1 + "px," + p2 + "px) scale(" + s + ")",
'-moz-transform': "translate(" + p1 + "px," + p2 + "px) scale(" + s + ")",
'transform': "translate(" + p1 + "px," + p2 + "px) scale(" + s + ")" });
}
}
} else {
var ctx = canvas.getContext('2d');
ctx.drawImage($image.get(0), r[0], r[1], r[2], r[3] , 0, 0, canvas_width, canvas_height);
}
}
function start_kenburns() {
if( (set.hover_mode == 'pause_on_hover' || set.hover_mode == 'none' ) ) {
is_playing = true;
animate_frame();
$image.trigger("bk.kenburns.play");
}
else if( set.hover_mode == 'play_on_hover' ) {
draw_current_frame();
$image.trigger("bk.kenburns.pause");
}
else {
$image.trigger("bk.kenburns.pause");
}
}
//=================================FUNCTIONS==========================================================================
//================================EVENT HANDLERS==================================================================
function bind_handlers() {
$target.hover(
function(event){
if( set.show_titles && image_title != null )
set.title_show_callback.call( image_title );
if( set.hover_mode == 'pause_on_hover' && is_playing ) {
$image.stopTime();
$image.trigger("bk.kenburns.pause");
}
else if( set.hover_mode == 'play_on_hover' && !is_playing ) {
$image.oneTime(frame_time, function() {
animate_frame();
});
$image.trigger("bk.kenburns.play");
}
},
function(event){
if( set.show_titles && image_title != null )
set.title_hide_callback.call( image_title );
if( set.hover_mode == 'pause_on_hover' && !is_playing ) {
$image.oneTime(frame_time, function() {
animate_frame();
});
$image.trigger("bk.kenburns.play");
}
else if( set.hover_mode == 'play_on_hover' && is_playing ) {
$image.stopTime();
$image.trigger("bk.kenburns.pause");
}
}
);
$target.bind('click',
function (event) {
$image.trigger('click');
}
);
$image.bind('bk.kenburns.pause', function() {
is_playing = false;
});
$image.bind('bk.kenburns.play', function() {
is_playing = true;
});
}
//================================END OF EVENT HANDLERS==================================================================
return this.each(function() {
$.fn.kenburns_plugin.Play = function() {
is_playing = true;
draw_current_frame();
$image.oneTime(frame_time, function() {
animate_frame();
});
$image.trigger("bk.kenburns.play");
}
$.fn.kenburns_plugin.Pause = function() {
is_playing = false;
$image.stopTime();
$image.trigger("bk.kenburns.pause");
}
//=================================END OF FUNCTIONS==========================================================================
//=================================MAIN======================================================================================
if (jQuery.browser.webkit && document.readyState != "complete"){
setTimeout( arguments.callee, 100 );
return;
}
init_kenburns();
//================================END OF MAIN=====================================================================
});
};
})(jQuery);
' + title + '
');
image_title = $canvas.find('div.bk_title');
}
var img = new Image();
img.onload = imageloaded;
img.src = $image.attr('src');
if (img.complete)
imageloaded.call(img);
}
function imageloaded() {
if( img_loaded )
return;
img_loaded = true; // prevent double fire in case of cached images
orig_img_width = this.width;
orig_img_height = this.height;
max_factor = orig_img_width / canvas_width;
if( zoomfactor != 'random' && zoomfactor > max_factor )
zoomfactor = max_factor;
if( !support_canvas ) {
$canvas.append('