Hi All,

 

I have a strange problem with some CSS in relation to the EllevateZoom jQuery plugin.

 

You can see the problem on this page: http://tlt.voltronik.co.uk/downloads/canary-wharf-d/

 

When the 'Play' option is selected below the video, the user can watch the video and when the Zoom option is selected, the user can zoom into a still of the video. The problem is, when the play option is selected, the zoom window appears when hovering over the top left of the viewport. When the preview option is selected, the zoom window appears where it should (to the right of the image).

 

I've narrowed down the issue to setting display: none; or display: block; to the div containing the image. This is necessary to show and hide the relevant div when the navigation option (play or zoom) is selected below. I however, cannot seem to fix it no matter what I try.

 

Can anyone offer any help or solutions as to how to overcome this?

 

Thanks for any help in advance,

Jack

I managed to solve this on my own in the end.

I added display: none; to the zoom container that the js creates and then explicitly tell it not to display: block; unless certain conditions are met in the js.