[DHTML] Cmotion object oriented

[jscheuer1]

1) CODE TITLE: Cmotion object oriented

2) AUTHOR NAME/NOTES: jscheuer1/Dynamic Drive - I took the code from this script that I had already recently modified and made it object oriented so that multiple Cmotion image galleries can be rendered on a single page. I used the Ultimate Fade-in Slide Show as a guide, that and trial and error. It has worked out pretty well I think. Being object oriented, it no longer needs an onload event but, that made for some odd goings on in some browsers so, I devised a way for it to also check to be sure it knows the dimensions of the images before finalizing its initialization in those browsers. The demo is just two galleries on one page but, the code is well documented.

3) DESCRIPTION: An object oriented version of the Cmotion image gallery.

4) URL TO CODE:

http://home.comcast.net/~jscheuer1/s...cmotion_oo.htm

or, ATTACHED BELOW (see #3 in guidelines below):

[Twey]

Nice work. A word about constructor parameters: it's not usually a good idea to have optional parameters to the constructor, since if one has more than one, the user has to enter all the parameters if s/he only wants to set the last one (and it leads to long chains of incomprehensible values). Rather, a setter function for each optional parameter is usually a better idea. Also, of course, every parameter that can be made optional, should be made optional -- the only parameter I can see there that can't have a suitable default value is gallery_array_name.

Being object oriented, it no longer needs an onload event but, that made for some odd goings on in some browsers

I'd think that the odd goings on were probably the original reason for the onload event, since I can't see object-orienting a script removing the need for an onload event.

if(document.body.filters)
thewin.resizeTo(actualWidth+12, actualHeight+70);

Ouch, browser detection.

[blm126]

Nice, this will probably help a lot of people who want to use more than one of them on the page.

[mwinter]

The code I posted in response to PearlDoves' connectivity thread already accomplishes this, with the advantage that it isn't completely dependent upon scripting. The only feature that's missing is the starting point, which I don't think is particularly useful. The dimensions and positioning are controlled using CSS.

Mike

[jscheuer1]

Nice work. A word about constructor parameters: it's not usually a good idea to have optional parameters to the constructor, since if one has more than one, the user has to enter all the parameters if s/he only wants to set the last one (and it leads to long chains of incomprehensible values). Rather, a setter function for each optional parameter is usually a better idea. Also, of course, every parameter that can be made optional, should be made optional -- the only parameter I can see there that can't have a suitable default value is gallery_array_name.I'd think that the odd goings on were probably the original reason for the onload event, since I can't see object-orienting a script removing the need for an onload event.

if(document.body.filters)
thewin.resizeTo(actualWidth+12, actualHeight+70);

Ouch, browser detection.

Thanks, I like your suggestions and will consider them for future work. I was following the template established by DD's Ultimate Fade-in script, as mentioned. Folks seem to do OK with it, not too many parameters and it does insure that the uninitiated will at least probably consider that certain parameters should be set to get any particular look to the script. I truly see how adding more parameters would get unwieldy. I think I stumbled upon a neat way to deal with additional parameters with my:

 // Use a space character between each image for this gallery? (use 1 for yes, 0 for no):
gallery.usespace=1;

Which I think is assigning a property to the array object used by the function object, making it uniquely accessible to that particular thread of the function object as this.gallery.usespace.

About the browser detect, I wasn't real happy about that but, IE is the only browser that I am aware of that can be pretty much be reliably depended upon to resize scripted windows, or that needs to. It's just for the enlarge function anyway, you can use whatever you like or nothing for that part of the script:

 //function used optionally to enlarge an image. Change as desired:
function enlargeimage(path, optWidth, optHeight){

In the original versions, the onload event was a way of ensuring that the browser knew the dimensions of the images involved in the image train before initializing. Folks had complained, if they had a lot of other images on the page, that it took too long to load the gallery. I now check to see if the images involved in the gallery are 'complete'. Seems to work well.

[jscheuer1]

The code I posted in response to PearlDoves' connectivity thread already accomplishes this, with the advantage that it isn't completely dependent upon scripting. The only feature that's missing is the starting point, which I don't think is particularly useful. The dimensions and positioning are controlled using CSS.

Mike

You can't expect me to always read all of your threads, Mike. If you want to post a script in this forum, at any time, feel free. I bet it will be very nice work!

Oh, and I like your script. The demo does not appear to resize with the viewport though. I did use css for for much of the script but, it is written by the script, for those folks who would otherwise be tempted to edit it incorrectly. I've left hooks for the experienced coder to override virtually everything via a stylesheet though. This is documented in the minimal stylesheet that accompanies my demo.

[mwinter]

You can't expect me to always read all of your threads, Mike.

I didn't expect you to. Long threads attract my attention...

If you want to post a script in this forum, at any time, feel free.

That's unlikely, though if George or anyone else wants to use what I write for people in these forums, they're welcome.

Oh, and I like your script. The demo does not appear to resize with the viewport though.

The design of the document is the limiting factor, not the script. The content can only expand within a region of 10em (160px, on most default configurations). If the document was wider, text would be difficult to read (assuming the style sheet was to be applied to other documents on the site). If it was narrower, content would start to reflow in ways that wouldn't look very nice with that design.

If you open the example in Firefox, and, using the Edit CSS feature of Chris Pederick's Web Developer toolbar, remove the min-width property declaration in the #wrapper rule (almost half way down) [1], you can see that the script has no minimum size. It works just as well at 100px wide as it will at 1000px.

Mike

[1] Don't close the toolbar otherwise the style sheet will be reset.

[ddadmin]

John:
I'm going to wait for the right time to update the script on DD to use this version. I think front and center people will appreciate the ability to have multiple cmotion galleries on the same page.