ポップアップ画像ビューア

動作

LigthBoxのようなポップアップする画像ビューアーです。 

バージョン

Curl Advanced UI 0.5

API説明

ImagePopupButtonクラス

ポップアップ画像ビューアを作成するクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

Frame

コンストラクタ

default
引数1(URL):サムネイル画像のURL(画像が存在しない場合は、”No Image”という画像が表示されます。)
引数2(URL):表示画像のURL(画像が存在しない場合は、”No Image”という画像が表示されます。)
キーワード引数（title:String = “”）：LightBoxビューの左下に表示される画像のタイトル
キーワード引数（group-name:String = “”）：同一グループの表示画像を一連で表示します。
　　（同一名称の画像を、画像上のPrev、Nextボタンで順に表示します。””を指定した場合は、Applet内の全lightbox-popup-buttonがグループとなります。）
キーワード引数（tooltip:#String = “”）：サムネイル画像上にマウスがある時に表示されるTooltip

メソッド

なし

利用方法

ポップアップ画像ビューアを利用するには、ImagePopupButtonにURLを指定して作成します。グループが存在する場合は、画像上部の右側、もしくは、左側にマウスを移動した際に表示される、Prev、Nextボタンで、順に表示することができます。また、Prev、Next動作は、左矢印キー、右矢印キーでも行えますし、表示画像はCloseボタン、もしくは、ESCキーで閉じることができます。

{curl 6.0 applet}
{applet manifest = “manifest.mcurl”,
    {compiler-directives careful? = true}
}

{import * from COM.CURLAP.ADVANCED-UI.CONTAINERS}

{let img1:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Garden-s.jpg”},
                                      {url “./images/Garden.jpg”},
                                      title = “Image No.1”,
                                      group-name = “GROUP-1”,
                                      tooltip = “Image No.1\nThe new line is possible, too.”
                                  }}
{let img2:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Oryx Antelope-s.jpg”},
                                      {url “./images/Oryx Antelope.jpg”},
                                      title = “Image No.2”,
                                      group-name = “GROUP-1”,
                                      tooltip = “Image No.2”
                                  }}
{let img3:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Island-s.jpg”},
                                      {url “./images/Island.jpg”},
                                      title = “Image No.3”,
                                      group-name = “GROUP-1”,
                                      tooltip = “Image No.3”,
                                      animation-type = ImagePopupViewAnimationType.width-and-height
                                  }}
{let img4:ImagePopupButton= {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Forest-s.jpg”},
                                      {url “./images/Forest.jpg”},
                                      title = “Image No.4”,
                                      group-name = “GROUP-1”,
                                      tooltip = “Image No.4”
                                  }}
{let img5:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Forest Flowers-s.jpg”},
                                      {url “./images/Forest Flowers.jpg”},
                                      title = “Image No.5”,
                                      group-name = “GROUP-1”,
                                      tooltip = “Image No.5”
                                  }}
{let img6:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/Island-s.jpg”},
                                      {url “./images/Island.jpg”},
                                      title = “Image No.6”,
                                      group-name = “GROUP-2”,
                                      tooltip = “Image No.6”
                                  }}
{let img7:lightbox-popup-button = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/sunset-s.jpg”},
                                      {url “./images/sunset.jpg”},
                                      title = “Image No.7”,
                                      group-name = “GROUP-3”,
                                      tooltip = “Image No.7”
                                  }}
{let img8:ImagePopupButton = {ImagePopupButton
                                      width = 100pt,
                                      height = 100pt,
                                      {url “./images/palm-s.jpg”},
                                      {url “./images/palm.jpg”},
                                      title = “Image No.8”,
                                      group-name = “GROUP-3”,
                                      tooltip = “Image No.8”
                                  }}
{let img10:ImagePopupButton = {ImagePopupButton
                                       width = 100pt,
                                       height = 100pt,
                                       {url “./images/Garden-s.jpg”},
                                       {url “./images/Garden.jpg”},
                                       title = “Normal Size”,
                                       group-name = “GROUP-4”,
                                       tooltip = “Normal Size”
                                   }}
{let img11:ImagePopupButton = {ImagePopupButton
                                       width = 100pt,
                                       height = 100pt,
                                       {url “./images/Garden-2.jpg”},
                                       {url “./images/Garden-2.jpg”},
                                       title = “When height is insufficient.”,
                                       group-name = “GROUP-4”,
                                       tooltip = “When height is insufficient.”
                                   }}
{let img12:ImagePopupButton = {ImagePopupButton
                                       width = 100pt,
                                       height = 100pt,
                                       {url “./images/Garden-3.jpg”},
                                       {url “./images/Garden-3.jpg”},
                                       title = “When width is insufficient.”,
                                       group-name = “GROUP-4”,
                                       tooltip = “When width is insufficient.”
                                   }}
{let img13:ImagePopupButton = {ImagePopupButton
                                       width = 100pt,
                                       height = 100pt,
                                       {url “./images/Garden-s.jpg”},
                                       {url “./images/Garden.jpg”},
                                       title = “Normal Size”,
                                       group-name = “GROUP-4”,
                                       tooltip = “Normal Size”
                                   }}
{value
    {VBox
        {HBox
            img1,
            img2,
            img3,
            img4,
            img5
        },
        {HBox
            img6
        },
        {HBox
            img7,
            img8
        },
        {HBox
            img10,
            img11,
            img12,
            img13
        }
    }
}

 

関連Curl標準API

Frame

 

ja 日本語
ar العربيةzh-CN 简体中文nl Nederlandsen Englishfr Françaisde Deutschit Italianoja 日本語pt Portuguêsru Русскийes Español