Log in

View Full Version : motiongallery.js in conflict with another script?


haven147
11-04-2009, 02:32 PM
1) Script Title: CMotion Image Gallery

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

3) Describe problem:
I am using this script on the following page:
http://www.carolincollins.com/Cuasnog/modx/index.php?id=2

This site is nearly complete except for the image gallery which suddenly is not working. At one stage before it also did not work but I got it fixed. For the life of me I can't remember how...very embarrassing!! The only change since it did work that I recall making is that I changed the sequence of some of the divs around to amend the layout of the page. I tried to reverse it again but that made no difference. I also made some changes to margins and padding but can't imagine that this could have any impact on the script not running. I have seen posts that talk about different scripts being in conflict with each other? I am ready to pull out my hair! I am a newbie, so any help would be hugely appreciated!!!

Below is the relevant code of the page:




<link rel="stylesheet" type="text/css" href="assets/templates/cuasnog/css/cuasnog.css" />
<link rel="stylesheet" type="text/css" href="assets/templates/cuasnog/css/gallerystyle.css" />
<link rel="stylesheet" type="text/css" href="assets/templates/cuasnog/css/lightbox.css" media="screen" />

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="assets/templates/cuasnog/css/IE7styles.css" /><![endif]-->

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->


<script type="text/javascript" src="assets/js/prototype.js"></script>
<script type="text/javascript" src="assets/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="assets/js/lightbox.js"></script>
<script type="text/javascript" src="assets/js/motiongallery.js"></script>

</head>

<body>

<div id="container">

<div id="header">
...
</div> <!--end header -->

<div id="navTop">
......
</div> <!--end navTop -->

<div id="content" class="clrflt">
<div id="sidebarRight">
<div id="mainContent">
<h1>Our Picture Gallery</h1>
<p>&nbsp;</p>
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position: absolute; left: 0pt; top: 0pt; white-space: nowrap;">

<a title="Double Room" rel="lightbox[cuasnog]" href="assets/images/pic1.jpg"><img src="assets/images/thumb/pic1_thumb.jpg" border="1" alt="" /></a>
<a title="Lounge" rel="lightbox[cuasnog]" href="assets/images/pic2.jpg"><img src="assets/images/thumb/pic2_thumb.jpg" border="1" alt="" /></a>
<a title="Kitchen" rel="lightbox[cuasnog]" href="assets/images/pic3.jpg"><img src="assets/images/thumb/pic3_thumb.jpg" border="1" alt="" /></a>
<a title="Triple Room" rel="lightbox[cuasnog]" href="assets/images/pic4.jpg"><img src="assets/images/thumb/pic4_thumb.jpg" border="1" alt="" /></a>
<a title="En-suite Bathroom" rel="lightbox[cuasnog]" href="assets/images/pic5.jpg"><img src="assets/images/thumb/pic5_thumb.jpg" border="1" alt="" /></a>
<a title="Bathroom" rel="lightbox[cuasnog]" href="assets/images/pic6.jpg"><img src="assets/images/thumb/pic6_thumb.jpg" border="1" alt="" /></a>
<a title="Cuasnog Bed &amp; Breakfast" rel="lightbox[cuasnog]" href="assets/images/pic7.jpg"><img src="assets/images/thumb/pic7_thumb.jpg" border="1" alt="" /></a>
<a title="Double Room" rel="lightbox[cuasnog]" href="assets/images/pic8.jpg"><img src="assets/images/thumb/pic8_thumb.jpg" border="1" alt="" /></a>


</div><!--end motiongallery -->
</div><!--end motioncontainer -->
<div id="homeText">
.....
</div><!--end homeText -->
</div> <!--end mainContent -->
<div id="banner">
<div id="bannerText">
.......
</div> <!--end bannerText -->
</div><!--end banner -->
</div> <!--end sidebarRight-->

</div> <!--end content -->

<div id="footer" class="clrflt">
.....
</div> <!--end footer -->

</div> <!--end container -->



</body>
</html>
jscheuer1
11-04-2009, 02:56 PM
You deleted part of the markup for the gallery:


<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position: absolute; left: 0pt; top: 0pt; white-space: nowrap;">
<nobr id="trueContainer">


<a title="Double Room" rel="lightbox[cuasnog]" href="assets/images/pic1.jpg"><img src="assets/images/thumb/pic1_thumb.jpg" border="1" alt="" /></a>
<a title="Lounge" rel="lightbox[cuasnog]" href="assets/images/pic2.jpg"><img src="assets/images/thumb/pic2_thumb.jpg" border="1" alt="" /></a>

