Magnifier

Magnifierは画像のルーペ機能を追加するシンプルで軽量なjQueryプラグインです。eマーケティングのページにおいて製品を表示する際や、コンテンツを隠してしまう別ウィンドウやポップアップを表示せずにズームしたい時に有用です。

互換性

Web

コントロールの使用方法

Extensibility Catalogを開き左メニューからWebセクションへ移動してください。
 
Magnifierコントロールを選択し、インストールしてください。(コントロールのインストール手順に疑問点がある場合はExtensibility Catalogのドキュメントを参照してください)

インストールの際、コントロールと共にサンプルのXPZをインポートすることを推奨します。
Ignia/Controls/ECharts配下にユーザーコントロールのサンプルXPZをインポートする際、サンプルウェブパネルが１つ作成されユーザーコントロールが使用するSDTがインポートされます。

Magnifier Dataプロパティ

このコントロールはMagnifier Dataプロパティを通じてSDTMagnifier型の変数を受け取ります。ルーペ機能を適用するのに必要な全ての情報がこの変数に読み込まれます。

SDTMagnifierの内容:

  • Id: ルーペ機能を適用するウェブパネルの画像オブジェクトや、ウェブフォームの変数とアトリビュートのInternalNameの値を受け取ります。
         &MagnifierItem.Id = Image1.InternalName
  • ImageUrl: ルーペ機能を適用する画像URLです。Idの値がある場合は必須ではなく、他のユーザーコントロールが画像を読み込んでいてInternalNameがわからない場合等に利用できます。
         &MagnifierItem.ImageUrl = glasses.Link()
  • ImageMagnifiedUrl: ルーペで表示する拡大画像のURLです。元の画像と縦横比が同じである必要があります。
         &MagnifierItem.ImageMagnifiedUrl = glassesMagnified.Link()

データ読み込み例:

Sub 'LoadMagnifier'
    
    &MagnifierItem = new()
    
    &MagnifierItem.Id = Image1.InternalName
    &MagnifierItem.ImageMagnifiedUrl = watchMagnified.Link()
    
    &MagnifierList.Add(&MagnifierItem)
    
    &MagnifierItem = new()
    
    &MagnifierItem.ImageUrl = glasses.Link()
    &MagnifierItem.ImageMagnifiedUrl = glassesMagnified.Link()
    
    &MagnifierList.Add(&MagnifierItem)
    
EndSub

 

RefreshImagesメソッド

機能の実行中に対象となる画像や変数、アトリビュートが変更された際に拡大画像も更新することができます。この場合、SDTMagnifier型の変数の各パラメータが持つRefreshImageメソッドを呼び、更新データを渡す必要があります。

例えばテンプレートmodaのウェブパネルProductDetailでは、ChangeImageイベント内でユーザーが選択したサムネイルに応じて拡大画像を更新しています。 そのコードは以下になります:

Event 'ChangeImage'
    &image.FromURL(&OtherImageUrl)    
    
    &MagnifierList.Clear()
    
    &MagnifierItem = new()
    
    &MagnifierItem.Id = &Image.InternalName
    &MagnifierItem.ImageUrl = &OtherImageUrl
    
    if &OtherImageUrl = ModdaProduct1.Link()
        &MagnifierItem.ImageMagnifiedUrl = ModdaProduct1Magnified.Link()
    else 
        if &OtherImageUrl = ModdaProduct2.Link()
            &MagnifierItem.ImageMagnifiedUrl = ModdaProduct2Magnified.Link()
        else 
            &MagnifierItem.ImageMagnifiedUrl = ModdaProduct3Magnified.Link()
        endif    
    endif

    &MagnifierList.Add(&MagnifierItem)
    
    Magnifier1.RefreshImages(&MagnifierList)
EndEvent