endless.com: Any images rollover extensions like theirs?

Discussion in 'Web Design and Development' started by ObaMaciden, Dec 16, 2008.

  1. ObaMaciden macrumors member

    ObaMaciden

    Joined:
    Nov 4, 2008
    #1
    endless.com (amazon's footwear sister site) has really responsive image rollovers

    Anyone know an robust rollover extension like theirs?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I didn't see any examples there. The menu has a color change, but I don't think it's image based. Generally, the way to speed up image roll overs, is to either use CSS sprites or preload the images so they show up right away.
     
  3. ObaMaciden thread starter macrumors member

    ObaMaciden

    Joined:
    Nov 4, 2008
    #3
    Oop, meant to link this as example:
    Cros Woolly Clogs
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     
  6. werther macrumors regular

    Joined:
    May 15, 2006
    #6
    I agree. The idea behind the viewport magnifier thing is pretty slick.
    I just can't think of a time that I need to see a shoe that close up:)
    -I know there is a President Bush joke in there somewhere
     

Share This Page