Fading issue in IE
Fading issue in IE
Or well something like that. Basically i wrote a little plugin that
load and switching between images, everything works perfectly apart
from the fading transition not working under IE.
I think it might have something to do with the way IE handle new
images loaded in an image tag but I am unsure about it. It's nothing
to do with jQuery either as fading works fine in a simple use. Anyway
no idea what is wrong so I hope someone in here might be able to help
or point me in thr right direction.
Here is the plugin code
// closure
;(function($)
{
// plugin
$.fn.nxSwapper = function(settings)
{
// private variables
// old key, new key, old id, new id, new loaded, element displayed,
link, container, container height,
// container width, current effect, new effect to use, fx direction,
image array, image array size, link in new window
var ok, nk, oid, nid, nl, e, url, self = this, sheight, swidth, cfx,
nfx, fxdir, img, size, nwin;
// default settings
var defaults =
{
// amount of time an image will be displayed (used if no time is
set per image)
displayTime: 3000,
// swapped effect (default effect to use, effect can be set per
image. supported: 'squeeze', 'fade', 'slide' or 'toggle')
effect: 'fade',
// slow, normal, fast or time in ms
effectSpeed: 'slow',
// effect type ONLY for squeeze and slide ('horizontal' or
'vertical')
effectDirection: 'vertical',
// prefix (use if you need multiple swapper per page)
prefix: 'nxSwapper',
// url to the file that generate the JSON
fileURL: '/assets/jsp/nxswapperimages.jsp',
// open links in a new window
linkInWindow: false,
// randomely pick a record
random: false,
// used to pass directly the JSON instead of having the plugin load
it
data: false
};
// merge defaults with given settings
var o = $.extend({}, defaults, settings);
// public method to allow property value change on the fly
$.fn.nxSwapper.set = function(property, value)
{
// property exists
if (o[property])
{
// if effect dont change straight away (avoid bug if animation in
progress)
if ('effect' == property) nfx = value;
else o[property] = value;
// success
return true;
}
// failed
else return false;
};
// public method to get property value
$.fn.nxSwapper.get = function(property)
{
// return property value
return o[property];
};
// data available?
if (!o.data)
{
// get the JSON object
$.getJSON(o.fileURL, function(d, s)
{
// loaded with success
if (s == 'success')
{
// set data & run
data = d;
_init();
}
else alert(s);
});
}
else
{
// set data & run
data = o.data;
_init();
};
// initialize function
function _init()
{
// cache array length
size = data.images.length;
// cache array
img = data.images;
// cache container width
swidth = $(self).innerWidth();
// cache container height
sheight = $(self).innerHeight();
// check for elements
if (size)
{
// add 2 images tag to the element and hide them
$(self).append('<img id="'+o.prefix+'Img1"><img id="'+o.prefix
+'Img2">');
// image tags css
$(self).children('img').css(
{
position: 'absolute',
top: 0,
left: 0,
zIndex: 800
});
// add div for the on mouse event text
$(self).append('<div></div>').children('div').eq(0).css(
{
display: 'none',
zIndex: 802,
position: 'absolute'
}).attr('id',o.prefix+'Text');
// set first image in the first tag and switch z-index
$('#'+o.prefix+'Img1').attr('src', img[0].src).css('zIndex',
801).show();
// url?
if (img[0].url)
{
// save url
url = img[0].url;
// change element cursor
$(self).css('cursor', 'pointer');
// open link in new window
if (img[0].linkInWindow) nwin = true;
else nwin = o.linkInWindow;
// set click event
$(self).click(function()
{
// make sure we have a url
if (!url) return false;
// new window?
if (nwin)
{
// for new window return false
window.open(url);
return false;
}
else window.location = url;
});
};
// text?
if (img[0].text) $('#'+o.prefix+'Text').text(img[0].text);
// on mouse over / out effect
$(self).hover(function() { if ($('#'+o.prefix+'Text').text()) $
('#'+o.prefix+'Text').fadeIn(o.effectSpeed); }
, function() { if ($('#'+o.prefix+'Text').text()) $('#'+o.prefix
+'Text').fadeOut(o.effectSpeed); });
// make sure we got more than one image before starting process
// if not there is nothing else to do
if (size > 1)
{
// Set src for second image (so it preload in background)
$('#'+o.prefix+'Img2').attr('src', img[1].src);
// Set array key (old)
ok = 0;
// Set element displayed (1 or 2)
e = 1;
// Set time out swap
if (img[0].time) setTimeout(_swap, img[0].time);
else setTimeout(_swap, o.displayTime);
};
};
};
// swapping function (timed out)
function _swap()
{
// Generate new array key
if (o.random) nk = _random();
else nk = ok+1;
// reset needed?
if (nk == size || ok == nk) nk = 0;
if (e == 1)
{
oid = '#'+o.prefix+'Img1';
nid = '#'+o.prefix+'Img2';
e = 2;
}
else
{
oid = '#'+o.prefix+'Img2';
nid = '#'+o.prefix+'Img1';
e = 1;
};
// load image into tag
$(nid).attr('src', img[nk].src).onload = _load();
};
function _load()
{
// reset container
_reset();
// text?
if (img[nk].text) $('#'+o.prefix+'Text').text(img[nk].text);
// new effect?
if (nfx)
{
o.effect = nfx;
nfx = false;
};
// specific image effect
if (img[nk].effect) cfx = img[nk].effect;
else cfx = o.effect;
// Transition
switch (cfx)
{
// fade
case 'fade':
_fade(oid, nid);
break;
// squeeze
case 'squeeze':
_squeeze(oid, nid);
break;
// slide
case 'slide':
_slide(oid, nid);
break;
// toggle
default:
_toggle(oid, nid);
};
// set old key
ok = nk;
};
// Generate a random key
function _random()
{
// generate random key
var rk = Math.floor(Math.random() * size);
// if random key equal old key just take next key
if (rk == ok) rk = rk+1;
// return key
return rk;
};
// reset function
function _reset()
{
// empty text holder and hide
$('#'+o.prefix+'Text').text('').hide();
// reset images tag
$(self).children('img').css(
{
height: sheight,
width: swidth,
opacity:100,
top:0,
left:0
})
.show();
// reset container cursor css
$(self).css('cursor','auto');
// reset url
url = '';
};
// sliding function
function _slide(oid, nid)
{
// make sure container overflow is hidden
$(self).css('overflow','hidden');
// image effect direction?
if (img[nk].effectDirection) var fxd = img[nk].effectDirection;
else var fxd = o.effectDirection;
// effect direction
if ('horizontal' == fxd)
{
// animation settings
var osets = {left:'-'+swidth};
var nsets = {left:0};
// move nid to the right of oid
$(nid).css('left', swidth);
}
else
{
// animation settings
var osets = {top:'-'+sheight};
var nsets = {top:0};
// move nid to the bottom of oid
$(nid).css('top', sheight);
};
// animate old out of the way
$(oid).animate(osets, o.effectSpeed);
// animate new one in
$(nid).animate(nsets, o.effectSpeed, function()
{
_off(oid);
_on(nid);
});
};
// squeezing function
function _squeeze(oid, nid)
{
// image effect direction?
if (img[nk].effectDirection) var fxd = img[nk].effectDirection;
else var fxd = o.effectDirection;
// effect direction
if ('horizontal' == fxd) var sets = {width:0, height:sheight};
else var sets = {height:0, width:swidth};
// animate
$(oid).animate(sets, o.effectSpeed, function()
{
// sort elements out
_off(oid);
_on(nid);
});
};
// fading function
function _fade(oid, nid)
{
$(oid).fadeTo(o.effectSpeed, 0, function() { _off(oid); });
$(nid).fadeTo(o.effectSpeed, 100, function() { _on(nid); });
};
// toggle function
function _toggle(oid, nid)
{
_off(oid);
$(nid).show();
_on(nid);
};
// off function (sort out element hidden)
function _off(id)
{
// switch z-index
$(id).css('zIndex', 800);
};
// on function (sort out element showed)
function _on(id)
{
// switch z-index
$(id).css('zIndex', 801);
// on click url?
if (img[nk].url)
{
// save url
url = img[nk].url;
// change element cursor
$(self).css('cursor','pointer');
// new window settings
nwin = img[nk].linkInWindow == true ? img[nk].linkInWindow :
o.linkInWindow;
};
// text (used on mouseover)
if (img[nk].text) $('#'+o.prefix+'Text').text(img[nk].text);
// set time out for next swap
if (img[nk].time) setTimeout(_swap, img[nk].time);
else setTimeout(_swap, o.displayTime);
};
};
})(jQuery);
The only markup needed is a div or an other element as the image tag
are added by the system.
The only idea I have is to wrap the img into div and play with the div
tags instead of the image tags, could this ressolve the issue
encountered?
Also feel free to point anything out that could be done better or that
would be an issue.
Thanks in advance