使用 Smooth Zoom Pan 和 PrettyPhoto 添加地标

Question

我正在使用 JQuery 插件 Smooth Zoom Pan 和 PrettyPhoto：

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

这与 2014 年开发人员在 smoothzoom 中合并的 PrettyPhoto 功能配合得很好。现在我想添加包含在 smoothzoom 功能中的地标。但是，示例和文档不包括在使用 PrettyPhoto 时添加地标。

smoothzoom 的初始化如下：

$('#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: '',
        });


});

但是，使用 PrettyPhoto 的 SmoothZoom 就像下面的代码一样，它似乎不适用于地标，并且缩放容器不是一个选项，因为它在上面的代码中。

 $(".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: ''
        }); 

很遗憾，开发人员不再提供支持或回复联系方式。尽管如此，它是一个很棒的插件。有一些很好的文档，但如前所述，没有显示在结合使用 smoothzoom 和 prettyphoto 时如何使用地标：

Docs

我创建了一个显示地标功能的小提琴，http://jsfiddle.net/7zqLstpg/2/

我还创建了一个小提琴，我试图在我认为应该可以工作的 Smoothzoom/prettyphoto 弹出式灯箱中添加地标：

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

现在是否有人可以指导我完成最后的小提琴工作？

Answer 1

PrettyPhoto 可以通过以下方式用于 iframe：

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

在您设置为 iframe 源的文件中创建平滑缩放平移页面。

这样就可以了。

Answer 2

好的，通过摆脱 PrettyPhoto 并使用 JQuery 和 div 在模态窗口中显示平滑缩放平移完全解决了这个问题：

HTML：

<div id='zoom_panel'>
    <div id="zoom_panel_top_box">
        <div id="zoom_panel_top_box_text"></div><div class="close" id="close_zoom_panel"></div>
    </div>
        <div id='zoom_container'>
        </div>
    </div>

jQuery

            $( '#search_list_container' ).on( 'click', '.zoom, .zoom_thumb', function () {
                        specimen = $( this ).attr( 'data-specimen' );
                        thumb = $( this ).attr( 'data-thumb' );
                        $.ajax( {
                            type: "POST",
                            url: 'scripts/get_zoom_image.php',
                            data: {
                                specimen: specimen,
                                thumb: thumb,
                            },
                            success: function ( data ) {
                            new tooltip();
                                $( '#zoom_container' ).html( data );
                                $( '#zoom_panel' ).show();
                                $( '#zoom_image' ).smoothZoom( {
                                    width: 723,
                                    height: 540,
                                    pan_BUTTONS_SHOW: "YES",
                                    pan_LIMIT_BOUNDARY: "NO",
                                    button_SIZE: 18,
                                    button_SIZE_TOUCH_DEVICE: 24,
                                    button_ALIGN: "bottom right",
                                    zoom_MAX: 200,
                                    border_TRANSPARENCY: 0,
                                    border_COLOR: '#5e5e5e',
                                    container: 'zoom_container',
                                    responsive: true,
                                    responsive_maintain_ratio: true,
                                    max_WIDTH: '',
                                    max_HEIGHT: ''
                                } );
                                $.ajax( {
                            type: "POST",
                            url: 'scripts/get_zoom_image_details.php',
                            data: {
                                specimen: specimen,
                            },
                            success: function ( specimen_data ) {
                            $('#zoom_panel_top_box_text').html(specimen_data);
                            }
                            });
        $('#black_overlay').fadeIn(500);
                            }
                        } );
                    } );

                        $( '#close_zoom_panel' ).click( function () {
                    $( "#zoom_panel" ).hide( 500 );
                    $('#black_overlay').fadeOut(500);
                } );