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 popup灯箱中添加地标，我认为应该正常工作：

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);
                } );

使用Smooth Zoom Pan和PrettyPhoto添加地标

2 个答案: