CMotion Image Gallery & Lightbox 2.0

Printable View

02-02-2007, 03:13 PM
jpsmith

CMotion Image Gallery & Lightbox 2.0

1) Script Title: CMotion Image Gallery & Lightbox 2.0

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

3) Describe problem: After combining these scripts on the same page in my local server (localhost), the lightbox worked fine with some z-index tweaking, but I couldn't get the scrolling to work for the motion gallery. When I put this page on the web server so it would be easier to post this problem here, the scrolling on the motion gallery worked fine, but the lightbox stopped working. Here is the page I'm dealing with:

http://www.unioncityindiana.gov/in/R...s/Gallery.aspx

If it helps, the IE error I'm getting says Effects is undefined on line 320. Also 4 errors in FF's error console
02-02-2007, 04:47 PM
jscheuer1

Since you were having other problems locally, there may be additional problems. However, the external script file effects.js from the lightbox v2 distribution isn't on your server, at least not along with the other external script files, where I (and hopefully lightbox) expect it to be:

Code:

http://www.unioncityindiana.gov/in/Departments/MasterCssJs/effects.js

I suspect that adding it (uploading it to the server in that location) will fix lightbox but may break the other script. If so, it is most likely an onload event conflict and should be easy to fix, let us know what happens.
02-02-2007, 05:56 PM
jpsmith

Strangely enough, it seems that adding the effects.js to the directory has seemed to work somehow... I think it might be because i added an onload function that i found on other posts that i found on the forum...

Code:

<script type="text/javascript"> if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", initLightbox, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", initLightbox ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); initLightbox(); }; } else window.onload = initLightbox; } </script>

Now while this seems to no longer be a problem now that the web server is letting both scripts work, I'm trying to figure out why my local version is still having problems...

There is also an issue with IE not stretching the gallery across the whole page... Does this have something to do with the conditional comment?

EDIT: I was just told that i now need to fill the rest of this page with at least 3 more motion gallerys. I know that the lightbox 2.0 can handle this, but what about the motion gallery? Is this a case of using multiples of the script where i have to rename all the variables?
02-02-2007, 07:10 PM
jscheuer1

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Like:

Code:

<script type="text/javascript" src="/in/Departments/MasterCssJs/motiongallery.js"> /*********************************************** * CMotion Image Gallery- ? Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for source code * This copyright notice must stay intact for legal use * Modified for autowidth and optional starting positions in * http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06 ***********************************************/ </script>

Lightbox doesn't require this as it is third party and the author says he doesn't mind.

To fix IE (it is only IE 7 that seems to have this problem) put this in your body like so:

Code:

</head> <body>  <center> <img src="/in/img/header.gif" /> <form name="aspnet . . .

And, add to the onresize function in motiongallery.js (red):

Code:

