OK, it occurred to me that with your setup, which appears to include the following 'rule':
All links to expando images are AJAX links which replace all expando content.
If that's the case, possibly in some other similar cases, we can reset without resizing. It's worth a shot. It will look smoother for the user, and should avoid the issue you mention in your last post. The only problem I can think of would be if there were a link from an expando image that wasn't an AJAX link. In certain browsers hitting the back button after that would cause the expando images that were in full or partial expansion to be unable to fully contract. Your results may vary, so let me know how this version goes for you:
Code:
/* Expando Image Script ©2008-2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
Updated: 02/14/2010 7:33am
*/
if(document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20, widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
}, targ, addAttach;
function expConIm(im){
im = im || window.event;
var type;
if(im.type){
type = im.type;
}
if(!expConIm.r.test(im.className)){
im = im.target || im.srcElement || null;
}
if(!im || !expConIm.r.test(im.className)){
return;
}
var e = expConIm,
resize = function(){
if(!e.ims[i]) {return;}
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight(e.ims[i].w);
im.style.height = widthHeight(e.ims[i].h);
if(e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}else if(!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for(i; i > -1; --i)
if(d[i] === im) {break;}
i = i + im.src;
if(!e.ims[i] && im && type === 'mouseover'){
e.ims[i] = {im: new Image(), jump: 0};
e.ims[i].im.onload = function(){
im.title = im.alt = '';
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e(im);
};
e.ims[i].im.src = im.src;
return;
}
if(e.ims[i] && e.ims[i].timer) {clearTimeout(e.ims[i].timer);}
if(e.ims[i]){
e.ims[i].d = !e.ims[i].d;
resize();
}
}
targ = (function(){
return typeof event !== 'undefined'? function(){return event.srcElement || null;} :
function(e){return e.target || null;};
})();
function imClick(e){
var t = targ(e);
if(t && expConIm.r.test(t.className) && t.parentNode.href){
expConIm.ims = {};
}
}
expConIm.ims = {};
expConIm.r = /\bexpando\b/;
addAttach = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})();
addAttach(document, 'mouseover', expConIm);
addAttach(document, 'mouseout', expConIm);
addAttach(document, 'click', imClick);
})();
}
We could add in some sort of language that tries to determine if we have an AJAX link or a regular link, but since there are myriad ways an AJAX link can happen, it would have to be tailored to the AJAX code you are using. I would want to avoid that so as to be able to have the new code applicable to anyone that wants to use it. I'm thinking of adding a configuration option for the script or (more likely) a class name for the links as a flag for the script as to which behavior to follow on linked expando images. In some setups, some other (or all in some cases) links on the page would need special treatment visa vis expando, so I'm going to ponder that one a bit and submit an update to DD for this once I think I have all eventualities covered.
But for now, the update in this post should work out, or at least point us in the right direction for your setup.
Expando Image Script won't reset when using Dynamic Ajax Content
Reply With Quote
Bookmarks