javascript:move

Keller Bear

need some help here, this could be extremely simple but I have been working on this so long I cant see the wood from the trees.

there is a site that has an element that i want to be a website of mine. the page is http://www.tanyabonakdargallery.com/exhibit.php the element in question is the left and right arrows (located on the right of the screen) that change the centre image onclick. I have been having such difficulty with this, please help.

i notice that on hovering over it does say javascript:move. is there a script or how-to somewhere that will show me what to do? does the site need to be in php or can there be a relative similar outcome in a html format?

thanks

AnonymousPrime

How much do you know about javascript?

A quick search says the function is on line 132 of the source code but it is all custom logic

nicol

I don't quite understand what you want to include in your site; do you want to replicate the image-browsing functionality or do you just want the actual images. If it's the javascript then it shouldn't be too difficult to replicate - it looks pretty straightforward. The move function is a piece of custom code that the developer of that site has written to move the from one image to the next.

Keller Bear

AnonymousPrime:

i am a designer and the developer has left so i am being asked to step in with a deadline soon around the corner. so basically i know a little about javascript but that is all, a little. so for the sake of simplicity consider me a noob.

where would i go about looking for this functionality? you say its all custom logic, well thats great but i have not a clue, please help

nicol:

definitely do not want the images, i want the browsing functionality. where would i look to start writing this piece of custom script up? any help greatly appreciated please be as detailed as possible

AnonymousPrime

What I did was browse to the page, press Ctrl+U in firefox, (or view -> source in IE) and search the text for "function move". This is the definition for the function which the developer has used to change images. i.e. when someone clicks on an array, all of this logic is executed

With a quick look I cannot see exactly what he/she is doing but if I were doing something similar I would:

1. create an array of image links within your page. For extendibility you may wish to define this array in a separate javascript file or set up the array so that it is automatically populated with links to the contents of a specified folder (e.g. www.yourURL.com/images)
2. create an img html tag but leave the src part blank
3. Display the first image by populating the src part of the tag with the link to the first image in the array
4. when the move function is called: find which image is being displayed and display the one before or after by changing the src part of you img tag.

As for the the clicking functionality, there is a lot going on there and I wouldn't attempt to map that out on a forum post, I would probably get it wrong. If you do intend to tackle it I would recommend using jQuery (google it) which has a few nice animated functions.

Finally I get the feeling you are looking for a bit of a quick fix, but unfortunately there are no quick fixes with javascript. If this becomes a regular occurrence you will need someone on the team who is fluent in javascript or do what the business world is doing and switch from php to ASP.NET

nicol

Keller_Bear,

the page whose functionality you want to mimic might be a bit complex for a Javascript newbie, unless you were to copy the code verbatim from the site, even so it's still a bit of a mess.

I'd agree with Anonymous_Prime, search for jquery gallery slider. This one here looks simple enough to replicate and the full example is contained in a downloadable zip.

Best of luck

mewso

If you want to use old out-dated and badly written javascript then use the code on that site. Otherwise use a jquery plugin as suggested above.