onresize=function(){ if (typeof motioncontainer!=='undefined'&&motioncontainer.filters&&!IE7span){ motioncontainer.style.width="0"; motioncontainer.style.width=""; motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px'; } menuwidth=crossmain.offsetWidth; cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0; }

I'm not sure about multiples, there may be an object oriented version of the Cmotion script around somewhere. Otherwise, your assessment is correct unless you write an object oriented version. There is one other possibility, you could use an iframe to show additional Cmotion galleries but, Lightbox won't like iframes. However, there is a version around called Lytebox that will work OK with iframes in most cases.

Yes, there is an object oriented version of Cmotion:

http://www.dynamicdrive.com/forums/s...ad.php?t=13302
02-02-2007, 07:21 PM
jpsmith

Sorry about not adding that! Its up there now.

Also, thanks for the IE 7 fix and i guess everything else...

I'll be spending the rest of my day renaming variables... :rolleyes:

EDIT: Good news! I found an OO version of the cmotion script in a post you made back in september!
Take a look:

http://www.dynamicdrive.com/forums/s...ad.php?t=13302
02-02-2007, 08:11 PM
jscheuer1

Yes, I ran across it too, see my last post, slipped it in a little after you read it, I guess.

A little more information on IE 7 - I wrote both of these scripts (the upgrade you were using and the OO version) around the same time. IE 7 was still in beta so, I ignored it. As it turns out IE 7 does many things according to standards that prior IE versions did not so, must be excluded from the hacks I put in those scripts to account for IE 6 and earlier's lack of adherence to standards. From the point of view of the designer using the scripts, there is probably a better way to exclude IE 7 from those hacks but, what I laid out for you will work just fine in your (and probably most) case(s).

To apply it to the OO version, add the conditional span to the body as before and modify this function as shown:

Code:

function cmotionresize(){ for (var i_tem = 0; i_tem < cgals.length; i_tem++){ if (document.all&&document.all['motioncontainer'+i_tem]&&document.all['motioncontainer'+i_tem].filters&&!IE7span){ document.all['motioncontainer'+i_tem].style.width="0"; document.all['motioncontainer'+i_tem].style.width=cgals[i_tem].width; document.all['motioncontainer'+i_tem].style.width=Math.min(document.all['motioncontainer'+i_tem].offsetWidth, cgals[i_tem].maxw)+'px'; } cgals[i_tem].menuwidth=cgals[i_tem].crossmain.offsetWidth; cgals[i_tem].cross_scroll.style.left=cgals[i_tem].startpos? (cgals[i_tem].menuwidth-cgals[i_tem].actualwidth)/cgals[i_tem].startpos+'px' : 0; } }

I have a sneaking suspicion that if all of the installation instructions are followed, this may not be necessary. Particularly the setting of maxwidth in the calls, it must be less than the width of the image train.
02-02-2007, 08:36 PM
jpsmith

I've been developing sites for years now and javascript/dhtml is the only language that i haven't been able to grasp. On top of that, I'm the type of guy that dosen't admit defeat very easily...

I know what you're saying about IE 7. I've been following it since beta 3. I've had to re-code my css completely since it's been out, but at the same time I have to keep what has worked for the previous versions...

Thanks for all your help!
03-06-2007, 03:59 PM
jpsmith

Well it seems that here at work we've decided to put lots and lots of images in one image gallery, about 46 to be exact. The only issue now is that it will no longer scroll unless i comment out or remove the last image from the array.
what can i do to fix this new issue?

Oh yeah, here is the link:

http://www.southsalemchurchofchrist....BuGrounds.aspx
03-06-2007, 04:18 PM
jscheuer1

An invalid array entry can cause problems as may a missing image. Yeah, that last image:

/Gallery/Resources/Images/Fellowship Hall/Groundbreaking/VirginiaDig.jpg

isn't on the server, might be the problem. Works in FF and Opera without it but, those browsers are usually less picky about missing images.

One thing, use thumbnails! It takes forever to load and I have broadband!
03-06-2007, 04:59 PM
jpsmith

thanks for the quick reply and crits! good thing its a test page eh?
03-11-2007, 04:37 AM
electrocit

Cmotion plus Light box

I got the two to work by adding the lightbox funtion to the links in Cmotion the only thing I can't figure out in how to stop Cmotion form scrolling when in Lightbox. I used light box v1 my links in Cmoition look like this:

<a href="webport/imlarge/kgimages_13.jpg" rel="lightbox" ><img src="webport/kevingonzalez_13.jpg" border=0></a>

useing z-index I keep Cmoition on top.
03-19-2007, 08:25 PM
jpsmith

Here we go again...

Even with the thumbs i created, it seems as though the page still takes a while to load, but it isn't as bad as before... Anyway, now we seem to be having trouble with the first of this set of three. The error that is occurring this time is the fact that the lightbox isn't popping up. If you try it in IE 6 or even try the other 2 sets they work fine... Any thoughts?

Here is the link to what I'm talking about:

http://www.southsalemchurchofchrist....Tennessee.aspx