first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,691 @@
|
||||
/* --------------------------------------------------------------------
|
||||
MaxImage 2.0 (Fullscreen Slideshow for use with jQuery Cycle Plugin)
|
||||
--------------------------------------------------------------------
|
||||
|
||||
Examples and documentation at: http://www.aaronvanderzwan.com/maximage/2.0/
|
||||
Copyright (c) 2007-2012 Aaron Vanderzwan
|
||||
Dual licensed under the MIT and GPL licenses.
|
||||
|
||||
NOTES:
|
||||
This plugin is intended to simplify the creation of fullscreen
|
||||
background slideshows. It is intended to be used alongside the
|
||||
jQuery Cycle plugin:
|
||||
http://jquery.malsup.com/cycle/
|
||||
|
||||
If you simply need a fullscreen background image, please
|
||||
refer to the following document for ways to do this that
|
||||
are much more simple:
|
||||
http://css-tricks.com/perfect-full-page-background-image/
|
||||
|
||||
If you have any questions please contact Aaron Vanderzwan
|
||||
at http://www.aaronvanderzwan.com/blog/
|
||||
Documentation at:
|
||||
http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/
|
||||
|
||||
HISTORY:
|
||||
MaxImage 2.0 is a project first built as jQuery MaxImage Plugin
|
||||
(http://www.aaronvanderzwan.com/maximage/). Once CSS3 came along,
|
||||
the background-size:cover solved the problem MaxImage
|
||||
was intended to solve. However, fully customizable
|
||||
fullscreen slideshows is still fairly complex and I have not
|
||||
found any helpers for integrating with the jQuery Cycle Plugin.
|
||||
MaxCycle is intended to solve this problem.
|
||||
|
||||
TABLE OF CONTENTS:
|
||||
@Modern
|
||||
@setup
|
||||
@resize
|
||||
@preload
|
||||
@Old
|
||||
@setup
|
||||
@preload
|
||||
@onceloaded
|
||||
@maximage
|
||||
@windowresize
|
||||
@doneresizing
|
||||
@Cycle
|
||||
@setup
|
||||
@Adjust
|
||||
@center
|
||||
@fill
|
||||
@maxcover
|
||||
@maxcontain
|
||||
@Utils
|
||||
@browser_tests
|
||||
@construct_slide_object
|
||||
@sizes
|
||||
@modern_browser
|
||||
@debug
|
||||
|
||||
*/
|
||||
/*!
|
||||
* Maximage Version: 2.0.8 (16-Jan-2012) - http://www.aaronvanderzwan.com/maximage/2.0/
|
||||
*/
|
||||
|
||||
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
$.fn.maximage = function (settings, helperSettings) {
|
||||
|
||||
var config;
|
||||
|
||||
if (typeof settings == 'object' || settings === undefined) config = $.extend( $.fn.maximage.defaults, settings || {} );
|
||||
if (typeof settings == 'string') config = $.fn.maximage.defaults;
|
||||
|
||||
/*jslint browser: true*/
|
||||
$.Body = $('body');
|
||||
$.Window = $(window);
|
||||
$.Scroll = $('html, body');
|
||||
$.Events = {
|
||||
RESIZE: 'resize'
|
||||
};
|
||||
|
||||
this.each(function() {
|
||||
var $self = $(this),
|
||||
preload_count = 0,
|
||||
imageCache = [];
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Modern
|
||||
|
||||
/*
|
||||
MODERN BROWSER NOTES:
|
||||
Modern browsers have CSS3 background-size option so we setup the DOM to be the following structure for cycle plugin:
|
||||
div = cycle
|
||||
div = slide with background-size:cover
|
||||
div = slide with background-size:cover
|
||||
etc.
|
||||
*/
|
||||
|
||||
var Modern = {
|
||||
setup: function(){
|
||||
if($.Slides.length > 0){
|
||||
// Setup images
|
||||
for(var i in $.Slides) {
|
||||
// Set our image
|
||||
var $img = $.Slides[i];
|
||||
|
||||
// Create a div with a background image so we can use CSS3's position cover (for modern browsers)
|
||||
$self.append('<div class="mc-image ' + $img.theclass + '" title="' + $img.alt + '" style="background-image:url(\'' + $img.url + '\');' + $img.style + '" data-href="'+ $img.datahref +'">'+ $img.content +'</div>');
|
||||
}
|
||||
|
||||
// Begin our preload process (increments itself after load)
|
||||
Modern.preload(0);
|
||||
|
||||
// If using Cycle, this resets the height and width of each div to always fill the window; otherwise can be done with CSS
|
||||
Modern.resize();
|
||||
}
|
||||
},
|
||||
preload: function(n){
|
||||
// Preload all of the images but never show them, just use their completion so we know that they are done
|
||||
// and so that the browser can cache them / fade them in smoothly
|
||||
|
||||
// Create new image object
|
||||
var $img = $('<img/>');
|
||||
$img.load(function() {
|
||||
// Once the first image has completed loading, start the slideshow, etc.
|
||||
if(preload_count==0) {
|
||||
// Only start cycle after first image has loaded
|
||||
Cycle.setup();
|
||||
|
||||
// Run user defined onFirstImageLoaded() function
|
||||
config.onFirstImageLoaded();
|
||||
}
|
||||
|
||||
// preload_count starts with 0, $.Slides.length starts with 1
|
||||
if(preload_count==($.Slides.length-1)) {
|
||||
// If we have just loaded the final image, run the user defined function onImagesLoaded()
|
||||
config.onImagesLoaded( $self );
|
||||
}else{
|
||||
// Increment the counter
|
||||
preload_count++;
|
||||
|
||||
// Load the next image
|
||||
Modern.preload(preload_count);
|
||||
}
|
||||
});
|
||||
|
||||
// Set the src... this triggers begin of load
|
||||
$img[0].src = $.Slides[n].url;
|
||||
|
||||
// Push to external array to avoid cleanup by aggressive garbage collectors
|
||||
imageCache.push($img[0]);
|
||||
},
|
||||
resize: function(){
|
||||
// Cycle sets the height of each slide so when we resize our browser window this becomes a problem.
|
||||
// - the cycle option 'slideResize' has to be set to false otherwise it will trump our resize
|
||||
$.Window
|
||||
.bind($.Events.RESIZE,
|
||||
function(){
|
||||
// Remove scrollbars so we can take propper measurements
|
||||
$.Scroll.addClass('mc-hide-scrolls');
|
||||
|
||||
// Set vars so we don't have to constantly check it
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Set container and slides height and width to match the window size
|
||||
$self
|
||||
.height($.Window.data('h')).width($.Window.data('w'))
|
||||
.children()
|
||||
.height($.Window.data('h')).width($.Window.data('w'));
|
||||
|
||||
// This is special noise for cycle (cycle has separate height and width for each slide)
|
||||
$self.children().each(function(){
|
||||
this.cycleH = $.Window.data('h');
|
||||
this.cycleW = $.Window.data('w');
|
||||
});
|
||||
|
||||
// Put the scrollbars back to how they were
|
||||
$($.Scroll).removeClass('mc-hide-scrolls');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Old
|
||||
|
||||
/*
|
||||
OLD BROWSER NOTES:
|
||||
We setup the dom to be the following structure for cycle plugin on old browsers:
|
||||
div = cycle
|
||||
div = slide
|
||||
img = full screen size image
|
||||
div = slide
|
||||
img = full screen size image
|
||||
etc.
|
||||
*/
|
||||
|
||||
var Old = {
|
||||
setup: function(){
|
||||
var c, t, $div;
|
||||
|
||||
// Clear container
|
||||
if($.BrowserTests.msie && !config.overrideMSIEStop){
|
||||
// Stop IE from continually trying to preload images that we already removed
|
||||
document.execCommand("Stop", false);
|
||||
}
|
||||
$self.html('');
|
||||
|
||||
$.Body.addClass('mc-old-browser');
|
||||
|
||||
if($.Slides.length > 0){
|
||||
// Remove scrollbars so we can take propper measurements
|
||||
$.Scroll.addClass('mc-hide-scrolls');
|
||||
|
||||
// Cache our new dimensions
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Add our loading div to the DOM
|
||||
$('body').append($("<div></div>").attr("class", "mc-loader").css({'position':'absolute','left':'-9999px'}));
|
||||
|
||||
// Loop through slides
|
||||
for(var j in $.Slides) {
|
||||
// Determine content (if container or image)
|
||||
if($.Slides[j].content.length == 0){
|
||||
c = '<img src="' + $.Slides[j].url + '" />';
|
||||
}else{
|
||||
c = $.Slides[j].content;
|
||||
}
|
||||
|
||||
// Create Div
|
||||
$div = $("<div>" + c + "</div>").attr("class", "mc-image mc-image-n" + j + " " + $.Slides[j].theclass);
|
||||
|
||||
// Add new container div to the DOM
|
||||
$self.append( $div );
|
||||
|
||||
// Account for slides without images
|
||||
if($('.mc-image-n' + j).children('img').length == 0){
|
||||
}else{
|
||||
// Add first image to loader to get that started
|
||||
$('div.mc-loader').append( $('.mc-image-n' + j).children('img').first().clone().addClass('not-loaded') );
|
||||
}
|
||||
}
|
||||
|
||||
// Begin preloading
|
||||
Old.preload();
|
||||
|
||||
// Setup the resize function to listen for window changes
|
||||
Old.windowResize();
|
||||
}
|
||||
},
|
||||
preload: function(){
|
||||
// Intervals to tell if an images have loaded
|
||||
var t = setInterval(function() {
|
||||
$('.mc-loader').children('img').each(function(i){
|
||||
// Check if image is loaded
|
||||
var $img = $(this);
|
||||
|
||||
// Loop through not-loaded images
|
||||
if($img.hasClass('not-loaded')){
|
||||
if( $img.height() > 0 ){
|
||||
// Remove Dom notice
|
||||
$(this).removeClass('not-loaded');
|
||||
|
||||
// Set the dimensions
|
||||
var $img1 = $('div.mc-image-n' + i).children('img').first();
|
||||
|
||||
$img1
|
||||
.data('h', $img.height())
|
||||
.data('w', $img.width())
|
||||
.data('ar', ($img.width() / $img.height()));
|
||||
|
||||
// Go on
|
||||
Old.onceLoaded(i)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if( $('.not-loaded').length == 0){
|
||||
// Remove our loader element because all of our images are now loaded
|
||||
$('.mc-loader').remove();
|
||||
|
||||
// Clear interval when all images are loaded
|
||||
clearInterval(t);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
onceLoaded: function(m){
|
||||
// Do maximage magic
|
||||
Old.maximage(m);
|
||||
|
||||
// Once the first image has completed loading, start the slideshow, etc.
|
||||
if(m == 0) {
|
||||
// If we changed the visibility before, make sure it is back on
|
||||
$self.css({'visibility':'visible'});
|
||||
|
||||
// Run user defined onFirstImageLoaded() function
|
||||
config.onFirstImageLoaded();
|
||||
|
||||
// After everything is done loading, clean up
|
||||
}else if(m == $.Slides.length - 1){
|
||||
// Only start cycle after the first image has loaded
|
||||
Cycle.setup();
|
||||
|
||||
// Put the scrollbars back to how they were
|
||||
$($.Scroll).removeClass('mc-hide-scrolls');
|
||||
|
||||
// If we have just loaded the final image, run the user defined function onImagesLoaded()
|
||||
config.onImagesLoaded( $self );
|
||||
|
||||
if(config.debug) {
|
||||
debug(' - Final Maximage - ');debug($self);
|
||||
}
|
||||
}
|
||||
},
|
||||
maximage: function(p){
|
||||
// Cycle sets the height of each slide so when we resize our browser window this becomes a problem.
|
||||
// - the cycle option 'slideResize' has to be set to false otherwise it will trump our resize
|
||||
$('div.mc-image-n' + p)
|
||||
.height($.Window.data('h'))
|
||||
.width($.Window.data('w'))
|
||||
.children('img')
|
||||
.first()
|
||||
.each(function(){
|
||||
Adjust.maxcover($(this));
|
||||
});
|
||||
},
|
||||
windowResize: function(){
|
||||
$.Window
|
||||
.bind($.Events.RESIZE,
|
||||
function(){
|
||||
clearTimeout(this.id);
|
||||
this.id = setTimeout(Old.doneResizing, 200);
|
||||
});
|
||||
},
|
||||
doneResizing: function(){
|
||||
// The final resize (on finish)
|
||||
// Remove scrollbars so we can take propper measurements
|
||||
$($.Scroll).addClass('mc-hide-scrolls');
|
||||
|
||||
// Cache our window's new dimensions
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Set the container's height and width
|
||||
$self.height($.Window.data('h')).width($.Window.data('w'))
|
||||
|
||||
// Set slide's height and width to match the window size
|
||||
$self.find('.mc-image').each(function(n){
|
||||
Old.maximage(n);
|
||||
});
|
||||
|
||||
// Update cycle's ideas of what our slide's height and width should be
|
||||
var curr_opts = $self.data('cycle.opts');
|
||||
if(curr_opts != undefined){
|
||||
curr_opts.height = $.Window.data('h');
|
||||
curr_opts.width = $.Window.data('w');
|
||||
jQuery.each(curr_opts.elements, function(index, item) {
|
||||
item.cycleW = $.Window.data('w');
|
||||
item.cycleH = $.Window.data('h');
|
||||
});
|
||||
}
|
||||
|
||||
// Put the scrollbars back to how they were
|
||||
$($.Scroll).removeClass('mc-hide-scrolls');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Cycle
|
||||
|
||||
var Cycle = {
|
||||
setup: function(){
|
||||
var h,w;
|
||||
|
||||
$self.addClass('mc-cycle');
|
||||
|
||||
// Container sizes (if not set)
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Prefer CSS Transitions
|
||||
jQuery.easing.easeForCSSTransition = function(x, t, b, c, d, s) {
|
||||
return b+c;
|
||||
};
|
||||
|
||||
var cycleOptions = $.extend({
|
||||
fit:1,
|
||||
containerResize:0,
|
||||
height:$.Window.data('h'),
|
||||
width:$.Window.data('w'),
|
||||
slideResize: false,
|
||||
easing: ($.BrowserTests.cssTransitions && config.cssTransitions ? 'easeForCSSTransition' : 'swing')
|
||||
}, config.cycleOptions);
|
||||
|
||||
$self.cycle( cycleOptions );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Adjust = Math to center and fill all elements
|
||||
|
||||
var Adjust = {
|
||||
center: function($item){
|
||||
// Note: if alignment is 'left' or 'right' it can be controlled with CSS once verticalCenter
|
||||
// and horizontal center are set to false in the plugin options
|
||||
if(config.verticalCenter){
|
||||
$item.css({marginTop:(($item.height() - $.Window.data('h'))/2) * -1})
|
||||
}
|
||||
if(config.horizontalCenter){
|
||||
$item.css({marginLeft:(($item.width() - $.Window.data('w'))/2) * -1});
|
||||
}
|
||||
},
|
||||
fill: function($item){
|
||||
var $storageEl = $item.is('object') ? $item.parent().first() : $item;
|
||||
|
||||
if(typeof config.backgroundSize == 'function'){
|
||||
// If someone wants to write their own fill() function, they can: example customBackgroundSize.html
|
||||
config.backgroundSize( $item );
|
||||
}else if(config.backgroundSize == 'cover'){
|
||||
if($.Window.data('w') / $.Window.data('h') < $storageEl.data('ar')){
|
||||
$item
|
||||
.height($.Window.data('h'))
|
||||
.width(($.Window.data('h') * $storageEl.data('ar')).toFixed(0));
|
||||
}else{
|
||||
$item
|
||||
.height(($.Window.data('w') / $storageEl.data('ar')).toFixed(0))
|
||||
.width($.Window.data('w'));
|
||||
}
|
||||
}else if(config.backgroundSize == 'contain'){
|
||||
if($.Window.data('w') / $.Window.data('h') < $storageEl.data('ar')){
|
||||
$item
|
||||
.height(($.Window.data('w') / $storageEl.data('ar')).toFixed(0))
|
||||
.width($.Window.data('w'));
|
||||
}else{
|
||||
$item
|
||||
.height($.Window.data('h'))
|
||||
.width(($.Window.data('h') * $storageEl.data('ar')).toFixed(0));
|
||||
}
|
||||
}else{
|
||||
debug('The backgroundSize option was not recognized for older browsers.');
|
||||
}
|
||||
},
|
||||
maxcover: function($item){
|
||||
Adjust.fill($item);
|
||||
Adjust.center($item);
|
||||
},
|
||||
maxcontain: function($item){
|
||||
Adjust.fill($item);
|
||||
Adjust.center($item);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Utils = General utilities for the plugin
|
||||
|
||||
var Utils = {
|
||||
browser_tests: function(){
|
||||
var $div = $('<div />')[0],
|
||||
vendor = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
|
||||
p = 'transition',
|
||||
obj = {
|
||||
cssTransitions: false,
|
||||
cssBackgroundSize: ( "backgroundSize" in $div.style && config.cssBackgroundSize ), // Can override cssBackgroundSize in options
|
||||
html5Video: false,
|
||||
msie: false
|
||||
};
|
||||
|
||||
// Test for CSS Transitions
|
||||
if(config.cssTransitions){
|
||||
if(typeof $div.style[p] == 'string') { obj.cssTransitions = true }
|
||||
|
||||
// Tests for vendor specific prop
|
||||
p = p.charAt(0).toUpperCase() + p.substr(1);
|
||||
for(var i=0; i<vendor.length; i++) {
|
||||
if(vendor[i] + p in $div.style) { obj.cssTransitions = true; }
|
||||
}
|
||||
}
|
||||
|
||||
// Check if we can play html5 videos
|
||||
if( !!document.createElement('video').canPlayType ) {
|
||||
obj.html5Video = true;
|
||||
}
|
||||
|
||||
// Check for MSIE since we lost $.browser in jQuery
|
||||
obj.msie = (Utils.msie() !== undefined);
|
||||
|
||||
|
||||
if(config.debug) {
|
||||
debug(' - Browser Test - ');debug(obj);
|
||||
}
|
||||
|
||||
return obj;
|
||||
},
|
||||
construct_slide_object: function(){
|
||||
var obj = new Object(),
|
||||
arr = new Array(),
|
||||
temp = '';
|
||||
|
||||
$self.children().each(function(i){
|
||||
var $img = $(this).is('img') ? $(this).clone() : $(this).find('img').first().clone();
|
||||
|
||||
// reset obj
|
||||
obj = {};
|
||||
|
||||
// set attributes to obj
|
||||
obj.url = $img.attr('src');
|
||||
obj.title = $img.attr('title') != undefined ? $img.attr('title') : '';
|
||||
obj.alt = $img.attr('alt') != undefined ? $img.attr('alt') : '';
|
||||
obj.theclass = $img.attr('class') != undefined ? $img.attr('class') : '';
|
||||
obj.styles = $img.attr('style') != undefined ? $img.attr('style') : '';
|
||||
obj.orig = $img.clone();
|
||||
obj.datahref = $img.attr('data-href') != undefined ? $img.attr('data-href') : '';
|
||||
obj.content = "";
|
||||
|
||||
// Setup content for within container
|
||||
if($(this).find('img').length > 0){
|
||||
if($.BrowserTests.cssBackgroundSize){
|
||||
$(this).find('img').first().remove();
|
||||
}
|
||||
obj.content = $(this).html();
|
||||
}
|
||||
|
||||
// Stop loading image so we can load them sequentiallyelse{
|
||||
$img[0].src = "";
|
||||
|
||||
// Remove original object (only on nonIE. IE hangs if you remove an image during load)
|
||||
if($.BrowserTests.cssBackgroundSize){
|
||||
$(this).remove();
|
||||
}
|
||||
|
||||
// attach obj to arr
|
||||
arr.push(obj);
|
||||
});
|
||||
|
||||
|
||||
if(config.debug) {
|
||||
debug(' - Slide Object - ');debug(arr);
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
msie: function(){
|
||||
var undef,
|
||||
v = 3,
|
||||
div = document.createElement('div'),
|
||||
all = div.getElementsByTagName('i');
|
||||
|
||||
while (
|
||||
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
||||
all[0]
|
||||
);
|
||||
|
||||
return v > 4 ? v : undef;
|
||||
},
|
||||
sizes: function(){
|
||||
var sizes = {h:0,w:0};
|
||||
|
||||
if(config.fillElement == "window"){
|
||||
sizes.h = $.Window.height();
|
||||
sizes.w = $.Window.width();
|
||||
}else{
|
||||
var $fillElement = $self.parents(config.fillElement).first();
|
||||
|
||||
// Height
|
||||
if($fillElement.height() == 0 || $fillElement.data('windowHeight') == true){
|
||||
$fillElement.data('windowHeight',true);
|
||||
sizes.h = $.Window.height();
|
||||
}else{
|
||||
sizes.h = $fillElement.height();
|
||||
}
|
||||
|
||||
// Width
|
||||
if($fillElement.width() == 0 || $fillElement.data('windowWidth') == true){
|
||||
$fillElement.data('windowWidth',true);
|
||||
sizes.w = $.Window.width();
|
||||
}else{
|
||||
sizes.w = $fillElement.width();
|
||||
}
|
||||
}
|
||||
|
||||
return sizes;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
|
||||
// @Instantiation
|
||||
|
||||
// Helper Function
|
||||
// Run tests to see what our browser can handle
|
||||
$.BrowserTests = Utils.browser_tests();
|
||||
|
||||
if(typeof settings == 'string'){
|
||||
// TODO: Resize object fallback for old browsers, If we are trying to size an HTML5 video and our browser doesn't support it
|
||||
if($.BrowserTests.html5Video || !$self.is('video')) {
|
||||
var to,
|
||||
$storageEl = $self.is('object') ? $self.parent().first() : $self; // Can't assign .data() to '<object>'
|
||||
|
||||
if( !$.Body.hasClass('mc-old-browser') )
|
||||
$.Body.addClass('mc-old-browser');
|
||||
|
||||
// Cache our window's new dimensions
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Please include height and width attributes on your html elements
|
||||
$storageEl
|
||||
.data('h', $self.height())
|
||||
.data('w', $self.width())
|
||||
.data('ar', $self.width() / $self.height());
|
||||
|
||||
// We want to resize these elements with the window
|
||||
$.Window
|
||||
.bind($.Events.RESIZE,
|
||||
function(){
|
||||
// Cache our window's new dimensions
|
||||
$.Window
|
||||
.data('h', Utils.sizes().h)
|
||||
.data('w', Utils.sizes().w);
|
||||
|
||||
// Limit resize runs
|
||||
to = $self.data('resizer');
|
||||
clearTimeout(to);
|
||||
to = setTimeout( Adjust[settings]($self), 200 );
|
||||
$self.data('resizer', to);
|
||||
});
|
||||
|
||||
// Initial run
|
||||
Adjust[settings]($self);
|
||||
}
|
||||
}else{
|
||||
// Construct array of image objects for us to use
|
||||
$.Slides = Utils.construct_slide_object();
|
||||
|
||||
// If we are allowing background-size:cover run Modern
|
||||
if($.BrowserTests.cssBackgroundSize){
|
||||
if(config.debug) debug(' - Using Modern - ');
|
||||
Modern.setup();
|
||||
}else{
|
||||
if(config.debug) debug(' - Using Old - ');
|
||||
Old.setup();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// private function for debugging
|
||||
function debug($obj) {
|
||||
if (window.console && window.console.log) {
|
||||
window.console.log($obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default options
|
||||
$.fn.maximage.defaults = {
|
||||
debug: false,
|
||||
cssBackgroundSize: true, // Force run the functionality used for newer browsers
|
||||
cssTransitions: true, // Force run the functionality used for old browsers
|
||||
verticalCenter: true, // Only necessary for old browsers
|
||||
horizontalCenter: true, // Only necessary for old browsers
|
||||
scaleInterval: 20, // Only necessary for old browsers
|
||||
backgroundSize: 'cover', // Only necessary for old browsers (this can be function)
|
||||
fillElement: 'window', // Either 'window' or a CSS selector for a parent element
|
||||
overrideMSIEStop: false, // This gives the option to not 'stop' load for MSIE (stops coded background images from loading so we can preload)...
|
||||
// If setting this option to true, please beware of IE7/8 "Stack Overflow" error but if there are more than 13 slides
|
||||
// The description of the bug: http://blog.aaronvanderzwan.com/forums/topic/stack-overflow-in-ie-7-8/#post-33038
|
||||
onFirstImageLoaded: function(){},
|
||||
onImagesLoaded: function(){}
|
||||
}
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user