1,105,169 Community Members

How to make the images fly all over ?

Member Avatar
tefflox
Junior Poster
174 posts since Jul 2006
Reputation Points: 2 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi, I have taken the following code from youtube. As it is, without the function wrapper, it work in the address bar, tho I would like to modify it and call it to operate in one of my own pages. I need help to figure out how this can be done.

function gyrate() {

R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;DIS.position='absolute'; 
DIS.left=Math.sin (R*x1+i*x2+x3)*x4+x5;DIS.top=Math.cos(R*y1+i*y2+y3 )*y4+y5}R++}setInterval('A()',5); void(0);

}
Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

Hi, I have taken the following code from youtube. As it is, without the function wrapper, it work in the address bar, tho I would like to modify it and call it to operate in one of my own pages. I need help to figure out how this can be done.

I took it apart to see how it works:

function gyrate() {
R=0;
x1=.1;
y1=.05;
x2=.25;
y2=.24;
x3=1.6;
y3=.24;
x4=300;
y4=200;
x5=300;
y5=200;
DI=document.images;
DIL=DI.length;

function A(){
  for(i=0; i-DIL; i++){
    DIS=DI[ i ].style;
    DIS.position='absolute'; 
    DIS.left=Math.sin (R*x1+i*x2+x3)*x4+x5;
    DIS.top=Math.cos(R*y1+i*y2+y3 )*y4+y5;
  };
  R++;
};

setInterval('A()',5);
void(0);
};

The main caveat is that you not use any of these variables elsewhere in your code. It will move all of the images already on the page.

The x4, y4, x5, and y5 values may have to be adjusted to fit your particular images.

Member Avatar
tefflox
Junior Poster
174 posts since Jul 2006
Reputation Points: 2 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

The code is meant to move the images on the page. What I've done so far is load the images, in the standard way: <img src="1.jpg"/>... then call the function:

<script type="text/javascript">
  gyrate();
</script>

but it doesn't work.

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
1
 

Where is this script located in your code?

It must be below the place where the images are loaded, or the script will run before the images load (and it won't find any).

It's also possible that your browser has settings to prohibit recursive functions (It's a common worm propagation method).

Member Avatar
tefflox
Junior Poster
174 posts since Jul 2006
Reputation Points: 2 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

I've used the function in the address bar at amazon, google, flickr, etc, and it works. I had the script loaded below the images, and it doesn't work. Tho I think it may be over the top, for my purposes. The journal I edit, listenlight.net, is a minimalist production. Thanks for your time.

Member Avatar
hinkoii
Newbie Poster
1 post since Oct 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++ }setInterval('A()',5); void(0);

voila

Member Avatar
shaveenk
Newbie Poster
1 post since Feb 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Older versions of Javascript were ok with not having semicolons for the last statement of a scope. This is not true anymore. Try this it should work:

R=0;
x1=.1;
y1=.05;
x2=.25;
y2=.24;
x3=1.6;
y3=.24;
x4=300;
y4=200;
x5=300;
y5=200; 
DI=document.images; DIL=DI.length;
function A(){
    for(i=0; i-DIL; i++){
        DIS=DI[ i ].style; DIS.position='absolute'; 
        DIS.left=Math.sin(R*x1+i*x2+x3 )*x4+x5;
        DIS.top=Math.cos(R*y1+i*y2+y3) *y4+y5;
    }
    R++;
}
setInterval('A()',5);
void(0);
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article