Php 缩放图像-Wordpress

我用的是wordpress 3.8，woocommerce 2.0.20。我正在使用这个缩放图像插件（）

一切看起来都很好，但是当我有一个颜色变化的产品时，它不会改变图像的颜色，但是当你用鼠标缩放时，它会显示上一个图像

缩放图像插件代码：

class TccZoom {
    var $pluginPath;
    var $pluginUrl;

    public function __construct()
    {
        // Set Plugin Path
        $this->pluginPath = dirname(__FILE__);

        // Set Plugin URL
        $this->pluginUrl = WP_PLUGIN_URL . '/zoom-image';



        add_filter('woocommerce_product_thumbnails', array( &$this, 'apply_zoom') );
        add_action('woocommerce_product_thumbnails', array( &$this, 'add_scripts') );

        if(is_admin()){
            add_action('admin_menu', array(&$this, 'add_zoom_image_plugin_page'));
            add_action('admin_init', array(&$this, 'zoom_image_init'));

            add_action( 'admin_enqueue_scripts',  array(&$this, 'wp_enqueue_color_picker') );
        }
    }

    static function install() {
        add_option('zoom_image_options', array('zoom_thumbnails'=>'1'));    
    }

    function wp_enqueue_color_picker( ) {
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker-script', plugins_url('/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
    }   

    public function add_zoom_image_plugin_page(){
        // This page will be under "Settings"
    add_options_page('Zoom Image Settings', 'Zoom Image', 'manage_options', 'zoom-image', array($this, 'create_zoom_image_page'));
    }

    public function create_zoom_image_page(){
        ?>
    <div class="wrap">
        <?php screen_icon(); ?>
        <h2>Zoom Image Settings</h2>        
        <form method="post" action="options.php">
            <?php
                    // This prints out all hidden setting fields
            settings_fields('zoom_image_group');    
            do_settings_sections('zoom_image_settings');
        ?>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
    }

    public function zoom_image_init(){      

        register_setting('zoom_image_group', 'zoom_image_options', array($this, 'check_zoom_image_options'));

        add_settings_section(
        'general_zoom_settings',
        'Zoom image options',
        array($this, 'print_section_info'),
        'zoom_image_settings'
        );  

        add_settings_field(
            'zoom_thumbnails', 
            'Zoom over thumbnails ?', 
            array($this, 'create_zoom_thumbnails_field'), 
            'zoom_image_settings',
            'general_zoom_settings'         
        );      
        /*
        add_settings_field(
            'zoom_level', 
            'Zoom level', 
            array($this, 'create_zoom_level_field'), 
            'zoom_image_settings',
            'general_zoom_settings'         
        );      
        */
        add_settings_field(
            'zoom_type', 
            'Zoom type', 
            array($this, 'create_zoom_inner_field'), 
            'zoom_image_settings',
            'general_zoom_settings'         
        );      
        /*
        add_settings_field(
            'zoom_background_color', 
            'Background color', 
            array($this, 'create_zoom_color_field'), 
            'zoom_image_settings',
            'general_zoom_settings'         
        );      
        */


    }

    public function check_zoom_image_options($input){

        if(!in_array($input['zoom_thumbnails'],array(0,1)))
        {
            $input['zoom_thumbnails'] = '';
        }

        if(!in_array($input['zoom_level'],array(0.5,1,2)))
        {
            $input['zoom_level'] = '';
        }

        if(!in_array($input['zoom_type'],array('window','inner','lens')))
        {
            $input['zoom_type'] = '';
        }

        return $input;

    }

    public function print_section_info(){
    //print 'Enter your setting below:';
    }

    public function create_zoom_thumbnails_field(){

        $options =  get_option('zoom_image_options');
    ?>

    <input type="checkbox" id="zoom_over_thumbnails" name="zoom_image_options[zoom_thumbnails]" value="1" <?php if($options['zoom_thumbnails']==1) { ?> checked="checked" <?php } ?> />

    <?php
    }

    public function create_zoom_inner_field(){

        $options =  get_option('zoom_image_options');
    ?>

        <select name="zoom_image_options[zoom_type]">
            <option value="window" <?php if($options['zoom_type']=='window') { ?> selected="selected" <?php } ?>>Window</option>
            <option value="lens" <?php if($options['zoom_type']=='lens') { ?> selected="selected" <?php } ?>>Lens</option>
            <option value="inner" <?php if($options['zoom_type']=='inner') { ?> selected="selected" <?php } ?>>Inner</option>
        </select>

    <?php
    }


    public function create_zoom_level_field()
    {
        $options =  get_option('zoom_image_options');
    ?>
        <select name="zoom_image_options[zoom_level]">
            <option value="1" <?php if($options['zoom_level']==1) { ?> selected="selected" <?php } ?>>Normal zoom</option>
            <?php /*
            <option value="0.5" <?php if($options['zoom_level']==0.5) { ?> selected="selected" <?php } ?>>Twice as big</option>
            */ ?>
            <option value="2" <?php if($options['zoom_level']==2) { ?> selected="selected" <?php } ?>>Twice as small</option>
        </select>
    <?php
    }


    public function create_zoom_color_field()
    {
        $options =  get_option('zoom_image_options');
    ?>  
        <input type="text" id="zoom_background" class="wp-color-picker-field" name="zoom_image_options[zoom_background_color]" value="<?php echo esc_attr($options['zoom_background_color']); ?>" />
        <br />
        <span>Available only for Zoom type: window</span>
    <?php    
    }

