3

このアプリケーションの機能を Wordpress で 100% 動作させるのに苦労しました。私は Wordpress 以外のサーバーにアプリケーションの動作バージョンを持っていますが、Wordpress が関与すると事態がおかしくなりました。

私が現在抱えている問題は、プロセスの 2 番目のステップにあります。ユーザーは、qr コードの中央に表示される画像の一部を切り取ることができます。ここでは、実際の例と何が起こるかを確認できます。ここでは、2 番目のステップでどこが壊れているかを確認できます。jQuery は問題なく動作しているように見えるため、Wordpress テーマのどこかに CSS の競合があると推測しています。Inspect 要素は、実際の例ではマージンと高さ/幅がトリミングされた選択でオンザフライで調整されていることを示していますが、壊れた例では高さ/幅はまったく調整されていません。テーマにあるすべての CSS ファイルを無効にしようとしましたが、役に立ちません。

左側の画像がトリミングされているため、右側の画像を更新するために使用している jQuery を次に示します。使用しているプラ​​グインは jcrop です。問題は、動作中のバージョンでは高さと幅がインライン css で正しく更新されていることですが、壊れたバージョンではこれらの値は更新されていませんが、マージンは両方のバージョンで正しく機能しています。

//function to update preview divs
jQuery(function($){
    var jcrop_api, boundx, boundy; //set jcrop variables

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = 73 / c.w;
            var ry = 73 / c.h;

            jQuery('#preview').css({
                width: Math.round(rx * boundx) + 'px !important',
                height: Math.round(ry * boundy) + 'px !important',
                marginLeft: '-' + Math.round(rx * c.x) + 'px !important',
                marginTop: '-' + Math.round(ry * c.y) + 'px !important'
            });
        }
    };

    //function to update coordinates
    function updateCoords(c)
    {
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
    };

    jQuery(window).load(function () {
        var PathToFile = jQuery('#cropImageDisplay').attr("name");
        jQuery('#cropImageDisplay').load("/wp-content/themes/howfarqr/resources/php/uploadedImage.php?fn="+PathToFile).hide().fadeIn('slow', function() {
            jQuery('#cropbox').Jcrop({ //jcrop selector
                onChange: updatePreview, //function to execute onChange
                onSelect: updateCoords, //function to execute onSelect
                aspectRatio: 1 //asepct ratio
            },function(){ //callback function
                    var bounds = this.getBounds(); // get the real image size
                boundx = bounds[0]; //assign x
                boundy = bounds[1]; //assign y
                //store jcrop api as jcrop variable
                jcrop_api = this;
            });
        });
    });
});
4

1 に答える 1

2

この問題は、 と が定義されていないことに関連していboundxますboundy。渡されたオブジェクトを見る.css()(ブレークポイントを使用):

> console.log({
    width: Math.round(rx * boundx) + 'px',
    height: Math.round(ry * boundy) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
})
▼ Object
    height: "NaNpx"
    marginLeft: "-25px"
    marginTop: "-9px"
    width: "NaNpx"
    __proto__: Object
> boundx
undefined

その理由を今調べています。

あはは：

ここに画像の説明を入力

2 つのページの JavaScript は同一ではありません。

Jcrop コールバック関数がまったく呼び出されていないように見えます。理由がわからない。

2 つのページは、異なるバージョンの Jcrop も使用しています。動作中の実装には v0.9.9があり、動作していない実装には0.9.8 と思われるものを使用しています。

于 2011-11-23T18:26:14.570 に答える