Adding landmarks with Smooth Zoom Pan and PrettyPhoto

I'm using the JQuery plugin Smooth Zoom Pan together with PrettyPhoto:

http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142

This works fine with PrettyPhoto functionality as incorporated in smoothzoom by the developer in 2014. Now I want to add landmarks as included in the functionality of smoothzoom. However the examples and documentation do not include adding landmarks whilst using PrettyPhoto.

smoothzoom is initialised like:

$('#yourImageID').smoothZoom({          
            width: 512,
            height: 384,
            pan_BUTTONS_SHOW: "NO",
            pan_LIMIT_BOUNDARY: "NO",
            button_SIZE: 24,
            button_ALIGN: "top right",  
            zoom_MAX: 200,
            border_TRANSPARENCY: 20,
            container: 'zoom_container',

            /******************************************
            Enable Responsive settings below if needed.
            Max width and height values are optional.
            ******************************************/
            responsive: false,
            responsive_maintain_ratio: true,
            max_WIDTH: '',
            max_HEIGHT: '',
        });


});

However, SmoothZoom with PrettyPhoto is like the code below and it doesn't seem to work with landmarks and the zoom container is not an option as it is in the above code.

 $(".zoom a[rel^='prettyPhoto'], .zoom_thumb a[rel^='prettyPhoto']").prettyPhoto({
            default_width: canvasWidth,
            default_height: canvasHeight,
            autoplay_slideshow: false,
            opacity: 0.70,
            theme: 'pp_default',
            modal: true,
            overlay_gallery: false,
            changepicturecallback: setZoom,
            callback: closeZoom,
            social_tools: false,
            image_markup: '<div style="width:' + canvasWidth + 'px; height:' + canvasHeight + 'px;"><img id="fullResImage" src="{path}" /></div>',
            fixed_size: true,
            responsive: false,
            allow_expand: false,
            allow_resize: false,
            responsive_maintain_ratio: true,
            max_WIDTH: '',
            max_HEIGHT: ''
        }); 

Unfortunately the developer no longer offers support or replies to contact. Nevertheless it's a great plugin. There is some good documentation but as stated, doesn't show how to use landmarks when using smoothzoom and prettyphoto combined:

Docs

I have created a fiddle that shows the landmark functionality, http://jsfiddle.net/7zqLstpg/2/

I have also created a fiddle where I am attempting to add landmarks in a smoothzoom/prettyphoto popup lightbox which I think SHOULD be working:

http://jsfiddle.net/14LjzLrk/10/

Now if someone can guide me to get that last fiddle working?

PrettyPhoto can be used for iframes by doing:

<a href='*SRC of iframe*?iframe=true' rel='prettyPhoto' title=''>
<img id="yourImageID" src="images/penguins.jpg" width="300" height="225" /></a>

Create the Smooth Zoom Pan page in the file you set as source of the iframe.

this will do the job.