I'm new to Javascript as well as web page building. I want to create a web page on tropical fish and make it sort of like a photo gallery. But I need to be able to use a good image scroller to display my pictures. Has anyone visited http://www.drmartens.com?
(You know those cool shoes). Please check it out and you will now what I'm going to talk
about. When you enter the site, follow the links until you get to choose the styles of
shoes. Then just click on any style and watch the cool scrolling effect.
Anyway, I like to be able to use the scroller that they use on their website. They've updated their site recently and now it's animation is created by Flash 4. However, about 2 months ago, they implemented the same type of image scroller that was written using javascript.
I really like how the scroller works. The images scroll horizontally across the screen at the speed that the user wants by positioning the mouse cursor. Scrolling pauses whenever the mouse cursor is placed over any one of the images, and that image is slightly enlarged indicating that it is selected. Then when the user wants to view the picture in detail, he double clicks the image and a new window opens up with a hi-res photo.
Can anyone show me how to do this, or send me a javascript for it if you have it somewhere.
The Flash version of the scroller is better and faster than the javascript version I think. If anyone knows how to do this in Flash 4.0 let me know too. Thanks so much.
lemme see if i can make sense...
this is how i would do it. both JS and flash are somewhat similar.
1)you create a series of buttons you can stick next to each other so form a complete graphic.
2)each button gets assigned a rollover script with a value that decides the scroll speed. Low values for slow scroll etc. Eg: onMouseOver="javascript:scrollVar=10;"
3)each button gets assigned a mouseOut script that sets same variable to 0.
onMouseOut="javascript:scrollVar=0;"
4)in flash, create a frame loop. on the last frame, make a script that has an action of
setProperty. target the movie clip where the images are stored. set the x position attribute to itself + scrollVar.
5) in javaScript, you make a short timeout that keeps calling the move funtion. It gets tricky to make cross-platform but it an be done. the move funtion does the same as the flash: set x position to x position + scrollVar etc.
6) that's the basic principle. if you need more help (which you probably do cause this was a pretty brief explanation), email me at badhaiku@yourmom.com. But unless you're experienced in either JS or Flash, you'd be better off finding it somewhere else. I'd make the flash for ya to look at, but i just shipped my dev box off to home and won't be there until a week from now.