JQuery 360° Product View with Hotspots

pizza0502 picture pizza0502 · Feb 16, 2012 · Viewed 8.9k times · Source

I need a 360 view product script for my HTML website. But I've just manage to found Flash version of 360 view that I wanted to achieve! http://www.auris-hybrid.de/index_en.asp#/model

Any JQuery style like this kind of interaction?

I'm using the Jquery Reel to do the 360 view, or is it have others Jquery that can implement with Reel and get the hotspot thing what I wanted?

Answer

Petr Vostrel picture Petr Vostrel · Feb 25, 2012

Reel allows you to do this since 1.2 with its Annotations feature for free. See few examples (marked with *)

You basically can set up hotspots when starting Reel using the annotations option. For example this inserts a static HTML link "See door handle close-up" over the image at a place 100 pixels right and 25 pixels down from the upper-left corner:

.reel({
    // your Reel options as usual
    annotations: {
        "door_handle": {
            link: {
                text: "See door handle clouse-up",
                href: 'some_your_action_or_link'
            },
            x: 100,
            y: 25
        }
    }
})

Please consult the wiki page of Annotations for how to define dynamic frame-synced annotations and how to style them.