PDA

View Full Version : Resolved CMotion Image Gallery script



Spinethetic
08-22-2005, 03:02 PM
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

The problem I'am having is that instead of stopping at the ends I want the gallery to continiously roll through over and over again through the gallery:

Ie: when the last image on the right side appears I want to see the first image re-appear right beside it and keep on rolling through infinite times. This is exactly the script I need for a site Iam making at

http://silentcivilian.net.tc because it would fir the concept of the java applet menu I have there.

Spinethetic
08-26-2005, 07:54 PM
*bump*

jscheuer1
08-27-2005, 04:29 PM
This one was a little tough, see Demo (http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm). Right click to view source. For purposes of development, I put the code and style on the same page as the HTML. If you need help making them external again, let me know, it is easy to do.

Spinethetic
08-30-2005, 04:58 PM
That is very almost exactly what I need, I really appreciate the help. The last thing thing is for it to begin scrolling when the page loads, even if the mouse is off of it. But when the visitor mouseovers the gallery than it functions exactly as it does in your modification (scrolling left or right depending on the position of the cursor) and continue scrolling after the visitor mouses off the gallery.

jscheuer1
08-30-2005, 07:41 PM
That's easy enough to add. Near the end of the script, where it says:

}
loadedyes=1
}
window.onload=fillup
</script>Add to it like so:

}
loadedyes=1
scrollspeed=2
moveleft()
}
window.onload=fillup
</script>The number 2 for scrollspeed can be increased or decreased for a faster or slower initial scroll. The call for 'moveleft()' can be changed to 'moveright()' if you prefer. Then, to keep it scrolling onmouseout, find the function:

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.lefttime) clearTimeout(lefttime)
if (window.righttime) clearTimeout(righttime)
movestate=""
}
}Change it to this:

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
scrollspeed=2
}
}Once again, if you want it to be scrolling faster or slower than 2 when the mouse is not over it, set the scrollspeed here accordingly. It would probably be best to use the same value for scrollspeed here as above.

Spinethetic
08-30-2005, 08:54 PM
Excellent! it is working perfectly now.
I thank you for all your help! :)

Spinethetic
09-01-2005, 04:03 PM
Also how would I get the onmouseout scrolling effect to be the same speed as it was at the last instant my mouse was over the gallery? As of now it goes back to "2" when I move my cursor away from the gallery but say I have my cursor positioned over the far left side of the gallery (where it is scrolling fast) and I mouseout and I want it to continue scrolling at that speed; as I would if I had my cursor positioned only halfway to the side where it is going a bit slower and I mouseout of the gallery so then presumebly the automatic scrolling would retrieve the variable of speed from the last onmouseover is what I guess Iam trying to say.

I have the script set up at www.silentcivilian.net.tc just click the flag and youll see the mod.

Many thanks
~Spinethetic

jscheuer1
09-01-2005, 04:45 PM
When modding a script to someone's request, I usually consider what would be reasonable. I thought continuing at the current speed unreasonable because it would look bad, in my opinion, to leave it scrolling at 'lightning speed' (in the case you mention) with the mouse on other content. If that is the way you want to go, just substitute:

return;

for

scrollspeed=2

in the stopmotion(e) function.

Spinethetic
09-01-2005, 06:52 PM
It is already set up with 'scrollspeed=2' which is how I wanted it but if I have my cursor on the far left side of the gallery you can see that it scrolls a litle faster than it would if my cursor was say, 50px to the right (the further to the left/right the faster the gallery scrolls, if your cursor is towards the center the slower it scrolls)

What Iam trying to do is say I have my cursor positioned so that the gallery is slow scolling and I move my curosr up the page, therefore onmouseout, I would want the gallery to continue scrolling at that speed it was the last time I put my cursor over it; in the same instance lets say I decide to move my cursor down the page again backonto the gallery, but this time to the far side, therefore causing the gallery to scroll relatively fast and then I remouseout and I would want the gallery scrolling at that speed.

I think the easiest way would be when the cursor is over the gallery is to then send the speed variable to the stopmotion(e) function so that it would continue scrolling at the speed of last mouseover.

jscheuer1
09-01-2005, 07:07 PM
Did you try my suggestion, or even understand it? You don't have to send anything to the stopmotion(e) function, the speed is already set. I added the scrollspeed=2 to make it seem reasonable to me. If you want the speed to maintain onmouseout, just change 'scrollspeed=2' to 'return;' in the stopmotion(e) function, as I said in my last post.

Spinethetic
09-01-2005, 07:19 PM
I apologize, I must have musunderstood that post.

