Webixライブラリを使った画像表示No.058

Webアプリの中で写真や画像、PDFなど表示したい場面も多くあると思います。今回は、webixのライブラリを少し加工（拡張コンポーネント）し、新たなphotoコンポーネントを使って、必要時に個別ウィンドウに画像を表示するサンプルを作成しましたので紹介します。
code snipetでの公開です。
この記事を記述するにあたって、WebixサイトのFORUMの記事を参考にしています。
FORUMでもいろいろ情報公開されているので便利です。

photo view

以下にアクセスすると、実際に動作します。
ソースも画面に表示されていますので、修正してアレンジ可能です。

Code Snippet

スタイルにcompactを選んだときの画面は、以下のようになり、画像表示をクリックすると、

のように、写真情報が個別ウィンドウで表示されますので、閉じるときは、閉じるをクリックしてください。
ソースが保存されているサイトと、写真は別サーバに保管しているので、写真用のURLは、相対パスでなく、指定サーバを記述しています。
実際の運用では、相対パスで指定する記述でいいかと思います。
実際の写真画像のサイズは、448X800pxです。
ソースコード上で写真の高さを400pxで指定しているので、リサイズして表示されています。元の写真のサイズが大きいと、表示までに時間がかかるので、リサイズしてサーバに保管したほうがレスポンスが早いです。
ボタン押下時に、表示したい画像情報を指定しているので、複数の画像を１つのウィンドウで表示処理が可能です。
いろいろ応用がきくので、コードを変更して操作してみてください。

//拡張コンポーネント(photo)定義
webix.protoUI({
  name:"photo",
  $init(config){
    if (config.value)
      this.$ready.push(() => this.setValue(config.value))
  },
  getValue(){
    return this.config.value;
  },
  setValue(value){
    this.setHTML("<img style='height:400px;' webix_tooltip='The image' src='"+value+"'>");
    this.config.value = value;
  }
}, webix.ui.template);

//メイン画面
webix.ui({  
  	view:"form",
    scroll:false,
  	width:300,
  	elements:[
       { margin:5, cols:[
        { view:"button", label:"画像表示",width:120,
         click:function(){
           //画像を指定
            var  image_info = "https://sunsun.sakura.ne.jp/webix01/image/samplephoto.jpg";
            image_info = image_info+"?auto=compress%2Cformat&ixlib=php-3.3.0";
            $$("photo_img").setValue(image_info);	//表示コンポーネントに画像をセット
			photo_window.show();	//画像表示
      	}
        }
      ]}
  	]
});

//画像表示用のウィンドウ定義
var photo_window = webix.ui({
    view:"window",
    id:"my_win",
  	//ヘッダーに閉じるボタン定義
    head:{ view:"button",id:"close_btn", value: "閉じる", align:"center", width: 80,
		click:function(){
			photo_window.hide();
      	}
   },
    width: 240,
    height: 440,
    body:{
      view:"photo",
      id:"photo_img",
      borderless:true,
      value: ""
    }
}
);