プラグインのインスタント・メッセージング・プラグインビューアのPC側のWebバージョンのアプリケーション

免責事項：この記事はブロガーオリジナル記事ですが、許可ブロガーなく再生してはなりません。https://blog.csdn.net/moye666/article/details/80285065

元の画像を参照するには、プロジェクトの維持にインスタントメッセージング、Webバージョンの手は、表示する方法、弱い操作性、比較的不快なユーザーエクスペリエンスを開くためのリンクを使用することです。

その後、vimwerプラグインが推奨する小さなプロのパートナーのフロントエンドのフロントエンドの後、非常にこする感じが、また、比較的ピット、いくつかの場所に遭遇しています。

最初に、参照はビューアのjsのバージョンです。

window.showLargeImage= function(imgDiv){
    var viewer = new Viewer(imgDiv, {
      url :'data-original',
      fullscreen:false,//这里是对于插件中的工具的，可以看文档
      toolbar:false
    });
  }

次に、各1つの描画、拘束showLargeImagイベントで、これの問題は、これが初めてのための拡大、二回クリックする必要がある - 小さな姉をテストし、ビューアを初期化するために使用されて以来、初めて常にこの問題について不満を、私はそれを変更したいのですが、公式の単一のバグの前に得ていたので......ピットが来ていなかった小さな問題だと思います。

最初は私が考えた：私は、全体チャットメッセージボックスのすべての画像は、完全な初期化を実行つもりだ、問題は、それを解決していませんか？

var viewer = new Viewer(document.getElementById('msgDiv'), {
    url: 'data-original'
});

そうすることで二つの質問が表示されます：

（1）画像が絵で、絵をクリックして、その後、個人の詳細ページを入力する必要があり、初期化後、画像をクリックして、同時にビッグピクチャーモードと細部になっています。

（2）新たに発行された写真を、チャット、通常の大きな絵が示すことはできません、あるため、この新しい絵を、視聴者がで初期化されていないことは明らかです

最初の問題は解決されます。親要素、タグの先頭に、イベントを追加

$(".headimg").click(function(event) {
  return false;
});

子要素を禁止するイベントをクリックします。

私は、バックエンドのJavaの1つの専門のフロントエンドではないですので第二の問題は、少しピットであるので、私はいくつかの努力を費やしました。この問題を解決する方法で、私はJQバージョンにビューアのバージョンをJSう

  function showImg(){
    $('#msgDiv').viewer( 
     {url :'data-original',
     fullscreen:false,
     toolbar:false,
     navbar:false,
     keyboard:false
     });
   }
 showImg();

言葉遣いは私の額、関数の定義をよりよく知っているし、この、ハハ、ここでこのアイデアは、と呼ばれるカプセル化Javaの権利を呼び出す回ります。

しかし、これはまだ最初の画像は、初期化に参加することができない問題を解決していません。

このため、I情報を焼きチョップは、コードセグメントので書きます

 function updateImg(){
    $("#msgDiv").viewer('update');  
  }

あなたは内部のチャットボックス、およびノー絵ので、その後、最初の写真を送ってチャットしている場合ので、これは、私が愚か作られたよりも大きいので、updateImg今回は失敗し、無効なクリックの写真。

おかげJQセレクタの利便性は、私は一人一人のマップは、クラスIMG-MSGの名前が付いてます

$("#msgDiv")换成$(".img-msg")

  function showImg(){
    $('.img-msg').viewer( 
     {url :'data-original',
     fullscreen:false,
     toolbar:false,
     navbar:false,
     title:false,
     keyboard:false
     });
   }

showImg();

function updateImg(){
    $("#msgDiv").viewer('update');  
  }

必要な場合には、コールupdateImgを拡大するので、あなたが解決するときの写真を送って初めて見ることができ、無効をクリックし、結局最後に少し問題が生じ、それが送られた最新の画像である私が欲しいとき、プレビューが表示されません。大きな絵、私のimgタグは、SRCは小さなマップアドレス、データ・元アドレスは大きな絵を入れて置きます。古い従業員は、視聴者がコードのブレークポイントの基礎となる、長い時間のために私に同行するために、フロントエンドを助け、最終的にupdateImgの穴を発見した,,,,ああと木があります！！！

ここでは、更新、および、視聴者が簡単に取得しないように、データの元の値を持っていませんでした。私は、各新しく追加された画像=「updateImg（）」のためにonloadイベントバインド、ここupdateImg完全に余分書きます大きな画像に対処するために、彼は小さなマップを開きました。

最終的に削除updateImg方法は、バインディングshowImgは、直接、新たに追加された写真に、ああ、問題が解決されます。

量は、比較的弱いJS、スキルポイントは、Java上のポイントである前にため、上記の、虚偽とは何か、見てありがとう、私を修正するために偉大な神があると思っています。

プラグインのインスタント・メッセージング・プラグインビューアのPC側のWebバージョンのアプリケーション

おすすめ