Here (http://www.geocities.com/silentcivilianssite/menu2.htm) is the final script

The Dynamic Drive people should probably add this to the archive though CMothion Image Gallery II with the available code patches to suit whoevers particular needs.

Many many thanks for the help jscheuer1! :-)

jscheuer1
09-01-2005, 08:52 PM
That's OK, not the first and won't be the last time that happened. :D

The Dynamic Drive people should probably add this to the archive though CMothion Image Gallery II with the available code patches to suit whoevers particular needs.I've already modded this script once and had my code included in the 'official' release version. Maybe if I make this mod selectable via configuration choices, it will make it in there too. Thanks for the vote of confidence!

I was playing with this idea a bit more and decided I like this for the 'innards' of stopmotion(e):

if (scrollspeed<2)
return;
scrollspeed=2Again, as I said before, just my opinion.

gmhanna
09-03-2005, 04:21 AM
I came accross this script and it would be perfect for the site I'm working on. I would, however, like to have multiple (about 20) of these galleries on one page. Is anyone out there able to help me with this?

I know it's one of the questions that won't generally get answered, but I thought I'd ask in the hopes that someone out there has done this for this script or knows how to do it without much effort.

Thanks for any help!!

As of now, I don't have this site up yet, it's still on my machine.

jscheuer1
09-03-2005, 05:52 AM
gmhanna,

I hope you know a lot about iframes or are willing to learn. The easiest way to have two cmotions on a page would be to use an iframe for one of them. If you want more than two, the first can go on the page itself, use a separate iframe for each additional one. Iframes are inline frames and allow you to display independent pages as though they are on the page the iframe tag is on:

<iframe src="gallery2.htm" frameborder="0" width="450" height="225"></iframe>There are many other attributes you can assign to the iframe tag including style if you need them. If you do not know much about the iframe tag, use a good html resource to discover more about it. The above example should be good for a basic application of this approach with the cmotion gallery.

But, be careful. Too many images on a page is a bad idea, especially if they are large in either dimensions or total bytes used.

gmhanna
09-06-2005, 05:02 AM
Thanks John!! I used iframes and I got it to work perfectly. One related question...is there any way to slow down the scrolling - I already set the scroll speed to 1 but I was hoping to get it even slower, almost to a crawl?

Thanks again for your help.

jscheuer1
09-06-2005, 05:31 AM
Find these lines, they are close to each other but, not one after the other in the code:

lefttime=setTimeout("moveleft()",10)

righttime=setTimeout("moveright()",10)

By increasing the number 10 found in both of these lines to the same number say, 50, it will slow things down even more.

gmhanna
09-07-2005, 06:53 AM
Thanks John. On the money again!

vermon
11-03-2005, 08:07 PM
All those mods where great..now i am pretty good at understanding the code and making mods like u have provided here..but..

Any hints on how I can make this operate the same way on a vertical schema??

kurtan10
11-04-2005, 01:25 AM
I have a question I am sure you guys have the solution to...

I can not get my CMotion Image Gallery to move left or right and the pictures do not highlight with a border when I put my cursor over the picture. What am I doing wrong?

Here is my test for you guys to see.


http://www.soccersaves.com/test.php

Thanks!!

Kurt

vermon
11-04-2005, 02:28 AM
Hi

IF you visit the cmotion page again..
you are missing the js include.. which contains all the javascript
to operate the gallery. Read the instructions carefully and you will
see what i mean...

I might be blind but I did not see it in your page..

Steve

kurtan10
11-04-2005, 02:52 AM
I had a feeling my problem had something to do with that file, I downloaded it but where do I put it?

Kurt

kurtan10
11-04-2005, 07:59 AM
I figured it out, sorry for my stupidity!!

Kurt

kurtan10
11-05-2005, 08:52 AM
New question, I got the cmotion image gallery to work on my website and when I view it on my computer it works fine but I tried two other computers and it does not work but when I went to dynamicdrive.com and viewed cmotion from those other computers it work just fine.

What am I doing wrong that when people go to my website they can not view the cmotion image gallery properly?

Take a look.

www.soccersaves.com

Thanks.
Kurt

jscheuer1
11-05-2005, 12:59 PM
Wherever you have on your page:


file:///C

which I counted 13 times, it refers to a location on your hard drive. These locations are only visible on your computer. They include:


<LINK REL=STYLESHEET TYPE="text/css" HREF="file:///C:/Documents and Settings/Kurt/My Documents/web pager/Copy of FP Virtual Silver Ecomm Plus (PHP) template/includes/gallerystyle.css">

