elstretch2 |
(function($) {
$.fn.onImagesLoad = function(options) {
var self = this;
self.opts = $.extend({}, $.fn.onImagesLoad.defaults, options);
self.bindEvents = function($imgs, container, callback) {
if ($imgs.length === 0) {
if (self.opts.callbackIfNoImagesExist && callback) {
callback(container);
}
} else {
var loadedImages = [];
if (!$imgs.jquery) {
$imgs = $($imgs);
}
$imgs.each(function(i) {
var orgSrc = this.src;
if (!$.browser.msie) {
this.src = "";
}
$(this).bind('load', function() {
if (jQuery.inArray(i, loadedImages) < 0) {
loadedImages.push(i);
if (loadedImages.length == $imgs.length) {
if (callback) {
callback.call(container, container);
}
}
}
});
if (!$.browser.msie) {
this.src = orgSrc;
} else if (this.complete || this.complete === undefined) {
this.src = orgSrc;
}
});
}
};
var imgAry = [];
self.each(function() {
if (self.opts.itemCallback) {
var $imgs;
if (this.tagName == "IMG") {
$imgs = this;
}
else {
$imgs = $('img', this);
}
self.bindEvents($imgs, this, self.opts.itemCallback);
}
if (self.opts.selectorCallback) {
if (this.tagName == "IMG") {
imgAry.push(this);
}
else {
$('img', this).each(function() {
imgAry.push(this);
});
}
}
});
if (self.opts.selectorCallback) {
self.bindEvents(imgAry, this, self.opts.selectorCallback);
}
return self.each(function() {});
};
$.fn.onImagesLoad.defaults = {
selectorCallback: null,
itemCallback: null,
callbackIfNoImagesExist: false
};
})(jQuery);
(function($) {
$.fn.elStretch = function(options) {
options = $.extend({
imagewidth: 1024,
imageheight: 768,
alt: false,
alttext: "alternative image description",
fadefirst: false,
interval: 5000,
fadingspeed: 1000,
arrayname: bgimages,
loadingani: true,
loadinggif: "img/loading.gif"
}, options);
return this.each(function() {
var st_originalheight = $(options.imageheight);
st_originalheight = st_originalheight[0];
var st_originalwidth = $(options.imagewidth);
st_originalwidth = st_originalwidth[0];
var st_interval = $(options.interval);
st_interval = parseInt(st_interval[0]);
var st_fadingspeed = $(options.fadingspeed);
st_fadingspeed = parseInt(st_fadingspeed[0]);
var st_array = $(options.arrayname);
if (options.interval <= options.fadingspeed) {
var st_interval = $(options.fadingspeed);
st_interval = parseInt(st_interval[0]) + 500;
}
var st_container = $("#elstretch");
var st_windowwidth = $(this).width();
var st_windowheight = $(this).height();
var st_bgcount = st_array.length;
var st_currentpos = 0;
function AttachFirstImage() {
st_container.prepend("<img class='stretch' src='" + st_array[st_currentpos] + "' alt='" + options.alttext + "' style='display: none;' />");
}
AttachFirstImage();
function ChangeSizesAndPositions() {
st_windowwidth = $(this).width();
st_windowheight = $(this).height();
var windowratio = st_windowwidth / st_windowheight;
var sourceratio = st_originalwidth / st_originalheight;
if (sourceratio < 1) {
} else {
if (windowratio >= sourceratio) {
var widthratio = st_windowwidth / st_originalwidth;
var newheight = st_originalheight * widthratio;
var newwidth = st_originalwidth * widthratio;
var topdifference = (st_windowheight - newheight) / 2;
$("img", st_container).css({
"width": newwidth,
"height": newheight,
"margin-top": topdifference,
"margin-left": "auto"
});
} else {
var heightratio = st_windowheight / st_originalheight;
var newheight = st_originalheight * heightratio;
var newwidth = st_originalwidth * heightratio;
var leftdifference = (st_windowwidth - newwidth) / 2;
$("img", st_container).css({
"width": newwidth,
"height": newheight,
"margin-left": leftdifference,
"margin-top": "auto"
});
}
}
}
if (options.fadefirst == true) {
$("img", st_container).fadeIn("slow");
} else {
$("img", st_container).show();
}
ChangeSizesAndPositions();
function Fader(st_fadingspeed, st_interval, st_container) {
function FadeImages() {
var currentimg = $("img", st_container);
var ciwidth = $(currentimg).width();
var ciheight = $(currentimg).height();
var cileft = $(currentimg).css("margin-left");
var citop = $(currentimg).css("margin-top");
console.log("st_currentpos (before): " + st_currentpos);
if (st_currentpos == (st_bgcount - 1)) {
var newpos = st_array[0];
} else {
var newpos = st_array[st_currentpos + 1];
}
var newimg = "<img class='new' src='" + newpos + "' alt='" + options.alttext + "' style='display: none; width: " + ciwidth + "px; height: " + ciheight + "px; margin-top: " + citop + "; margin-left: " + cileft + "'" + " />";
st_container.append(newimg).onImagesLoad({
selectorCallback: function() {
$("img.new", st_container).fadeIn(st_fadingspeed, function() {
$(currentimg).remove();
$(this).removeClass("new").addClass("stretch");
if (st_currentpos == (st_bgcount - 1)) {
st_currentpos = 0;
} else {
st_currentpos++;
}
console.log("st_currentpos (after): " + st_currentpos);
console.log("------------------------");
});
}
});
}
setInterval(FadeImages, st_interval);
}
if (st_bgcount > 1) {
Fader(st_fadingspeed, st_interval, st_container);
}
$(window).resize(function() {
ChangeSizesAndPositions();
});
});
};
})(jQuery);
| ready |
backstretch |
(function($) {
$.backstretch = function(src, options, callback) {
var defaultSettings = {
centeredX: true,
centeredY: true,
speed: 0
},
container = $("#backstretch"),
settings = container.data("settings") || defaultSettings,
existingSettings = container.data('settings'),
rootElement = ("onorientationchange" in window) ? $(document) : $(window),
imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
if (options && typeof options == "object") $.extend(settings, options);
$(document).ready(_init);
return this;
function _init() {
if (src) {
var img;
if (container.length == 0) {
container = $("<div />").attr("id", "backstretch").css({
left: 0,
top: 0,
position: "fixed",
overflow: "hidden",
zIndex: -999999,
margin: 0,
padding: 0,
height: "100%",
width: "100%"
});
} else {
container.find("img").addClass("deleteable");
}
img = $("<img />").css({
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
zIndex: -999999
}).bind("load", function(e) {
var self = $(this),
imgWidth, imgHeight;
self.css({
width: "auto",
height: "auto"
});
imgWidth = this.width || $(e.target).width();
imgHeight = this.height || $(e.target).height();
imgRatio = imgWidth / imgHeight;
_adjustBG(function() {
self.fadeIn(settings.speed, function() {
container.find('.deleteable').remove();
if (typeof callback == "function") callback();
});
});
}).appendTo(container);
if ($("body #backstretch").length == 0) {
$("body").append(container);
}
container.data("settings", settings);
img.attr("src", src);
$(window).resize(_adjustBG);
}
}
function _adjustBG(fn) {
try {
bgCSS = {
left: 0,
top: 0
}
bgWidth = rootElement.width();
bgHeight = bgWidth / imgRatio;
if (bgHeight >= rootElement.height()) {
bgOffset = (bgHeight - rootElement.height()) / 2;
if (settings.centeredY) $.extend(bgCSS, {
top: "-" + bgOffset + "px"
});
} else {
bgHeight = rootElement.height();
bgWidth = bgHeight * imgRatio;
bgOffset = (bgWidth - rootElement.width()) / 2;
if (settings.centeredX) $.extend(bgCSS, {
left: "-" + bgOffset + "px"
});
}
$("#backstretch, #backstretch img").width(bgWidth).height(bgHeight).filter("img").css(bgCSS);
} catch (err) {
}
if (typeof fn == "function") fn();
}
};
})(jQuery);
| ready |