しつこい！javascriptライブラリ「Lightbox」

ダイエット成功はいいのですが

仕事がたまりにたまって
土曜日なのに1日中仕事...

なにが大変て
絡んでくる娘を追放する作業まで
付いてくるからです

水虫の薬の
「しつこい、しつこい、しつこい...」
ってCMを真似して

私の体の周りをグルグル回ります

さすがにキレて
「あっち行け!」
って怒鳴っちゃいました

今日はホームページ製作
知り合いに頼まれた
会社のホームページです

とある工務店さんで必要最低限でいいとのことでしたが
「やっぱり施工事例は必要だと思う」
って提案しました

自分がお客さんだったら
この工務店はどんな家作るんだろう？
と見たくなると思うんです

「そうだよね」ってことで
会社概要のページのグーグルマップでの案内地図を削って
施工事例を載せることに

グーグルマップって便利なんですけど
山の方には向いてませんね
道路が載ってないんです...

都市部ではストリートビューで
散歩もできるんですが

施工物件の写真が入ったCDを届けてもらい
さっそく作業へ

施工した物件の小さい写真を並べて
クリックで大きく映せるようにします

それは簡単なんですけど
ちょっと工夫したいなと思いました

前から気になってた
javaScriptライブラリ「Lightbox」
を使うことにしました

単純に写真を表示するのではなく
アニメーション効果を利用して
写真をきれいに見せることができます

使い方は簡単

Lightboxをダウンロードして解凍

js、css、imagesの各フォルダをアップロード

imagesに小さい写真とでっかい写真をアップロード

HTMLのhead部分に
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
を付け加えます

最後に
<a href="images/でっかい写真.JPG" rel="lightbox"><img src="images/小さい写真.JPG" width="150" height="111" alt="施工事例　八戸市　三浦様" />
なんて感じにします

施工物件の写真を並べて
さあ実際にブラウザで見てみると

...あれ？？

Firefoxでは大丈夫なのですが
IE7では後ろの半透明の幕が切れています

でたIE
ほんと使えない...

CSSのoverlay いじってみても変わらず
lightbox.jsをながめてみます

う～ん怪しいのは
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); ってとこと
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
ってとこ

とりあえず
arrayPageSize[1] + 1000 + 'px' });
と変えてみると

やりー！
ちゃんと伸びてくれました

Firefoxでは伸びすぎちゃってるけど
仕方ありません

だれかちゃんと知ってる人がいれば
教えてください

まあとにかく完成です

久しぶりに人のホームページを作りましたが
たまにはいいですね

自分のサイト作りでは
どっかで妥協したりするんですよね

でもまだまだ
私に任せてもらったからには
これからが勝負です

がっつり集客させてもらいます

まずはSEOから

半年後には
この地域の工務店ではトップに検索されるでしょう

さらにそのホームページでは
とある商品をプッシュしてるんですが
その商品名で全国1位を狙います！

あ、

来ました

しつこい、しつこい、しつこい...

そろそろ娘と遊ばなければならないようです。

• javascript
• Lightbox
• ライブラリ

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)

Powered by
Movable Type Pro 4.25