PDA

View Full Version : Expando Image Script won't reset when using Dynamic Ajax Content



KevLar
02-10-2010, 07:47 PM
1) Script Title: Expando Image script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

3) Describe problem:

I am working on a website that uses Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) to open pages in DIVs. The website is www.bmorefire.com One section uses the Expando Image Script [Apparatus]. The images being expanded have hrefs and open other pages in the DIV(Currently, only the top row in Apparatus has links.). The issue occurs when you go to the section using Expando [Apparatus] and click on an expanding image link. Then, using the menu navigation on the left, go back to the expando section [Apparatus]. The image you clicked originally now registers as expanded and now shrinks and bugs out the rest of the expanding images.

I can't figure out how to have the apparatus.html page reset while using Dynamic Ajax Content (which doesn't allow things like meta refresh). Is there anyway the expando script can be edited so that it resets the expansion when it is clicked? As in, when an expando image with a link is clicked it goes back to thumbnail before page is loaded? Any other ideas to correct this?
I'm not that great at coding.

Thank you,
Kevin

KevLar
02-12-2010, 06:22 PM
If this is too hard to do please tell me so I can investigate using other image scripts. I really like the Expando though.

jscheuer1
02-13-2010, 01:17 PM
Since this involves AJAX, which is domain restricted, it would be difficult to set up a local demo, even if I did I couldn't hope to include every potentially significant aspect of your page's setup, so I cannot be certain of the resolution for this problem. But if you work with me, we can get there. Perhaps we will hit it on the first try.

The problem is obvious. By linking from an expando image to other AJAX loaded content, the page is 'short circuiting' the expando script, making it stop at the top, as it were. When you then return to the apparatus import, the script is confused, thinking the linked image that was clicked is already expanded, when it no longer is.

Their may be no ideal solution. What you suggest, 'a reset', will probably have to resize the images (yes images - more than one may be at least partially expanded when the user clicks on one of them) to their original (as dictated by their attributes) sizes. This is a little jarring, but not too bad. One way to do that would be to use this updated version of the script:


/* 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/13/2010 8:11am
*/

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';
};
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();
}
}

function imClick(e){
var t = e && e.target? e.target : event && event.srcElement? event.srcElement : null, d, i;
if(t && expConIm.r.test(t.className) && t.parentNode.href){
d = document.images, i = d.length - 1;
for(i; i > -1; --i){
if(d[i] && expConIm.r.test(d[i].className)){
d[i].style.width = d[i].style.height = '';
}
}
expConIm.ims = {};
}
}

expConIm.ims = {};

expConIm.r = /\bexpando\b/;

if(document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
document.addEventListener('click', imClick, false);
}
else if(document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
document.attachEvent('onclick', imClick);
}
})();
}

Give this a shot and let me know what you think.

KevLar
02-14-2010, 12:31 AM
Thank you very much John. I'm definitely willing to work with you, especially since you're doing the work and i'm just ftp'in. haha.

I used your modified script on the site and Expando is working a lot better. The bug can still occur if, during the lag in between clicking/reset/and new div load, you move the pointer over another img. To see the bug: let the middle img on the top row expand all the way and click it at either of the far sides and don't let the pointer move. This will make it shrink and the pointer be on top of the left or right img causing the bug to occur upon going back to Apparatus.

I really appreciate your help with this.

Thanks,
Kevin

jscheuer1
02-14-2010, 12:46 PM
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:


/* 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.

KevLar
02-15-2010, 12:22 AM
Thank you very much I believe this is the answer. Looks good.
:)

-Kevin

Minnnde
03-15-2011, 12:20 AM
Hello guys,

Could you help me with this piece of code?
I want to keep the area of the images to be the same all the time. That means that one of the images should be always expanded and only when the mouse is over another image the previous should start shrinking letting the other image to expand.