Webデザイン受講生のまいにち。

フェリカテクニカルアカデミー  8月18日開講クラスで学んだ事や日々のちょっとした事を書きたいと思います。

scrollableとrightbox

今日は、scrollableとrightboxを使って画像のスクロールページの作成をしました。

まずは、クリックした際に表示される大きい写真15枚(190px×240px)を準備します。
① 好きな画像を探して、フォトショのクリップボードに貼り付けしたものを15枚作成。
② ①で準備した格クリップボードをトリミングツールを使って幅190px、高さ240pxにする。
③ ②で作ったものをドキュメントレイアウトで2画面表示にして、移動ツールで1つのドキュメントにまとめて
  1ページに15レイヤーを作成。



f:id:momo1226:20141021132113p:plain

④個々に「ファイルメニュー」から「web用に保存」をする。

⑤今度は、サムネイル用の小さい画像15枚(100px×100px)を作る為、レイヤーをすべて選択し、
 メニューバーの「イメージ」から「画像解像度」で幅と高さを指定するし、これも④同様に個々に保存する。
f:id:momo1226:20141021131802p:plain

写真の準備が終わったら、いよいよHTMLです。
まず、scrollableのcssとjsファイルを探してきて、保存して自分のフォルダーに移動し
その後、html内で読み込みします。
その後にbodyの中を書いていきます。

f:id:momo1226:20141021112103p:plain

f:id:momo1226:20141021112116p:plain

プレビューするとこんな感じです。
ここまでだと、まだサムネル画像のスクロールまでです。

f:id:momo1226:20141021112048p:plain


これにサムネイル画像をクリックした時に大きな画像を表示する処理を
rightboxを使って書いていきます。
body内のタグリンクで囲っていきます。


f:id:momo1226:20141021112140p:plain


そうすると、クリックした時に元画像が見えます。


あとは、bgカラーの変更や、写真の読み込み速度など自分の好きな様にカスタマイズして完了です。

f:id:momo1226:20141021134039p:plain


f:id:momo1226:20141021112130p:plain
↑上の画像がrightbox.jsをそのまま表示したものです。


↓の画像がちょっと背景色や写真の周りの幅を変更したものです。
f:id:momo1226:20141021124342p:plain


わかりずらいですが、scrollableとrightboxを使ってこんなことができるみたいで、
出来ると楽しいですね^^

ちなみに、私はこの表示が上手くできなかったのですが、先生に教えてもらったら
下の写真のscriptリンクの読み込み順が逆だったようです^^;


f:id:momo1226:20141021134734p:plain