<script type="text/javascript" src="file:///C:/Documents and Settings/Kurt/My Documents/web pager/Copy of FP Virtual Silver Ecomm Plus (PHP) template/includes/motiongallery.js">

/***********************************************
* CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

and:


<nobr id="trueContainer"><a href="http://www.soccersaves.com/proddetail.php?prod=italiahoodazzurro&cat=17"><img src="file:///C:/Documents and Settings/Kurt/My Documents/web pager/Copy of FP Virtual Silver Ecomm Plus (PHP) template/prodimages/kappa/kappa italia hooded eroi azzurro 100.jpg" border=1></a>
. . . etc.

These files are all needed online (usually on the server) for the script to function properly. You can put them anywhere you like on the server (or elsewhere online) but the paths and filenames to them must be entered correctly in your code. Spelling as well as capitalization must match exactly their paths and filenames online.

kurtan10
11-05-2005, 09:43 PM
Excellent, thank you John I fixed it and now things work great!!

Kurt

natzol
06-19-2006, 04:02 AM
Hello! I have tried to modify the vertical cmotion (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm) to do a continuous scrolling which will automatically fire on pageload... but was out of luck. :( Please help!...

Adding
scrollspeed=2
movedown()

to function fillup() is not working.

jscheuer1
06-19-2006, 06:24 AM
Have a look at this:

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

It is highly configurable and, although the demo pauses automatically, it can be set to continuous in the config area.

natzol
06-19-2006, 12:59 PM
Thank you a lot for a quick answer!

The suggested sample does not allow the interactivity - true it is a very easy to customize, but it is just a marquee, not an interactive gallery.

Below is the whole code I customized: (vertically continuously looping through and starts on pageload)

There are bugs if you place the code inside the Iframe: do not scroll in Firefox, IE images are attached half-width on the second loop.

Natalia



<html>
<head>
<style type="text/css">
#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}
</style>
<script language="javascript" type="text/javascript">
<!--
/***********************************************
* CMotion Image Gallery II- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/
var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_scroll, cross_scroll_1, ns_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveup(){
if (iedom&&loadedyes){
movestate="up"

if (parseInt(cross_scroll_0.style.top)<(-actualheight))
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)+actualheight+"px"
if (parseInt(cross_scroll_1.style.top)<(-actualheight))
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)+actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)-scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)-scrollspeed+"px"
}
uptime=setTimeout("moveup()",10)
}


function movedown(){
if (iedom&&loadedyes){
movestate="down"
if (parseInt(cross_scroll_0.style.top)>0)
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)-actualheight+"px"
if (parseInt(cross_scroll_1.style.top)>0)
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)-actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)+scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)+scrollspeed+"px"
}
downtime=setTimeout("movedown()",10)
}


function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var downbound=(menu_height-restarea)/2
var topbound=(menu_height+restarea)/2
if (curposy>downbound){
scrollspeed=Math.floor((curposy-downbound)/((menu_height-restarea)/2) * maxspeed)
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<topbound){
scrollspeed=(topbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery_0") : document.all.motiongallery_0
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.style.whiteSpace='nowrap'
extra=document.createElement('nobr')
extra.innerHTML=document.all? document.all['trueContainer'].innerHTML : document.getElementById("trueContainer").innerHTML
cross_scroll_1.appendChild(extra)
crossmain.appendChild(cross_scroll_1)
actualheight=document.all? cross_scroll_0.offsetHeight : document.getElementById("trueContainer").offsetHeight
cross_scroll_1.style.top=actualheight+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}
crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll.style.top=0', 10)
}
loadedyes=1
scrollspeed=1
movedown()
}
window.onload=fillup
//-->
</script>
</head>
<body>
<div id="motioncontainer" style="width:150px; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery_0" style="position:absolute; left:0; top:0;white-space: nowrap;">
<nobr id="trueContainer">
<!--Gallery Contents below-->

<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br />
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br />
<a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a><br />
<a href="#"><img src="dynamicbook1.gif" border=1></a>
<!--End Gallery Contents-->
</nobr>
</div>
</div>
</body>
</html>

davidjovan
06-20-2006, 08:01 AM
Doesn't this script resize the images no matter how big they are?

If it does, it's not doing it for me.

Nice improvement/mod

natzol
07-12-2006, 12:36 PM
The sample of the code I posted above is not working in Opera. To make it happen please modify to:

if (window.opera){
cross_scroll_0.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll_0.style.top=0', 10)
}

maartenvdj
07-29-2006, 03:37 PM
Have a look at this:

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

It is highly configurable and, although the demo pauses automatically, it can be set to continuous in the config area.

is it possible to make the same script for the horizontal cmoition gallery?

mburt
07-29-2006, 04:26 PM
This may be oversimpified, but it works. :)


<html>
<head>
</head>
<body>
<marquee direction="right" width="500" onmouseover="scrollDelay=1000000" onmouseout="scrollDelay=1">
<img src="http://images.picsearch.com/is?wSP0VQgtoGivIEaSr1faXBjKIQOXcmy25BMyynPpkPY">
<img src="http://images.picsearch.com/is?uSU8q8cSS0LTxME28wlNmz396pjV1jYsn9KEbOO37Nk">
<img src="http://images.picsearch.com/is?19uc3Q-IKeMIELtqifEfH4eYQUE7GA2smek2iVrNkTk">
<img src="http://images.picsearch.com/is?76dxIeStJnWpS2i7DQ6K65F8Gr11BX8l6qz93dWhiwM">
</marquee>
</body>
</html>

jscheuer1
07-29-2006, 05:20 PM
http://home.comcast.net/~jscheuer1/side/marquee_h_slide_pause_left.htm


This may be oversimpified, but it works.

Not really, yours is an IE only solution and incomplete even in that browser.

maartenvdj
07-29-2006, 06:15 PM
Thanks a lot ... it's perfect ...

jayaram
03-31-2007, 11:02 AM
Hi John,

i am new member to this form i developed a website there i need some help like i alredy placed some script for motion gallary but i need the motion to be continusly it wont be stop and i tryed alot to do that but i am not abul to getting plz help me out in this regads my site link is

www.ksoftgroup.org/clipaction/

plz check that and gave me the suggestion how to do

Thanks in advance
Jay.

jscheuer1
03-31-2007, 02:16 PM
Hi John,

i am new member to this form i developed a website there i need some help like i alredy placed some script for motion gallary but i need the motion to be continusly it wont be stop and i tryed alot to do that but i am not abul to getting plz help me out in this regads my site link is

www.ksoftgroup.org/clipaction/

plz check that and gave me the suggestion how to do

Thanks in advance
Jay.

Cmotion won't do that, try:

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

Use your browser's 'view source' to see the code.

FrayedEnd
04-03-2007, 01:36 PM
Hello!
I got a little problem with the script. Im pretty sure it's a dumb mistake i made, but i just can't find it.

http://www.unknown-stylez.com/entertainment/ali.htm

The css and the js files are connected and they work. the images work. But the movement does not (i tested in opera,ff and IE :/). Can someone help me with this one?

jscheuer1
04-03-2007, 01:52 PM
Hello!
I got a little problem with the script. Im pretty sure it's a dumb mistake i made, but i just can't find it.

http://www.unknown-stylez.com/entertainment/ali.htm

The css and the js files are connected and they work. the images work. But the movement does not (i tested in opera,ff and IE :/). Can someone help me with this one?

Add, the red function call (scroll to see it):


<body bgcolor="#555555" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();fillup();">

FrayedEnd
04-03-2007, 02:20 PM
Thank you very much!
Never had a service like this befor on the www *thumbsup*

KimmyGoose
04-10-2007, 03:53 PM
I have modified the script so that it'll rotate when the page loads and when the mouse is out. I would like to do one of the following:
I would like for the images to loop. Once the rightmost image has been reached, is there a way that the very first image, the leftmost, can be instered at the end and have a neverending slide show?

If not then to have the mouse out motion start going left once it reached the image all the way right at the very end.
If not, how can I modify the code so that once it reaches the end, all the way to the right, it'll reset itself, all the way to the left.
Basically I would like for the slide show to continue moving at all times.

jscheuer1
04-12-2007, 04:29 AM
I have modified the script so that it'll rotate when the page loads and when the mouse is out. I would like to do one of the following:
I would like for the images to loop. Once the rightmost image has been reached, is there a way that the very first image, the leftmost, can be instered at the end and have a neverending slide show?

If not then to have the mouse out motion start going left once it reached the image all the way right at the very end.
If not, how can I modify the code so that once it reaches the end, all the way to the right, it'll reset itself, all the way to the left.
Basically I would like for the slide show to continue moving at all times.

Since you have already modified the script, it would be best if you provided a link to your page with this modified script on it or a link to a demo page of your version of the script. That way we could work from there.

mistagenki
04-27-2007, 09:45 PM
Can you post the "infinite" scrolling code here, based on the latest revision? The code referenced above is from an older build, and the latest code is substantially different.

I love this script - hope to add it to my site as soon as I get this modified code. Thank you...

Fleuretta
06-20-2007, 09:59 PM
Hi

In this script
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
we can start picture in the center


//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=2;


I will like the samething width this script. It's possible?

Thank you

(Excuse my english...my first language is french)

mangomonkey
01-09-2009, 05:39 PM
This one was a little tough, see Demo (http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm). Right click to view source. For purposes of development, I put the code and style on the same page as the HTML. If you need help making them external again, let me know, it is easy to do.

I have links wrapped around my images with link ids embedded. With this code, every other loop removes the ids, can anything be done?

jscheuer1
01-09-2009, 06:18 PM
I believe that you emailed me about this. I responded but since the editor here is better, here is the suggested code replacement for your mootools domready function again:


window.addEvent('domready', function() {
var scroll = new Fx.Scroll('galwrap', {
wait: false,
duration: 1500,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut
});

var c = ['imgone', 'imgtwo', 'imgthree', 'imgfour', 'imgfive', 'imgsix'];
var r = new RegExp('^gal(\\d+)$');

$(document).addEvent('click', function(event) {
var t = event.target;
while (t.parentNode && !r.test(t.id))
t = t.parentNode;
if (t.id && r.test(t.id)){
event = new Event(event).stop();
scroll.toElement(c[t.id.replace(r, '$1') - 1]);
}
});

});

mangomonkey
01-09-2009, 06:43 PM
I believe that you emailed me about this. I responded but since the editor here is better, here is the suggested code replacement for your mootools domready function again:


window.addEvent('domready', function() {
var scroll = new Fx.Scroll('galwrap', {
wait: false,
duration: 1500,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut
});

var c = ['imgone', 'imgtwo', 'imgthree', 'imgfour', 'imgfive', 'imgsix'];
var r = new RegExp('^gal(\\d+)$');

$(document).addEvent('click', function(event) {
var t = event.target;
while (t.parentNode && !r.test(t.id))
t = t.parentNode;
if (t.id && r.test(t.id)){
event = new Event(event).stop();
scroll.toElement(c[t.id.replace(r, '$1') - 1]);
}
});

});

WOW thanks so much. I wasn't sure if you would pick it up on this. So its a problem with mootools, didn't know that, thanks. Not sure which bits of the code to replace on mootools. I'm guessing its part of mootools-core.js? Is it anything arround...


}});Element.Events.domready={onAdd:function(A){if(Browser.loaded){A.call(this);}}};(function(){var B=function(){if(Browser.loaded){return ;}Browser.loaded=true;
window.fireEvent("domready");document.fireEvent("domready");};switch(Browser.Engine.name){case"webkit":(function(){(["loaded","complete"].contains(document.readyState))?B():arguments.callee.delay(50);
})();break;case"trident":var A=document.createElement("div");(function(){($try(function(){A.doScroll("left");return $(A).inject(document.body).set("html","temp").dispose();


Sorry about being a bit noob. My knowledge of js is limited. Thanks so much though.

jscheuer1
01-09-2009, 06:55 PM
No problem with mootools, it just the way you were using mootools to access the elements. No script library would do it that way, not even basic javascript with no library overlay.

You see the cmotion script makes a duplicate of your image train, this produces two each of the links with each given id. Once a browser finds one element with a given id it stops looking (at best). If there is another, it may even give an error.

The change I made was to not assign click events to the elements with the ids, rather just to look at one element at a time to see if it had the id and was clicked. This approach, though technically invalid, does work. It's also considered to be a more efficient approach to event listening, which is what is going on here anyway.

mangomonkey
01-09-2009, 06:57 PM
No problem with mootools, it just the way you were using mootools to access the elements. No script library would do it that way, not even basic javascript with no library overlay.

You see the cmotion script makes a duplicate of your image train, this produces two each of the links with each given id. Once a browser finds one element with a given id it stops looking (at best). If there is another, it may even give an error.

The change I made was to not assign click events to the elements with the ids, rather just to look at one element at a time to see if it had the id and was clicked. This approach, though technically invalid, does work. It's also considered to be a more efficient approach to event listening, which is what is going on here anyway.

AH lovely. Thanks so much, you are a lifesaver! So where about in the code do I put what you gave?

jscheuer1
01-09-2009, 07:11 PM
Replace the contents of your scroll.js with it.

BTW, I just tested it locally and it worked in FF, Opera, and IE.

mangomonkey
01-09-2009, 07:36 PM
THANKS SO MUCH. You are a genius. Thanks again. Really appreciate it. And it works in safari aswel!