CMotion gallery won't scroll if it starts off display:none

[BelliLint]

1) Script Title: CMotion Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ongallery2.htm

3) Describe problem: I have used this script on several gallery sites I've developed - clients really like it! I'm now using this script in conjunction with Scriptaculous effects. In particular, I am trying to fade into view the gallery when selected. The problem is that, if the gallery starts off with display:none then it won't scroll once it has been made visible. You can see the site in development here: www.brainflex.ca/catta/metalwork.html and click on "the finished work"

It is, of course, populated with enough thumbs that it should scroll. The code has recently been modified so that I am not setting the style of the motiongallery to display:none, but I am setting the style property of an outer div in which the motiongallery is nested to display:none.

Any ideas to solve this appreciated. Thanks.

[BelliLint]

Is nobody able to give me any ideas for fixing this?

[jscheuer1]

When an element is display: none; it has no layout - no dimensions. Many scripts where movement is involved (CMotion included) rely upon their markup's dimensions in order to initialize correctly. By setting a containing element to display: none; the display property is inherited by the gallery. It doesn't know how big it is.

I loaded up your page, clicked on 'the finished work' and pasted this into the address bar:

javascript:void(fillup())

and hit enter. The gallery worked. So I would assume that a callback for the effect to the same command should do the trick. I'm no expert on scriptaculous, but from looking at the documentation I found here:

http://www.tutorialspoint.com/script...parameters.htm

I would assume that something like so (addition red):

function showGallery1() {
	new Effect.Fade('metalwork-title');
	new Effect.Fade('metalwork-nav-landing');
	new Effect.Fade('metalwork-triptych');
	new Effect.Fade('Gallery2', { delay: 0.0 });
	new Effect.Appear('Gallery1', { delay: 0.5, afterFinish: fillup }); 
}

could work out well.

[BelliLint]

you got it!

thank you, thank you, thank you!

i'm going to make a donation right now.

[BelliLint]

Hey John,

This fix worked well upon first glance, but I've got a further complication (of course). There are two galleries on the page, however only one is ever seen at a time - they are in the exact same position, and if one is visible the other is hidden.

I know that you've rewritten your script code in an object-oriented framework so that we can place multiple galleries on the same page. But when I looked at it, I saw that the code was edited for the horizontal version, not the vertical one. Not being well enough acquainted with the code to make the necessary edits to the vertical one, I thought that it didn't really matter to me since I wouldn't actually be using both galleries at the same time.

But now this issue...Only the first gallery on the page will scroll. There are in fact two pages with two galleries each, and it's the same issue on both pages: the first gallery to be coded on the page will scroll, the second one will not.

So, I wonder, do you think I need to go full out & replace the script with an OO version? Or could this be simply a matter of a variable needing a different name in the two copies of the gallery on the same page?

Thanks for your help,
Andrea

[jscheuer1]

Edit: This post has been changed to reflect a new version of the OO script, check the time stamp below this post to make sure you are using the version in effect when the edit to this post was made.

Well, I was wondering about that. I hadn't really looked at your page in detail, not enough to know for sure if that would be an issue, but I had my suspicions - if only because it looked like you were trying to run two CMotion II galleries on the one page. But I figured you might already have that part worked out.

Anyways, the best approach would be an Object Oriented version. I have one here (demo page):

http://home.comcast.net/~jscheuer1/side/cmotion2_oo.htm

script:

http://home.comcast.net/~jscheuer1/s...gallery2_oo.js

css style:

http://home.comcast.net/~jscheuer1/s...ystyle2_oo.css

There are a few differences - in no particular order:

• The CSS uses classes for efficiency.
  
• The markup only has an id for the main container, each gallery must have a separate unique id.
  
• Setting the individual characteristics for a given gallery is now done as properties of an object, rather than as global variables for the non-Object Oriented version.

You can see all of this in the various files. Now, I've initialized my two galleries automatically onload. But you cannot do that, you will run into the same problem you were having with the non-OO version. However, you should be able to add the noload property to your gallery object(s) and then simply change:

new Effect.Appear('Gallery1', { delay: 0.5, afterFinish: fillup });

and similar to:

new Effect.Appear('Gallery1', { delay: 0.5, afterFinish: CMotionII.gals.g1.load });

I've set each gallery to only be able to be loaded once (this may be overridden if needed, but should be good for your your application of this script), so you must remove/disable the above onload function.

Any questions, let me know.

[BelliLint]

Hey John,

It took some tinkering to get it all straight, but I (we) did it! You can see it in motion at brainflex.ca/catta.

Cheers!
Andrea