(function($) {
$.fn.slowlane = function(options) {
options = typeof options === 'object' ? options : {};
options.fontAwesome = typeof options.fontAwesome === 'boolean' ? options.fontAwesome : false;
options.customFloater = typeof options.customFloater === 'boolean' ? options.customFloater : false;
options.loadTime = typeof options.loadTime === 'number' ? options.loadTime : 5000;
options.adFadeTime = typeof options.adFadeTime === 'number' ? options.adFadeTime : 500;
options.zIndex = typeof options.zIndex === 'number' ? options.zIndex : 200;
function killLoaders() {
$('._slowlane-ad').each(function(index, element) {
$(element).fadeOut(function() {
setTimeout(function() {
$(element).remove();
}, 1);
});
});
$('._slowlane-loader').stop(true).each(function(index, element) {
setTimeout(function() {
$(element).animate({ height: element._slowlaneHeight + 'px' }, 500, function() {
$(this).css({ overflow: 'visible' });
});
}, 500 * index);
});
}
// Inject Info Floater
if (!options.customFloater) {
var close = options.fontAwesome ? '' : 'Close';
var social = options.fontAwesome ? ''
+ ''
+ ''
+ ''
: 'Twitter'
+ 'Facebook'
+ 'Google+'
+ 'LinkedIn';
var floater = $('').hide();
floater.css({ zIndex: options.zIndex });
$('body').append(floater.delay(1000).fadeIn(1000));
$('#_slowlane-floater-x').click(killLoaders).click(function() {
setTimeout(function() {
$('#_slowlane-floater').fadeOut();
}, 1);
});
}
// Run through each element to be slow-laned.
this.each(function(index, query) {
var element = $(query);
// Hide the element so it doesn't look loaded, but we still want to pull its dimensions.
element.css({ visibility: 'hidden' });
function slowLoad() {
var self = this;
var element = $(self);
self._slowlaneHeight = element.height();
self._slowlaneId = index;
// Quick workaround hack to actually wait for a loaded image.
if (element.prop('tagName') === 'IMG' && self._slowlaneHeight <= 1) {
setTimeout(function() {
slowLoad.call(self);
}, 100);
} else {
// Grab original element dimensions and classes.
var attributes = {
padding: element.css('padding'),
margin: element.css('margin'),
border: element.css('border'),
classes: typeof element.attr('class') === 'string' ? element.attr('class') : ''
};
// Completely gut the element of all dimensional styling.
element.removeClass().css({
width: '100%',
margin: 0,
padding: 0,
border: '0px solid #000',
height: self._slowlaneHeight + 'px'
});
// Create a wrapper and apply original element styling to it.
var wrapper = element.wrap('').parent();
wrapper.css({
padding: attributes.padding,
margin: attributes.margin,
height: self._slowlaneHeight + 'px'
});
// Wrap loader around the element which will fake loading.
var loader = element.wrap('').parent();
loader[0]._slowlaneHeight = loader.height();
loader.height('0')
.delay(options.loadTime * self._slowlaneId)
.animate({ height: loader[0]._slowlaneHeight + 'px' }, options.loadTime, function() {
$(this).css({ overflow: 'visible' });
$(this).parent().find('> ._slowlane-ad').fadeOut(options.adFadeTime);
});
// Create a button to get into the fast-lane.
var icons = options.fontAwesome ? '' : '';
var ad = $('' + icons + ' Buy Fast-Lane Access
').css({
zIndex: options.zIndex - 1
});
ad.click(killLoaders);
wrapper.append(ad);
// Show the element.
element.css({ visibility: 'visible' });
}
}
slowLoad.call(query);
});
return this;
}
})(jQuery);