<a title="Kitchen" rel="lightbox[cuasnog]" href="assets/images/pic3.jpg"><img src="assets/images/thumb/pic3_thumb.jpg" border="1" alt="" /></a>
<a title="Triple Room" rel="lightbox[cuasnog]" href="assets/images/pic4.jpg"><img src="assets/images/thumb/pic4_thumb.jpg" border="1" alt="" /></a>
<a title="En-suite Bathroom" rel="lightbox[cuasnog]" href="assets/images/pic5.jpg"><img src="assets/images/thumb/pic5_thumb.jpg" border="1" alt="" /></a>
<a title="Bathroom" rel="lightbox[cuasnog]" href="assets/images/pic6.jpg"><img src="assets/images/thumb/pic6_thumb.jpg" border="1" alt="" /></a>
<a title="Cuasnog Bed &amp; Breakfast" rel="lightbox[cuasnog]" href="assets/images/pic7.jpg"><img src="assets/images/thumb/pic7_thumb.jpg" border="1" alt="" /></a>
<a title="Double Room" rel="lightbox[cuasnog]" href="assets/images/pic8.jpg"><img src="assets/images/thumb/pic8_thumb.jpg" border="1" alt="" /></a>
</nobr>
</div>
haven147
11-04-2009, 03:02 PM
That's it!!!! How on Earth did that happen?? Never mind, it works now. Thanks so much :-)))
jscheuer1
11-04-2009, 03:12 PM
The nobr element may be invalid for your DOCTYPE, so that may have prompted you to remove it. If that's the reason, and you are trying to validate the page, it may be replaced with a span with the same id. Be sure to set the span's style as:


white-space: nowrap;
haven147
11-04-2009, 05:14 PM
Changed it to <span> tag. I just noticed that my CMS takes out the <nobr> tags if I reload the code, i.e. I enter it and it works ok, but if I access the editor again to do something else it will automatically delete the invalid tags. So that's what was happening to me! Not going crazy entirely....

The only problem is that now my Lightbox bit isn't working and the large images open up in a plain browser window. Any ideas? I'll go back over the DynamicDrive file to check if anything else is missing. Thx :)
jscheuer1
11-04-2009, 05:47 PM
I'm getting:


Error: uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0

Your prototype version is out of date. Probably when you upgraded to v 2.04 you only added some of the new files. I'd suggest going to 2.04a though, it has bug fixes and additional features, make sure to update all the scripts (there is even the added builder.js that is now also required) and styles:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip

The coveryor_oo.js is not required, unless you do something as shown on the included conveyor_oo.htm file, which is still under developement anyway. But once it is completed, it wil be able to integrate a cmotion like script into lightbox 2.04a more seamlessly than your current setup. But for now it only integrates a conveyor type script, and that not 100% properly yet.
haven147
11-04-2009, 06:25 PM
That's funny - we had an overlap! I was doing more searches on DD and came across your responses to someone's query to combine a conveyor belt gallery with lightbox and followed your links from there. Decided to reinstall lightbox and used your zip file from that post which included converyor_oo.js. I had not deleted it yet by the time you checked my code out for me :-). But the lightbox upgrade worked and everything is back to normal! Thanks so much for your excellent and speedy help!
jscheuer1
11-04-2009, 07:01 PM
I had forgotten about that old post combining with cmotion. When the new work is done, which it probably will in a few days or less, it will allow for a continuous cmotion scroller (no end of gallery business) that will pause when lighbox opens, and then (if the mouse is still over the gallery) resume when lightbox closes. Optionally the gallery can be set to move a minimum amount when the mouse is off.

The new script also allows for a conveyor type gallery (no mouse speed control, pauses onmouseover, stops onmouseout) and for vertical or horizontal versions of either type, as many and as many types as you want on a single page. Either type can be set to go in either backward or forward directions as well, with optional start points (other than the beginning). I just want to add a 'slow death' feature for the cmotion style galleries that stop or slow onmouseout to do so gradually so that the change in speed or stopping is less jarring.

Basically I'm combining all of the best features and options of all of the various DD conveyor and cmotion scripts to date, plus my crawler script (at least as it applies to images), and adding a tie in to the opening and closing of the lightbox. The one thing I think I may leave out or add later is the ability to adjust to a percent width or height set for the gallery, as this gets messy from a coding standpoint, and many users misunderstand just what this can and cannot do for their gallery, which of course cannot expand beyond the length of its image train.
haven147
11-05-2009, 09:57 AM
The new script also allows for a conveyor type gallery (no mouse speed control, pauses onmouseover, stops onmouseout) and for vertical or horizontal versions of either type, as many and as many types as you want on a single page. Either type can be set to go in either backward or forward directions as well, with optional start points (other than the beginning). I just want to add a 'slow death' feature for the cmotion style galleries that stop or slow onmouseout to do so gradually so that the change in speed or stopping is less jarring.



Wow, I am looking forward to that. Thanks again for your help with this!
jscheuer1
11-05-2009, 12:02 PM
It's done, ready for someone else to test now at least. I've now added it to the distribution archive. It can also be viewed here:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/conveyor_oo.htm

No documentation yet. But those things that can be configured are fairly well commented in the conveyor_oo.htm file.

If you want to use it and have questions, feel free to ask.

I've changed the name of the script from conveyor_oo.js to imagemotion.js but left the page name the same, as I referenced it elsewhere - Both are also in the current archive.