Cmotion/on-demand-loading each instance

[f-ReAk]

1) Script Title:
CMotion Image Gallery // Animated Collapsible DIV v2.01

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...iongallery.htm (more precise: http://www.dynamicdrive.com/forums/s...ad.php?t=13242 )
http://www.dynamicdrive.com/dynamici...edcollapse.htm
3) Describe problem:
These two are really really greatscripts, but after I finally got them the way I wanted them, a small 'problem' occured.

On the Dummypage http://denofzen.de/cmotion/kombi4.html you can see a slightly modified version (toggle modified to a "toogle2" function) of Animated Collapsive DIV, opening a OOrientetad version of the CMotion Image Gallery (from http://www.dynamicdrive.com/forums/s...ad.php?t=13242).
The hidden DIVs are hidden by JavaScript, not with display:none because of a conflict with the scroller.

Everything works fine, but I'm worried about the page's loadingstimes. I'm planning a quite image-filled portfolio. So I thought it would be best to load the javascript to create the scroller in the moment of first "toggle2ing" - but I'm getting confused creating the scroller later by innerHTML.

My aim is to reduce the frist opening-loadingtime by loading everyCMotion Gallery on demand - but to be honest, I have no clue to achieve this. Tried around with ajax today, but this seems a bit like breaking a fly on the wheel to me.

I appreciate your help!

best regards f-ReAk

[jscheuer1]

First off, you have another problem. If the page isn't cached, the galleries will not work. As folks coming to your page for the first time will not have the page cached, this is a real issue. The gallery divisions (in your toggling code) start off display none. I'm not sure if that's the cause or not.

Now, what your asking about might solve this too. In the oo gallery script, this (at the end of function cmotiongallery) is what sets the final things up for each gallery:

 . . . iner'+this.galid+'">'+this.gallery.join(this.usespace)+'<\/nobr>\n'+
'\n'+
'<\/div>\n'+
'<\/div>')
this.fillup();
}

After the fillup runs, the gallery is ready to use, before - its just a collection of empty HTML elements and javascript properties. If you were to remove that, and execute it at an opportune time, like after the gallery were made visible for the first time, it might be good.

Now, each gallery is represented as an object:

cgals[num]

where num is the instance number, 0 for the firsts, 1 for the second, and so on for however many you got.

So, we can do:

if(!cgals[0].setToRun){
cgals[0].fillup();
cgals[0].setToRun = true;
}

for each gallery as required once they become visible. I'll leave it to you to find where in your toggling code to do that, unless you can't figure it out (let me know). By setting the .setToRun (an arbitrary property name), we will prevent running each gallery's fillup() more than once per page visit.

[f-ReAk]

First off, you have another problem. If the page isn't cached, the galleries will not work. As folks coming to your page for the first time will not have the page cached, this is a real issue. The gallery divisions (in your toggling code) start off display none. I'm not sure if that's the cause or not.

Holy.. you're right. And at the moment I have no clue how to fix it.

But if I have understood you right, the method of hiding the divs in the collapsingscript is irrelevant? As long as the gallery-stripe is hidden in various ways, no fillup occurs.

I've understood the meaning of your code and I'm quite sure where to place it - but I guess my syntax is wrong while just inserting your snippet into the educated guessed place in the animatedcollapse.js wont work? - Iimplemented you code in my toggle-function shortly before and after the div is shown - nothing happend. I'm no hero in javascript. tbh- to me it's quite a struggle atm

We talked about instances - just to be sure - an instance of the script istelf (maybe a gal with apples and one with beer) or an exact duplicate of another content (same identifier)?

Would be so great, if you could have a second look!
best regards f-ReAk

[jscheuer1]

You haven't removed:

this.fillup();

from the oo gallery script yet. None of it will work if you leave that in.

Once you get rid of that, try:

<a href="javascript:toggle();"
onclick="animatedcollapse.toggle2('print');
if(!cgals[0].setToRun){
cgals[0].fillup();
cgals[0].setToRun = true;
};return false;">toggle</a>

and:

<a href="javascript:toggle();"
onclick="animatedcollapse.toggle2('web');
if(!cgals[1].setToRun){
cgals[1].fillup();
cgals[1].setToRun = true;
};return false;">toggle</a>

respectively for your links.

You could even make a separate function (add to the end of the oo gallery script):

function activateGal(num){
if(!cgals[num].setToRun){
cgals[num].fillup();
cgals[num].setToRun = true;
}
}

Then a link could be:

<a href="#" onclick="animatedcollapse.toggle2('print');activateGal(0);return false;">toggle</a>

Note: Once you've moved the function calls to the onclick event and return false for that event, the href can be anything, I usually prefer a descriptive dummy 'javascript:' href though (as in my first two examples).

[f-ReAk]

seems to work fine now - thank you so much man!


but the real cause is still there - the images are loaded on startup not just by clicking the togglebutton. on the other hand i could theoretically cope with it.

To see the dummy-result:
click

Any idea how to figure out a deal with the dynamically loading (not just filling/activating?)

BEST regards,
f-ReAk

[jscheuer1]

OK, well you may have a loss of flexibility the way you are doing things in the animated collapse script, but if so, you will probably be able to work that out.

With just theses two changes to the oo gallery script you can get it to wait until the first time a gallery is revealed to load its images. Both are highlighted. I'm not sure how well this will work out in actual practice though (there will be some lag). For the first one I removed some code from the highlighted line:

'<nobr id="trueContainer'+this.galid+'">'+this.gallery.join(this.usespace)+'<\/nobr>\n'+

The second highlighted line is a completely new line:

 . . . th+';height:'+this.height+'px;position:relative;left:0;top:0;overflow:hidden;">\n'+
'<div id="motiongallery'+this.galid+'" style="position:absolute;left:0;top:0;white-space: nowrap;">\n'+
'\n'+
'<nobr id="trueContainer'+this.galid+'"><\/nobr>\n'+
'\n'+
'<\/div>\n'+
'<\/div>')
//this.fillup();
}

function ietru . . . 

 . . . httime);
this.movestate="";
}
}

cmotiongallery.prototype.fillup=function(){
if (iedom){
document.getElementById('trueContainer'+this.galid).innerHTML=this.gallery.join(this.usespace);
this.crossmain=document.getElementById? document.getElementById("motioncontainer"+this.galid) : document.all["motioncontainer"+this.galid];
if(typeof this.crossmain.style.maxWidth!=='undefined')
this.crossmain.style.maxW . . .

I had to truncate the script (above) for the character posting limit. Here (attached) is the full version:

Attachment 1843

[f-ReAk]

Thank you again, I tried a bit around with different filesizes and loadingtimes. I've come to the conclusion to leave it by the old version with no-on-demand loading. Depending on the connectionspeed eigher lag occured or the gallery wasn't loaded properly at all.

But now the script works very well anyways - thx for your help.
You and your scripts definitly rock!


(I guess thread can be closed now)

[James_Kelly]

I think I am having a similar dilmena ... but i could not really implement the logic in the previous posts.

Here is the current build ... it works fine in firefox but the second gallery does not work in safari.

http://levelnyc.com/build3/portfolio/


I am using your motiongallery_oo.js

in combination with this accordion: http://www.aughenbaugh.us/accordion2/Index.html


I was hoping that you could shed some light to my problem? I imagine it stems from the way that parts of the page are hidden? Thanks in advance