はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvector,などを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

JavaScript版のSwipe Engineのswipejsで画像のスライドショーを作ります。
swipejsの簡単な使い方は１回目「JavaScript版のSwipe Engine、swipejsを使う」を参照してください。

１ページに写真１枚を表示するスライドショー

画像を用意して表示するようにします。
今回は600x600の正方形の画像を５枚用意しました。
この画像を、それぞれ１ページに１枚表示させ、合計５ページのスライドショーが表示されるようにします

まずは、サンプルのswipeファイルはこちらです。

slideshow1.swipe

{
    "dimension":[600,600],
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ]
            }
        }
    },
    "title":"photo gallery",
    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ]
	},
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ]
        },
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
        }
    ],
    "type":"net.swipe.swipe"
}

解説していきます。
まず、Swipeが表示される領域の大きさをしています。今回は画像に合わせて600x600としてます。
ブラウザ上で600x600の大きさで表示されるのではなくSwipeが表示される領域全体を600x600と仮定して、画像の大きさや位置を調整します。

    "dimension":[600,600],

次に、テンプレートを指定します。テンプレートは表示させるページのテンプレートです。ここではphotoという名前のページのテンプレートを定義して、そのテンプレートはidが"1"のelementを１つ持っています。このid "1"のelementにimgで表示する写真を指定していて、x,y, w,hで位置と大きさを指定しています。ここでは、x,yは０，つまり左上を基準にw,h縦横600と表示領域いっぱいに写真を表示させています。

    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    { "h":600, "x":0, "img":"./1.jpg", "w":600, "y":0, "id": "1" }
                ]
            }
        }
    },

タイトルです。

    "title":"photo gallery",

次に実際に表示させるページを定義します。
pagesはobjectのarrayで、それぞれ１ページづつ定義します。
１ページ目はphotoのテンプレートをそのまま表示させます。elementはidのみ指定します

    "pages":[
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
	},

１ページ目以降は、写真を差し替えるので、imgのみを追加で指定しています。
こうするとphotoのテンプレートのid"1"のelementのimg要素だけを差し替えて表示させられます。x,y,w,hの位置、大きさの要素はそのまま引き継がれます。

        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./2.jpg"} ]
	},
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./3.jpg"} ]
	},
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./4.jpg"} ]
	},
        {
            "template":"photo",
            "elements":[{"id":"1", "img": "./5.jpg"} ]
	}
    ],

swipeファイルの形式指定。おまじない。他にもnet.swipe.listがある。

    "type":"net.swipe.swipe"

作成したサンプルはこちらにあります。
http://www.swipejs.net/sample2/sample1.html

swipeファイルはこちら。
http://www.swipejs.net/sample2/slideshow1.swipe

１ページに写真４枚を表示するスライドショー

次に同じ写真を使って、今度は１ページに４枚の画像を配置します。
画像を８枚用意して、４枚の写真が表示されるページを２ページ作ります。まずは完成品。

slideshow2.swipe


{
    "dimension":[600,600],
    "title":"photo gallery",
    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    {"h":300,"x":0,"img":"./1.jpg","w":300,"y":0, "id": "1" },
                    {"h":300,"x":0,"img":"./2.jpg","w":300,"y":300, "id": "2" },
                    {"h":300,"x":300,"img":"./3.jpg","w":300,"y":0, "id": "3" },
                    {"h":300,"x":300,"img":"./4.jpg","w":300,"y":300, "id": "4" }
                ]
            }
        }
    },
    "pages":[
        {
            "template":"photo",
            "elements":[
                {"id": "1" },
                {"id": "2" },
                {"id": "3" },
                {"id": "4" }
            ]
        },
        {
            "template":"photo",
            "elements":[
                {"img":"./4.jpg", "id": "1" },
                {"img":"./3.jpg", "id": "2" },
                {"img":"./2.jpg", "id": "3" },
                {"img":"./1.jpg", "id": "4" }
            ]
        }
    ],
    "type":"net.swipe.swipe"
}

解説していきます。
まずはテンプレート。photoのページテンプレートを１つ作成。各elementに写真を配置します。画像は画面の縦横サイズの半分の300x300の大きさにします。w,hをそれぞれ300に指定とします。それぞれの位置を重ならないようにタイル状に、x,yを、0か300の位置に指定して４枚配置します。idはそれぞれ1,2,3,4とてimgで各画像を指定します。

    "templates": {
        "pages": {
            "photo": {
                "elements":[
                    {"h":300,"x":0,"img":"./1.jpg","w":300,"y":0, "id": "1" },
                    {"h":300,"x":0,"img":"./2.jpg","w":300,"y":300, "id": "2" },
                    {"h":300,"x":300,"img":"./3.jpg","w":300,"y":0, "id": "3" },
                    {"h":300,"x":300,"img":"./4.jpg","w":300,"y":300, "id": "4" }
                ]
            }
        }
    },

ページです。１ページめは、photoのテンプレートをそのまま表示させます。

    "pages":[
        {
            "template":"photo",
            "elements":[
                {"id": "1" },
                {"id": "2" },
                {"id": "3" },
                {"id": "4" }
            ]
        },

2ページめは、photoのテンプレートの各画像を差し替えます。各elementのidを１ページと同様に指定して、imgを変更します。

        {
            "template":"photo",
            "elements":[
                {"img":"./4.jpg", "id": "1" },
                {"img":"./3.jpg", "id": "2" },
                {"img":"./2.jpg", "id": "3" },
                {"img":"./1.jpg", "id": "4" }
            ]
        }
    ],
    "type":"net.swipe.swipe"
}

完成したサンプルはこちらにあります。
http://www.swipejs.net/sample2/sample2.html

今回作成したswipeファイルはこちら。
http://www.swipejs.net/sample2/slideshow2.swipe

htmlとswipeファイルをダウンロードして、画像を差し替えればすぐに試すことができます。まずはサンプルをいじって遊んでみてください。