# Gallery

**URL:** <https://forum.kirupa.com/t/gallery/63652>\
**Category:** Uncategorized\
**Created:** [September 8, 2004, 9:05pm UTC](https://forum.kirupa.com/t/gallery/63652 "2004-09-08T21:05:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamidb4](https://avatars.discourse-cdn.com/v4/letter/h/898d66/32.png) [@hamidb4](https://forum.kirupa.com/u/hamidb4)\
**Post date:** [September 8, 2004, 9:05pm UTC](https://forum.kirupa.com/t/gallery/63652/1 "2004-09-08T21:05:49Z")

</div>

Hi everyone,  
The navigation system in [this site](http://www.yaronhazan.co.il/eng/flashindex.htm) is set up in such a way that thumbs move around as you click on each one. Also the first thumb flashes a different color as it loads. Any help in figuring out how to achieve this would be greately appreciated.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 8, 2004, 9:57pm UTC](https://forum.kirupa.com/t/gallery/63652/2 "2004-09-08T21:57:00Z")

</div>

what do you mean by

“thumbs move around as you click on each one”

Sandman9

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 9, 2004, 4:33am UTC](https://forum.kirupa.com/t/gallery/63652/3 "2004-09-09T04:33:30Z")

</div>

on first look. \*\*\*\* !!

Thats one cool effect.

How to do it ? hmmm… well i think you need to prepare some arrays to store locations of the thumbnails. then on click of one you need to prepare a new array with new random positions.

then how the delayed movement takes place ? hmmm…

on second look. \*\*\*\* !!!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 9, 2004, 4:34am UTC](https://forum.kirupa.com/t/gallery/63652/4 "2004-09-09T04:34:39Z")

</div>

on first look. \*\*\*\* !!

Thats one cool effect.

How to do it ? hmmm… well i think you need to prepare some arrays to store locations of the thumbnails. then on click of one you need to prepare a new array with new random positions.

then how the delayed movement takes place ? hmmm…

on second look. \*\*\*\* !!!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 9, 2004, 9:37am UTC](https://forum.kirupa.com/t/gallery/63652/5 "2004-09-09T09:37:52Z")

</div>

Ive seen this on another site, posted on kirupa!!

Goes off to look again…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 9, 2004, 1:31pm UTC](https://forum.kirupa.com/t/gallery/63652/6 "2004-09-09T13:31:46Z")

</div>

By the way, if this post is not clear enough, the effect is for the gallery and brides links on the right hand side of the stage.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 1:18pm UTC](https://forum.kirupa.com/t/gallery/63652/7 "2004-09-10T13:18:46Z")

</div>

Any more thought on this gallery? I’m sure some of you guys can help me with it. Thanks

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 1:48pm UTC](https://forum.kirupa.com/t/gallery/63652/8 "2004-09-10T13:48:30Z")

</div>

Something like it here… dunno if this is the other site you were thinking of…

[http://www2.hermanmiller.com/discoveringdesign/](http://www2.hermanmiller.com/discoveringdesign/)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 2:02pm UTC](https://forum.kirupa.com/t/gallery/63652/9 "2004-09-10T14:02:08Z")

</div>

Yes. Another example. I like the first one better though.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 7:40pm UTC](https://forum.kirupa.com/t/gallery/63652/10 "2004-09-10T19:40:39Z")

</div>

[http://www.kirupa.com/developer/mx/random\_motionMX.htm](http://www.kirupa.com/developer/mx/random_motionMX.htm)

This tutorial might at least help get you started.

:hr:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 8:47pm UTC](https://forum.kirupa.com/t/gallery/63652/11 "2004-09-10T20:47:11Z")

</div>

Just done this very quickly, nowhere near as complex as the one you features but might give you a start  
The values i push into the array just come from creating a grid in another file and then running a trace on each \_x,\_y value  
trace(“myArray.push([”+ma+"])")  
where ma is an array [\_x,\_y]  
EDIT/  
just tidied it up(a bit)  
[http://www.gifsrus.com/testfile/gridbuttons.swf](http://www.gifsrus.com/testfile/gridbuttons.swf)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 10, 2004, 9:32pm UTC](https://forum.kirupa.com/t/gallery/63652/12 "2004-09-10T21:32:04Z")

</div>

> [@ntshp](#):
>
> Ive seen this on another site, posted on kirupa!!
> 
> Goes off to look again…

They look heavily inspired by the site below from back in 2002.

The original and recently updated:

[http://www.eccentris.com/splash.htm](http://www.eccentris.com/splash.htm)

This one is even more complex as you can see the image on mouseover and you can see which image you have visited.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 11, 2004, 6:10am UTC](https://forum.kirupa.com/t/gallery/63652/13 "2004-09-11T06:10:08Z")

</div>

ello stringy …i just curious how i’m gonna put in ur code if i wanna apply to each button to load a pic…let’s say pic1.jpg, pic2.jpg and the rest…is it i have to put in array also…

still blurrrr…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 11, 2004, 7:06am UTC](https://forum.kirupa.com/t/gallery/63652/14 "2004-09-11T07:06:39Z")

</div>

@stringy, nice one=)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 11, 2004, 7:30am UTC](https://forum.kirupa.com/t/gallery/63652/15 "2004-09-11T07:30:57Z")

</div>

> [@pixeldude](#):
>
> ello stringy …i just curious how i’m gonna put in ur code if i wanna apply to each button to load a pic…let’s say pic1.jpg, pic2.jpg and the rest…is it i have to put in array also…
> 
> still blurrrr…

No you don`t. I`ve included the code on this and also numbered the mc`s.(mine starts with pic0.jpg -if you want to start with 1 either alter the loops or add 1 to each value of k)

Thanks Scotty.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 13, 2004, 2:02am UTC](https://forum.kirupa.com/t/gallery/63652/16 "2004-09-13T02:02:52Z")

</div>

tq stringy for the fla…i just look at to ur fla…which part in ur code if i have to change if i wanna move the all the button a little bit to the right side…and when i click the button to load the pic it’s seem’s nothing was load at all…so i don’t know what’s wrong…

ur help would be greatful…stringy…tq

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 13, 2004, 2:17am UTC](https://forum.kirupa.com/t/gallery/63652/17 "2004-09-13T02:17:41Z")

</div>

I should think there is an array that contains all the possible locations a square could be placed. Then, every so often, or when you click on something, a script selects a random number between zero and the amount of values in the array. It then gradually moves a square to that position.

It might actually be an associative array that also contains whether or not a position is currently occupied by another square.

Either way, that’s how it’s done.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 13, 2004, 1:04pm UTC](https://forum.kirupa.com/t/gallery/63652/18 "2004-09-13T13:04:06Z")

</div>

> [@pixeldude](#):
>
> tq stringy for the fla…i just look at to ur fla…which part in ur code if i have to change if i wanna move the all the button a little bit to the right side…and when i click the button to load the pic it’s seem’s nothing was load at all…so i don’t know what’s wrong…
> 
> ur help would be greatful…stringy…tq

Not sure what you are doing wrong with the loading becuase it works fine for me as it stands.  
If you want to keep my grid arrangement but just move it over to the right use something like this  
for (var j = 0; j\<myArray.length; j++) {  
myArray[j][0] += 50;  
}  
just after the last element of the array has been defined.  
You`ll have to drag the background over manually.

EDIT/  
Rather than use this, if you take the time to have a look at Scottys grid code posted below and play about with the variables you`ll be in a much better position to make the exact effect you are looking for.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 13, 2004, 2:19pm UTC](https://forum.kirupa.com/t/gallery/63652/19 "2004-09-13T14:19:41Z")

</div>

Or replace the definition of the array with this

```auto
myArray = new Array();
var startX = 50;//xposition to start
var startY = 50;//yposition to start
var columns = 4;
var rows = 6;
var newX = startX+(columns-1)*30;
var newY = startY+(rows-1)*30;
for (var y = startY; y<=newY; y += 30) {
	for (var x = startX; x<=newX; x += 30) {
		myArray.push([x, y]);
	}
}

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [September 13, 2004, 4:45pm UTC](https://forum.kirupa.com/t/gallery/63652/20 "2004-09-13T16:45:02Z")

</div>

nice work stringy, scotty.  
some improvements to this gallery would be nice if you guys find some time:  
once you view an image, you can not see it again. I guess because thumb nails are not buttons.  
2- easing on the image as it comes to the view.  
3-shuffling the thumbs could use some easing too.  
finally, for people like me commenting the code would be great.  
thank you so much for your efforts.

[Next page](https://forum.kirupa.com/t/gallery/63652.md?page=2)