setola/app.js

## app.js
jQuery(document).ready(function(){
	jQuery('#slideshow').doSlideshow();
});

jQuery(window).resize(function(){
	jQuery('#slideshow').imageResize();
});

jQuery.fn.doSlideshow = function() {
	if (
		typeof(document.slideshow) == 'undefined'
		|| typeof(document.slideshow.elements) == 'undefined'
		|| document.slideshow.elements.length == 0
	){ return; }

	var images_container = jQuery(this);
	var status_box = images_container.find('.status');
	var status_template = status_box.attr('data-description');
	status_template.replace(/%total%/g, document.slideshow.elements.length);
	var cycle_container = jQuery('<div/>',{'class':'cycle'});

	jQuery.each(document.slideshow.elements, function(index, src) {
		cycle_container.append(
			jQuery('<div/>',{'class':'cycle-element'}).append(
				jQuery('<img/>', {
					'class'		:	'cycle-image',
					'src'		:	src
				}).imageResize()
			)
		);
	});

	//initialize deferred object for imagesLoaded
	var dfd = images_container.imagesLoaded();

	//Everytime an image ends loading...
	dfd.progress(function(isOk, images, proper, broken ) {
		status_box.html( status_template.replace(/%number%/g, proper.length) );
	});

	//When all images are loaded...
	dfd.always(function(){
		images_container.append(cycle_container);
		cycle_container.cycle({
			speed: 800,
			timeout: 3000,
			slideResize: false
		});
		status_box.fadeOut(600);
	});
}


jQuery.fn.imageResize = function(){
	return this.each(function(){
		var element = jQuery(this);
		var images;
		if(element.is('img')){
			console.log('ASD');
			images = element;
		} else {
			images = element.find('img');
		}

		images.each(function(){
			var image = jQuery(this);
			//IE fix - test if it works plz...
			if (image.prop('naturalWidth') == undefined) {
				var $tmpImg = jQuery('<img/>').attr('src', image.attr('src'));
				image.prop('naturalWidth', $tmpImg[0].width);
				image.prop('naturalHeight', $tmpImg[0].height);
			}

			var dimensions = {
				natural	:	{
					width	:	image.prop('naturalWidth'),
					height	:	image.prop('naturalHeight')
				},
				window 	:	{
					width	:	jQuery('body').width(),
					height	:	jQuery('body').height()
				},
				image	:	{
					width	:	jQuery('body').width(),
					height	:	jQuery('body').height()
				},
				margins	:	{
					top		:	0,
					left	:	0
				}
			};

			dimensions.image.height = (dimensions.image.width * dimensions.natural.height) / dimensions.natural.width;
			if (dimensions.image.height < dimensions.window.height) {
				dimensions.image.height = dimensions.window.height;
				dimensions.image.width = (dimensions.image.height * dimensions.natural.width) / dimensions.natural.height;
				dimensions.margins.left = Math.round((dimensions.image.width - dimensions.window.width) / 2);
			}


			image.css({
				width	:	dimensions.image.width+'px',
				height	:	dimensions.image.height+'px',
				'margin-left'	:	'-'+dimensions.margins.left+'px'
			});
		});
	});
};

## test.php
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel='stylesheet' id='main-css'  href='style.css' type='text/css' media='screen' />
	</head>
	<body>
		<div id="slideshow">
			<script>
				document.slideshow = <?php
					$images = array(
						'img/A_01_flash_01.jpg',
						'img/A_01_flash_02.jpg',
						'img/A_01_flash_03.jpg',
						'img/A_01_flash_04.jpg'
					);
					$dimensions = array(2200, 1200);
					$attr = array(
						'size'=>$dimensions,
						'elements'=>$images
					);
					echo json_encode($attr);
				?>;
			</script>
			<div class="status" data-description="Loading %number% of %total%"></div>
		</div>
		<div id="crs"></div>
		<div id="offerte"></div>
		<div id="menu"></div>
		<div id="go-down"></div>
		<div id="text">Test test test!!!</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
		<script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</body>
