scrollableとrightbox
今日は、scrollableとrightboxを使って画像のスクロールページの作成をしました。
まずは、クリックした際に表示される大きい写真15枚(190px×240px)を準備します。
① 好きな画像を探して、フォトショのクリップボードに貼り付けしたものを15枚作成。
② ①で準備した格クリップボードをトリミングツールを使って幅190px、高さ240pxにする。
③ ②で作ったものをドキュメントレイアウトで2画面表示にして、移動ツールで1つのドキュメントにまとめて
1ページに15レイヤーを作成。
④個々に「ファイルメニュー」から「web用に保存」をする。
⑤今度は、サムネイル用の小さい画像15枚(100px×100px)を作る為、レイヤーをすべて選択し、
メニューバーの「イメージ」から「画像解像度」で幅と高さを指定するし、これも④同様に個々に保存する。
写真の準備が終わったら、いよいよHTMLです。
まず、scrollableのcssとjsファイルを探してきて、保存して自分のフォルダーに移動し
その後、html内で読み込みします。
その後にbodyの中を書いていきます。
プレビューするとこんな感じです。
ここまでだと、まだサムネル画像のスクロールまでです。
これにサムネイル画像をクリックした時に大きな画像を表示する処理を
rightboxを使って書いていきます。
body内のタグリンクで囲っていきます。
そうすると、クリックした時に元画像が見えます。
あとは、bgカラーの変更や、写真の読み込み速度など自分の好きな様にカスタマイズして完了です。
↑上の画像がrightbox.jsをそのまま表示したものです。
↓の画像がちょっと背景色や写真の周りの幅を変更したものです。
わかりずらいですが、scrollableとrightboxを使ってこんなことができるみたいで、
出来ると楽しいですね^^
ちなみに、私はこの表示が上手くできなかったのですが、先生に教えてもらったら
下の写真のscriptリンクの読み込み順が逆だったようです^^;