基金訓練webデザイン講座31日目

面談も終わり、今日から後半に突入。
時間も限られているので、今後の仕事の方向性を定め、そのために必要な技術を見極め、それを確実に身につけていかなければ。
あと、そろそろソフトもバージョンアップ時かな。。今後の稼ぎための投資だと思えば安い?!

JQuery lightboxをカスタマイズ

index.html内のcsscssフォルダ内のcssファイルやjsフォルダ内のjquery.lightbox-0.5.jsをいじって見た目を変えてみる。ソースがいろんなところに記載されているのでちょっとめんどう。

jquery.lightbox-0.5.js をカスタマイズ

デフォルトは下記。まずはココをいじってみる。

  • 「オバーレイ色」25行目→overlayBgColor: ‘#000′
  • 「不透明度」26行目→overlayOpacity: 0.8
  • 「拡大後の枠幅」36行目→containerBorderSize: 10
  • 「拡大スピード」(1000が1秒)37行目→containerResizeSpeed: 400
  • 「上の空き」142行目→(arrPageSizes[3] / 10)

「上の空き」については、“[3] / 10”の分母の“10”を“30”に変えてみると、上のスペースが少し狭くなった。相対的なので、見た目をみながら数字を変えよう。
※167行目にも同様の記載があるが、こっちは触らない。

コレが作ったもの>>

Sexy LightBox

その他のlightbox

※上記2つのlightboxは「jquery.lightbox」と混在できないので要注意!

simpleviewer(Photoshopプラグイン

http://simpleviewer.net/support/

「おぉ!!」授業で実際に使ってみてビックリ!
こんなに簡単にこんな動きができるなんて、スゴイ!!
家でやろうとしたけど、うちのPhotoshopはCS2。
学校から持ってきたダウンロードZIPは合わないので、ダウンロードしようと
ページを探したけど、どっから落としたのかさっぱりわからなくて断念。。
ここのサイトちょっとわかりづらい。。

(画面の縦幅が600(?)以上ないと実行ボタンが見えない。→ モニターの解像度を変えれば可。)

ポラロイド写真風の画像