CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>
ARCHIVES
CATEGORIES
RECOMMEND
FROM ME TO YOU
FROM ME TO YOU (JUGEMレビュー »)
YUI,yukamatsumoto,Hideyuki“Daichi”Suzuki,Ikoman,northa+,COZZi
RECOMMEND
<< Happy New Year 2006 | main | SBSでアクセスは増えるのか。 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
lightbox.jsを使用する。
年初のご挨拶で少し実験させてもらっていますが、記事の中のサムネイルをクリックすると

別窓が開くわけでもなく元画像がパッと画面の上に出てくるようになっています。



これはlightbox.jsというjavascript(のライブラリ?)を利用すると出来るようになるのですが、それほどむずかしい事をしているわけではありません。



元記事を参考にCSSをすこし編集し、必要なファイルをアップロードしておきます。

あとはスクリプトを呼び出して記事の中のリンクタグをすこし変更するだけでいいのです。



すると(ページの読み込みが終ってからサムネイルをクリックしてください)

fugu bs!

bs!@fc2 ar

こんな風になります。



面白いですし、IEやOperaでも同じように動くのでこれから続けて使って行こうとおもってます。



Technorati Tags: ,



参考記事リンク

Lightbox JS

lightbox.js - Web2.0ライクな画像サムネイル生成 - OpenStratus
| customize | 01:48 | comments(8) | trackbacks(0) |
スポンサーサイト
| - | 01:48 | - | - |
コメント
早々のお返事ありがとうございます。

気になるスクリプトは一旦外してみて、試して
いるのですが、やはり状況は変わりません^^;
cie さんの CSS をそのまま貼り付けてもみました。

Win+IE 離れが進んでいる中、”まっいいかぁ”
と思いつつも、なんか気になります・・・orz
もう少し、色々な角度から原因探ってみます。
確認いただいてありがとうございました。
| AQ | 2006/02/04 5:04 PM |
AQさんこんばんは。[いぬ]

ぱっと見た限りAQさんのブログと違う所と言えば
LightboxJSに関連するCSS部の画像URLのシングルクォーテーションで囲ってるかいないか。
くらいじゃないでしょうか。

ほかで考えるとすると他のスクリプトが邪魔してるとか・・・
うーんなんでしょうね。もう少しちゃんと見てみないとわからないですね。すみません。[しゅん]

うちはなぜか正常に動いているみたいですが、動いていない所も多いみたいで難しいですね。
特別な事した覚えは無いんですが・・・[汗]
| cie | 2006/02/04 12:27 AM |
Pet lovers Only♪のAQです。
このカスタマイズも、早速導入させていただきました。
すごく気に入っています。いつも楽しい情報をありがとう
ございます。

ひとつわからない事があるのですが、正しく設置できたと
思うのですが、WinのIEで見ると、背景に広がるはずの
overlay.png のイメージがでないのです。
(出てるはずですが全面に広がらない)

Win+ネスケ、Firefox は、OK です。
Mac+ネスケ、Firefox、IE、Safari もOK です。
ネタ元のOpenStratus さんもそういう状況になってますよね。
正直色々と試してみましたが、どうしてもわかりません。
助けてください〜^^;
| AQ | 2006/02/03 6:56 PM |
ありがとうございました。
丁寧に教えていただいたので、ばっちりできました。

スクリプトを開くなんてことができるなんて……まったく知りませんでした。

ちょっと高度なことができてうれしいです。
本当に、ありがとうございました!

| あい | 2006/01/12 1:21 AM |
あいさんこんばんは。

> var loadingImage = 'loading.gif';
これはlightbox.jsを開いてもらうと、上から33行目あたりに該当箇所があります。

ここの
loading.gif
の所をアップロードしておいたloading.gifのアドレス(http://から指定してください)に
変更して保存後、再度lightbox.jsをアップロードしなおして頂ければ"loading"の画像が表示されるとおもいます。
| cie | 2006/01/10 11:55 PM |
こんにちは。
すいません、このカスタマイズについて一つ教えていただけませんでしょうか。

----------------------------------
var loadingImage = 'loading.gif';
----------------------------------

は、CSSに入れるのですか?
それともHTMLに入れるのでしょうか?

CSSにほかのタグと一緒に入れてみたんですけれど、cieさんのように“loading”の画像が出てこないんです[汗]

お手数ですが、教えていただけますでしょうか。
宜しくお願いします。
| あい | 2006/01/10 3:09 PM |
aiさんこんばんは。コメントありがとうございます。

早速ご活用いただいているようで嬉しいです。(私が作ってるわけではありませんが)
これからももっと頑張ります。[さむあっぷ]

#コメント通知が届いていなくて、気付くのが遅くなってしまいました。すみません。

| cie | 2006/01/07 12:42 AM |
こんにちは。
テンプレートを使わせていただいて依頼、ブログを拝見しています。(以前、カスタマイズがわからなくて教えていただきました)

今回のこの「lightbox.js」早速使わせていただきました。
いちいちウィンドウが変わることなく、すっきりしていいですね。

QRコードも、使わせていただきました。

いろいろと勉強になります。
これからも、cieさんのブログ、楽しみにしています![ぱちぱち]
| ai | 2006/01/05 4:14 PM |
コメントする









この記事のトラックバックURL
http://buena-suerte.jugem.jp/trackback/411
トラックバック