image gallery continuous scrolling

Kyle Hamilton
Kyle Hamilton used Ask the Experts™
on
I have a javascript image slider that gets images from an xml file, and runs through them in order. After the last image, it goes in reverse.

It's kind of hard to explain. When you scroll all the way to the right you can see what I mean.
http://mercercountyrealtors.com/previewPurple/indexFlow.php

I would like it to slide through the images continuously. So that when it reaches the end, the next image would be image one, instead of a blank space.

I believe the code below is where this happens, but I'm a dork, so if you need the whole js file I can post it.

Thanks in advance.
/* ==== animation loop ==== */ 
                run : function (res) { 
                        /* ---- move all images ---- */ 
                        var i = this.NF; 
                        while (i--) this.diapos[i].move(res); 
                        /* ---- autoscroll ---- */ 
                        if (this.time_out) { 
                                this.time++; 
                                if (this.time > this.time_out) { 
                                        this.view += this.time_dir; 
                                        if (this.view >= this.NF || this.view < 0) { 
                                                this.time_dir = -this.time_dir; 
                                                this.view += this.time_dir * 2; 
                                        } 
                                        this.calc(); 
                                        this.time = 0; 
                                        this.time_out = this.time_inter; 
                                } 
                        } 
                } 
        }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try to change this (from line 11 of your script):

   if (this.view >= this.NF || this.view < 0) {
                                               // this.time_dir = -this.time_dir;
                                                this.view = 0;
                                        }
that is, comment out the change of direction and put the view=0 (the beginning).

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Author

Commented:
I tried that. It's now swooshing back to the beginning. Interesting, but not yet what I need.

http://mercercountyrealtors.com/previewPurple/indexFlow.php
Yes...hmm I must have misunderstood your sentence :
"So that when it reaches the end, the next image would be image one, instead of a blank space."

Do you want something like a continuos string of images? ie. repeat the first after the last?
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Author

Commented:
yup...
I see...then, a major change to the whole script is probably needed...I'll have a look
Try to change this (again in the same place of the script):
                              if (this.view >= 5) {
                                    //this.time_dir = -this.time_dir;
                                     //this.view = 0;
                                    //this.view += this.time_dir * 2;
                                    d=document.getElementsByClassName("diapo");
                                    newChild=d[0];
                                    refChild=d[d.length-1];
                                    refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
                                    d=document.getElementsByClassName("diapo");
                                    lm=2*parseInt(d[d.length-2].style.left)-parseInt(d[d.length-3].style.left);
                                    d[d.length-1].style.left=lm+"px";
                                    this.diapos[0].x0=lm;
                                    d0=this.diapos.shift();
                                    this.diapos.push(d0);
                                    c=document.getElementsByTagName("canvas");
                                    newChild=c[c.length-1];
                                    refChild=d[d.length-1];
                                    refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
                                    c=document.getElementsByTagName("canvas");
                                    lm=2*parseInt(c[1].style.left)-parseInt(c[2].style.left);
                                    c[0].style.left=lm+"px";
                                    
                                    this.view--;
                              }


--Note that you must change the line starting from
 if (this.view >= this.NF || this.view < 0) { ..

with my block: if (this.view >= 5) { ...

"5" means that after 5 images views, it starts to move the leftmost one to the right.
Let me know...
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Author

Commented:
it looks good.

The only thing now is, if you slide your mouse all the way over to the right, it comes to the end and the images slide out from underneath each other.

http://mercercountyrealtors.com/previewPurple/indexFlow.php

(I really appreciate you helping me)
hmm I thought it was ok because I moved the bar veeery gently... :-)
Plus I also found that clicking on the pictures is not quite right yet.
Let me check...

Ok, let's try this.
I attach the script since there are major changes in 3 spots (calc function - line 211, run - line 259, move - line 328).
I've tested on FF,IE, Chrome, Safari, but you know, the Evil Bug can be always there...:-)

Let me know!

imageFlow-continuous.js
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Author

Commented:
Thank you! It works exactly the way I was hoping it would.

You're a genius!

Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial