<title>smartcrop.js slideshow</title>

<link rel=stylesheet href=style.css>

<h1>smartcrop.js slideshow</h1>

<p><a href="https://github.com/jwagner/smartcrop.js">smartcrop.js</a> is a content aware image cropping library. On this page you can see how it can be

used to automatically pick crops to create a <a href="http://en.wikipedia.org/wiki/Ken_Burns_effect">Ken Burns</a> effect on images.</p>

<p>You can learn more about smartcrop.js on it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.</p>

<div id=prev-slide></div>

<div id=slide>loading, this can take a little while...</div>

<script src=jquery.js></script>

<script src=underscore.js></script>

<script src="../smartcrop.js"></script>

<script src=slideshow.js></script>

<script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-5205069-2']);

_gaq.push(['_setDomainName', '29a.ch']);

_gaq.push(['_setSiteSpeedSampleRate', 50]);

_gaq.push(['_trackPageview']);

</script>

<script src="//www.google-analytics.com/ga.js" async></script>

var transitionend = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';

var slide = $('#slide'),

prevSlide = $('#prev-slide'),

images = [],

width = slide.width(),

height = slide.height();

for(var i = 0; i < 8; i++) {

images.push({url: 'images/slideshow/' + i + '.jpg'});

function slideShow(images){

var analysed = 0,

i = 0;

function next(){

showSlide(images[i], next);

i = (i+1)%images.length;

}

images = _.chain(images)

.shuffle()

.head(10)

.each(function(i){

i.img = new Image();

i.img.onload = function(){

var options = {width: width*0.1, height: height*0.1};

SmartCrop.crop(i.img, _.extend({maxScale: 0.8, minScale: 0.7}, options), function(from){

i.from = from;

if(++analysed==images.length*2) next();

});

SmartCrop.crop(i.img, _.extend({minScale: 1.0}, options), function(to){

i.to = to;

if(++analysed==images.length*2) next();

});

};

i.img.src = i.url;

})

.value();

//showSlide(images[i], function(){});

function showSlide(image, done){

var img = image.img;

function transform(crop){

var s = width/crop.width,

x = crop.x,

y = crop.y,

t = 'scale(' + s + ') translate(-' + x + 'px, -' + y + 'px)';

return {

'-webkit-transform': t,

'transform': t,

'-webkit-transform-origin': '0 0',

'transform-origin': '0 0'

};

}

// zooming out usually works better, but some change is good too

if(image.from.topCrop.score.total*3.9 > image.to.topCrop.score.total) {

from = image.from;

to = image.to;

}

else {

from = image.to;

to = image.from;

}

window.from = from;

window.to = to;

var last = $('img', slide);

if(last[0]){

prevSlide.empty().append(

last.remove()

);

last.width();

last.css('opacity', '0');

}

slide

.empty()

.append(img);

$(img)

.css(transform(from.topCrop))

.css('opacity', 1)

.width(); // reflow

$(img)

//.addClass('animate')

.on(transitionend, _.once(done))

.css(transform(to.topCrop));

img.onerror = done;

img.src = image.url;

#slide, #prev-slide {

max-width: 100%;

width: 1280px;

height: 720px;

overflow: hidden;

}

#slide {

background: #ccc;

}

#prev-slide {

position: absolute;

z-index: 1;

}

#prev-slide img {

transition: all 1s linear;

-webkit-transition: all 1s linear;

opacity: 0.9;

max-width: none;

padding: 0;

margin: 0;

}

#slide img {

transition: all 5s linear;

-webkit-transition: all 5s linear;

/*transition-delay: 1s;*/

/*-webkit-transition-delay: 1s; [> Safari <]*/

opacity: 1;

max-width: none;

padding: 0;

margin: 0;

}