    function apply_zoom()
    {


        global $post;
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', false, '' );

        $options = get_option('zoom_image_options');

        ob_start();
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.woocommerce-main-image img').attr('data-zoom-image','<?php echo $src[0]; ?>');
        $('.woocommerce-main-image img').elevateZoom({
            <?php if($options['zoom_level']) { ?>
            zoomLevel : <?php echo strip_tags(trim($options['zoom_level'])); ?>,
            <?php }else { ?>
            zoomLevel : 1,
            <?php } ?>

            <?php
            switch ($options['zoom_type'])
            {
                case "window":
            ?>
            zoomType  : "window",   
            lensShape : "square",   
            <?php   
                break;  
                case "lens":
            ?>
             zoomType   : "lens",
             lensShape : "round",

            <?php   
                break;  
                case "inner":
            ?>
            zoomType : "inner",
            cursor : "crosshair",
            <?php   
                break;  
                default:
            ?>
            zoomType  : "window",   
            lensShape : "square",   
            <?php   
                break;
            }

                if(strlen(trim($options['zoom_background_color']))>1 && $options['zoom_type']=='window' ) { 
            ?>
                tint:true, 
                tintColour:'<?php echo esc_attr($options['zoom_background_color']); ?>', 
                tintOpacity:0.5
            <?php
                }
            ?>
        });

        <?php if($options['zoom_thumbnails']==1) { ?>
        $('.thumbnails .zoom img').each(function(){
                $(this).attr('data-zoom-image',$(this).parent().attr('href'));
        });
        $('.thumbnails .zoom img').elevateZoom({
            zoomType  : "window",
            lensShape : "square",
            lensSize  : 20,
            zoomWindowPosition: 16, 
            zoomWindowOffetx: 10,
            <?php if($options['zoom_level']) { ?>
            zoomLevel : <?php echo strip_tags(trim($options['zoom_level'])); ?>,
            <?php }else { ?>
            zoomLevel : 1,
            <?php } ?>
            <?php
                if(strlen(trim($options['zoom_background_color']))>1) { 
            ?>
                tint:true, 
                tintColour:'<?php echo esc_attr($options['zoom_background_color']); ?>', 
                tintOpacity:0.5
            <?php
                }
            ?>
        });
        <?php } ?>

    })
    </script>
    <?php   
        echo ob_get_clean();
    }

    function add_scripts() {
        wp_enqueue_script( 'tcc-magnifier-js', $this->pluginUrl.'/js/jquery.elevateZoom-2.5.5.min.js', 'jquery' );
    }




}
$tcczoom = new TccZoom;
register_activation_hook( __FILE__, array('TccZoom', 'install') );

类{
var$pluginPath；
var$pluginUrl；
公共函数构造（）
{
//设置插件路径
$this->pluginPath=dirname（\u_文件\u_）；
//设置插件URL
$this->pluginUrl=WP\u PLUGIN\u URL./zoom image'；
添加_过滤器（'woocommerce_product_缩略图'，数组（&$this，'apply_zoom'）；
添加动作（'woocommerce'u产品缩略图'，数组（&$this，'add_脚本'）；
if（is_admin（））{
添加操作（'admin_menu'，array（&$this，'add_zoom_image_plugin_page'）；
添加操作（'admin_init'，数组（&$this，'zoom_image_init'）；
添加操作（'admin_enqueue_scripts'，数组（&$this，'wp_enqueue_color_picker'））；
}
}
静态函数安装（）{
添加选项（“缩放图像选项”，数组（“缩放缩略图”=>“1”）；
}
函数wp\u排队\u颜色\u选择器（）{
wp_排队_样式（“wp颜色选择器”）；
wp_enqueue_脚本（'wp color picker script'，plugins_url（'/js/colorPicker.js'，_文件），数组（'wp color picker'），false，true）；
}   
公共功能添加\缩放\图像\插件\页面（）{
//此页面将位于“设置”下
添加选项页面（“缩放图像设置”、“缩放图像”、“管理选项”、“缩放图像”、“数组”（“创建缩放图像页面”）；
}
公共函数创建\缩放\图像\页面（）{
?>
缩放图像设置
/>
>窗口
>镜头
>内在的
>正常变焦
selected=“selected”>两倍大
*/ ?>
>两倍小
$（'.thumbnails.zoom img'）。每个（函数（）{
$（this.attr（'data-zoom-image'，$（this.parent（）.attr（'href'））；
});
$（'.thumbnails.zoom img'）.elevateToom({
zoomType:“窗口”，
透镜形状：“正方形”，
伦西兹：20，
ZoomWindows位置：16，
zoomWindowOffetx:10，
zoomLevel:，
zoomLevel:1，
丁特：没错，
颜色：''，
不透明度：0.5
});
})
我们使用了非常类似的东西，也有同样的问题。如果您对切换插件感兴趣，您可以通过将这行jQuery添加到标题中的脚本来解决该插件的相同问题：

jQuery（'form.variations\u form'）。在（'found\u variation'，函数（事件，变量）上{
addCloudZoom（$productImages）；
}）；

再说一次，要明确的是，此解决方案对您正在使用的插件不起作用，但对于提供相同功能的插件，它解决了同样的问题。如果您无法为您正在使用的插件找到解决方案，您可以尝试切换并使用此解决方案。
这只是复制的插件代码，还是您确实尝试过什么你自己？只是复制了插件！