endless.com (amazon's footwear sister site) has really responsive image rollovers
Anyone know an robust rollover extension like theirs?
Anyone know an robust rollover extension like theirs?
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
endless.com: Any images rollover extensions like theirs?
- Thread starter ObaMaciden
- Start date
- Sort by reaction score
I took a quick look.
That page is impressive, i.e. moving the small target over the smaller shoe and synchronizing the viewport for the larger shoe image. Looking at the source it's very complex, seems proprietary as I could find no copyright notices - only prototype versions which seem in house. But the technology seems to involve Javascript with JSON for data interchange between objects, and CSS to handle the viewports. The complexity is that numerous shoes exist, they come in different colors, shown in different angles, so it's an array of data pulled from a database. Not to mention the rules for setting viewport coordinates and ensuring the user can't scroll over the the screen.
JSON is a lightweight framework that is used to extend native Javascript functions intended to handle event triggers and make Ajax even faster. So that's a critical component.
Also, CSS handles rollovers much faster than Javascript, so combined with JSON and object oriented Javascript it's pretty darned quick. Putting all the complexity of this example page aside, if you do a simple CSS rollover using the hover and background-image replacement vs. Javascript rollover involving event triggers and swapping content within div's, CSS will be noticably more responsive.
So after only a quick look I can't tell you if they used an open source framework or not, but JSON/JS/CSS and a good programmer = speed.
I think they pre-load the large shoe images, as you switch shoes/angle that's a simple rollover via CSS, then as the target is moved about, they reposition the larger shoe image inside the div to match the coordinates of the smaller target area over the small shoe, but simply "hide" the overflow. Or something like that. That seems to be the CSS part.
Damned smart, too.
-jim
That page is impressive, i.e. moving the small target over the smaller shoe and synchronizing the viewport for the larger shoe image. Looking at the source it's very complex, seems proprietary as I could find no copyright notices - only prototype versions which seem in house. But the technology seems to involve Javascript with JSON for data interchange between objects, and CSS to handle the viewports. The complexity is that numerous shoes exist, they come in different colors, shown in different angles, so it's an array of data pulled from a database. Not to mention the rules for setting viewport coordinates and ensuring the user can't scroll over the the screen.
JSON is a lightweight framework that is used to extend native Javascript functions intended to handle event triggers and make Ajax even faster. So that's a critical component.
Also, CSS handles rollovers much faster than Javascript, so combined with JSON and object oriented Javascript it's pretty darned quick. Putting all the complexity of this example page aside, if you do a simple CSS rollover using the hover and background-image replacement vs. Javascript rollover involving event triggers and swapping content within div's, CSS will be noticably more responsive.
So after only a quick look I can't tell you if they used an open source framework or not, but JSON/JS/CSS and a good programmer = speed.
I think they pre-load the large shoe images, as you switch shoes/angle that's a simple rollover via CSS, then as the target is moved about, they reposition the larger shoe image inside the div to match the coordinates of the smaller target area over the small shoe, but simply "hide" the overflow. Or something like that. That seems to be the CSS part.
Damned smart, too.
-jim
OK, I see it on that page. I don't think there's any CSS sprites being used, but probably doing some preloading of images. SrWebDeveloper filled in a lot of the more specific details on how they were doing it and with which approaches. The basic roll over stuff, like the thumbnails showing up larger above it it can be done with CSS and then using JavaScript for the preloading. There's loads of tutorials out there for setting up the preloading, it isn't very difficult really. The zoom hover effect is neat and would take some JavaScript, and you might be able to find a script for that to make use of.
