Skip to content

Instantly share code, notes, and snippets.

@setola

setola/app.js

Created July 25, 2012 15:22
Show Gist options
  • Save setola/3176762 to your computer and use it in GitHub Desktop.
Save setola/3176762 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Images Preload and Aspect Ratio Saver
Raw
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'
});
});
});
};
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment