inner zoom in different div ?

[dnamyslak]

1. Can you specify
   where the ZOOM image will be displayed ?
2. Can you "move" SELF image to different location , to different div maybe ?

[Glidias]

Had to resort to a convulated/contrived hack by manually re-parenting the zoom container from body to a specific target location. You'll need an asyncronous event delay like a timer interval check to determine when the zoomContainer is found, or attempt to retrieve it when hovering over something..

mock JS example:

var imgHolder = $("#ImgHolder");
var _zoomContainer = null;

function getZoomContainer() {
  return _zoomContainer!=null && _zoomContainer.length != 0 ? _zoomContainer : (_zoomContainer = $("body > .zoomContainer"));
}

function reparentZoomContainer() {
    var zoomC = getZoomContainer();
    if (zoomC.length != 0 ) {
       imgHolder.append(zoomC);
       imgHolder.unbind("hover", appendZoomContainer);
    }
}

     // init here

     imgZoomerRef.elevateZoom({
      zoomType: "inner",
     });

      // zoom container not found yet, use some asyncronous event to attempt to reparent zoom container later on...
      imgHolder.hover(reparentZoomContainer);

When re-parenting, there might be certain forced CSS settings that you might need to apply within the new parent context. In this example, i stretch everything in the zoom container to fit the ImgHolder.

#ImgHolder > .zoomContainer {
    position:absolute;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;

    z-index:2;
    transform: translate3d(0%, 0%, 0) !important;
}

#ImgHolder > .zoomContainer >.zoomWindowContainer {
top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    position:relative;
}
#ImgHolder > .zoomContainer >.zoomWindowContainer > div {
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
}

At the same time, i ensured the zoomContainer isn't visibly shown until re-parented to the ImgHolder.

body > .zoomContainer {
    opacity:0 !important;
    pointer-events:none !important;
}