</html>
	jQuery(document).ready(function(){
	jQuery('#slideshow').doSlideshow();
	});

	jQuery(window).resize(function(){
	jQuery('#slideshow').imageResize();
	});

	jQuery.fn.doSlideshow = function() {
	if (
	typeof(document.slideshow) == 'undefined'
	\|\| typeof(document.slideshow.elements) == 'undefined'
	\|\| document.slideshow.elements.length == 0
	){ return; }

	var images_container = jQuery(this);
	var status_box = images_container.find('.status');
	var status_template = status_box.attr('data-description');
	status_template.replace(/%total%/g, document.slideshow.elements.length);
	var cycle_container = jQuery('<div/>',{'class':'cycle'});

	jQuery.each(document.slideshow.elements, function(index, src) {
	cycle_container.append(
	jQuery('<div/>',{'class':'cycle-element'}).append(
	jQuery('<img/>', {
	'class' : 'cycle-image',
	'src' : src
	}).imageResize()
	)
	);
	});

	//initialize deferred object for imagesLoaded
	var dfd = images_container.imagesLoaded();

	//Everytime an image ends loading...
	dfd.progress(function(isOk, images, proper, broken ) {
	status_box.html( status_template.replace(/%number%/g, proper.length) );
	});

	//When all images are loaded...
	dfd.always(function(){
	images_container.append(cycle_container);
	cycle_container.cycle({
	speed: 800,
	timeout: 3000,
	slideResize: false
	});
	status_box.fadeOut(600);
	});
	}


	jQuery.fn.imageResize = function(){
	return this.each(function(){
	var element = jQuery(this);
	var images;
	if(element.is('img')){
	console.log('ASD');
	images = element;
	} else {
	images = element.find('img');
	}

	images.each(function(){
	var image = jQuery(this);
	//IE fix - test if it works plz...
	if (image.prop('naturalWidth') == undefined) {
	var $tmpImg = jQuery('<img/>').attr('src', image.attr('src'));
	image.prop('naturalWidth', $tmpImg[0].width);
	image.prop('naturalHeight', $tmpImg[0].height);
	}

	var dimensions = {
	natural : {
	width : image.prop('naturalWidth'),
	height : image.prop('naturalHeight')
	},
	window : {
	width : jQuery('body').width(),
	height : jQuery('body').height()
	},
	image : {
	width : jQuery('body').width(),
	height : jQuery('body').height()
	},
	margins : {
	top : 0,
	left : 0
	}
	};

	dimensions.image.height = (dimensions.image.width * dimensions.natural.height) / dimensions.natural.width;
	if (dimensions.image.height < dimensions.window.height) {
	dimensions.image.height = dimensions.window.height;
	dimensions.image.width = (dimensions.image.height * dimensions.natural.width) / dimensions.natural.height;
	dimensions.margins.left = Math.round((dimensions.image.width - dimensions.window.width) / 2);
	}


	image.css({
	width : dimensions.image.width+'px',
	height : dimensions.image.height+'px',
	'margin-left' : '-'+dimensions.margins.left+'px'
	});
	});
	});
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel='stylesheet' id='main-css' href='style.css' type='text/css' media='screen' />
	</head>
	<body>
	<div id="slideshow">
	<script>
	document.slideshow = <?php
	$images = array(
	'img/A_01_flash_01.jpg',
	'img/A_01_flash_02.jpg',
	'img/A_01_flash_03.jpg',
	'img/A_01_flash_04.jpg'
	);
	$dimensions = array(2200, 1200);
	$attr = array(
	'size'=>$dimensions,
	'elements'=>$images
	);
	echo json_encode($attr);
	?>;
	</script>
	<div class="status" data-description="Loading %number% of %total%"></div>
	</div>
	<div id="crs"></div>
	<div id="offerte"></div>
	<div id="menu"></div>
	<div id="go-down"></div>
	<div id="text">Test test test!!!</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
	<script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	</body>
	</html>