2006.04.18
写真（サムネイル画像）をクリックすると
画面上にうにょんと実寸サイズの写真を表示させるツールです。
動作確認の試しに↓をクリックしてみて下さいませ（Javaオフだと動作しません）
≫Lightbox JS v2.0シンプルな
Lightbox JS、画像拡大もできる
Lightbox Plusは
「一枚の画像をおしゃれに表示させたい」方にはうってつけのツールです。
Lightbox JS v2.0ですと複数の写真をスライドショーっぽく移動させることができます。
↓動作確認 表示された画像にマウスを合わせると、移動用ボタンが表示されます
■Lightbox JS v2.0の設置方法（sb/Serene Bach）
FC2ブログの方は
フォトログ・ツール Lightbox JS 2（アンチブログさま）をご参照くださいませ。
シンプルなLightbox JSの設置は
Lightbox JS で画像を表示する（小粋空間さま）にて詳しく紹介されております。
●ダウンロード
Lightbox JS v2.0公式サイト、左メニューDownloadからファイルをＤＬします。
●ファイルの書き換え、不要ファイル削除
画像の表示を安定させるために
jsフォルダ内のlightbox.jsの６２、６３行目の相対パスを絶対パスに書き換えます。
（サーバーへＵＰした際の絶対パスに書き換え）
【書き換え前】
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
↓
【書き換え後】
var fileLoadingImage = "http://▲▲/images/loading.gif";
var fileBottomNavCloseImage = "http://▲▲/images/closelabel.gif";
cssファイル内の画像相対パスも絶対パスに変更しておいたほうが無難かもしれません。
（当サイトでは行ってません）
imagesフォルダ内のサンプルイメージ（image-1とthumb-1）は不要なので削除しておきます
●アップロード
css、images、jsの各フォルダを
sb/Serene Bachのindex.htmlと同じディレクトリにアップロードします。
●テンプレートへの追記
<head>〜</head>部分に下記を追記します
<script type="text/javascript" src="{site_top}js/prototype.js"></script>
<script type="text/javascript" src="{site_top}js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="{site_top}js/lightbox.js"></script>
<link rel="stylesheet" href="{site_top}css/lightbox.css" type="text/css" media="screen" />
●表示の方法
画像ひとつだけ、ひとつづつのみLightboxで表示させたい場合
「
rel="lightbox" 」をリンクタグに追記します。
<a href="元の画像（Lightboxで表示させる画像）のURL" rel="lightbox" title="□□□"><img src="小さい画像（サムネイル）のURL" alt="" /></a>
□□□に記入した文がLightbox内で表示されます。
複数の画像をスライドショー的に表示させたい場合
「
rel="lightbox[▲▲▲]" 」をリンクタグに追記します。
<a href="画像１の元画像URL" rel="lightbox[▲▲▲]">画像１</a>
<a href="画像２の元画像URL" rel="lightbox[▲▲▲]">画像２</a>
<a href="画像３の元画像URL" rel="lightbox[▲▲▲]">画像３</a>
▲▲▲は統一した半角英数字で指定して下さい。
例えば下記の例では「okura」、上記の例では「sample」としてあります。
画像１
画像２
画像３
ハムスターブログに応援ありがとうございます
HOME >
sb・serene bach >
ツール・サイト > 「Lightbox JS v2.0の使い方と設置」
【TRACKBACK URL】
※トラックバックの際のお願い
【TRACKBACK】
|
|
●参考サイトHamster-Santa さん「Lightbox JS v2.0の使い方と設置」http://hamster-santa.info/log/eid676.htmlアンチブログ さん 「フォトログ・ツール Lightbox JS 2」http://anti.blog7.fc2.com/blog-entry-4
|
●**ひとりごつ。Vol.3.0** ---2007/08/17 12:49 AM
|
|
以下の記事にて、グラフィック関連、グラフ関連、カレンダー関連、エフェクト関連な...
|
●仕事の効率を上げる blog ---2007/08/06 09:02 AM
|
|
Lightbox2を実装してみました。画像をクリックしてみてください♪きちんと表示されているでしょうか？(^^;■ファイルのダウンロードはコチラからLightbox 2■設置方法の参考にさせていただいたサイトさんANTI BLOG:L
|
●雨の日が好き ---2007/06/03 09:17 AM
|
|
Lightbox2を使ってみました。サムネイルをクリックするとページ移動をせずに画像をポップアップ。複数の画像をグループ化し、アルバムの様に表示させる事も出来ます。「Lightbox JS v2.0の使い方と設置」(Hamster...
|
●!!Scarface!!新ぐっちのつぶやき ---2007/05/04 08:07 PM
|
|
このブログには写真も載せていこうとおもってるんですが、どうやったら綺麗に写真を表示できるか、悩んでいた今日この頃。そこらにある雑誌「Web creators ...
|
●まやメモ - ずぼら主夫の生活ノート - ---2007/02/02 11:47 AM
|
|
Lightbox JS v2.0を導入する。写真（サムネイル画像）をクリックする...
|
●双数姉妹HPリリースノート ---2007/01/25 11:24 AM
|
|
今まで「Lightbox Plus」を使用していたのですが、「Lightbox JS v2.0」が出ていることが調査の結果わかりました[舌出し顔]表示の仕方がスライドのようでかっこいいので、導入してみることにしました。導入の際に...
|
●Selbstgesprach 〜徒然日記〜 ---2006/12/27 10:10 PM
|
|
私もlightbox JS v2.0を導入してみました。上のサムネイル画像をクリックしてみてください（Javaオフだと動作しません）参考ブログHamster-Santa：Lightbox JS v2.0の使い方と設置アンチブログ：フォトログ・ツー
|
●HAPPY GO LUCKY ---2006/09/17 09:32 PM
|
|
lightbox JS v2.0を導入してみました。 下の画像をクリックしてみ...
|
●中年サラリーマンの日記 ---2006/09/02 10:45 PM
|
|
こないだ見かけたlightbox js V2.0とやらを導入。 クリックしてみる...
|
●14000.Rev Limit ---2006/07/18 09:00 PM
|
|
無事に当サイトのアーティストさんページに「Lightbox JS v2.02」を...
|
●カメログ ---2006/06/05 08:47 AM
|
|
設置をした直後に確認した時には背景画像（黒）が表示されていたのですが、次に見たときには画像類（写真以外）が消えていたのでもう一度「小粋空間」さんの『Lightbox JS で画像を表示する』を読み直して記事に紹...
|
●チョコレート ---2006/05/26 09:07 AM
|
|
*サムネール画像をクリックするとローディング画像が表示されて同一画面に元画像が表示される*複数枚できるのでスライドショーっぽくできる（...
|
●+ すくすく ぽんちゃん ＨａｐｐｙＤｉａｒｙ + ---2006/04/20 08:13 PM
こんばんは、落花生です[うぃんく]
日々、進歩を続けるさんたさんに脱帽です[拍手]
でも、うにょんと拡大されたかいとくんのお顔の可愛いこと[ぽっ]
テンテンがこんな表情を見せてくれるのはいつの日なのか・・[ぐすん]
| 落花生 | 2006/04/18 07:09 PM |
うぉーーー、でっかいのも可愛いっですよ、ちまちゃん。
いいなあ、こんな風にしてみたいよん。
でも、私のとこは…最近重たくなってメンテばかりの
ヤプたたずなヤプログなんで、無理じゃ〜。
まぶたんがオクラと格闘してる様子が…
私には巨大な昆虫と戦ってるように見えます。
オクラがちょうど昆虫の足のように…キャー！[わお]
|
basil | 2006/04/19 12:26 AM |
■落花生さん、ばんちゃ〜[うぃんく]
おほほほほ、全部お借りものでございますのよ[焦っ]
こういうのを開発して無料で提供してくれる方に感謝感謝でございます[ぐすん]
ごるでんさんはぶちゃ顔が得意ですので
こんな感じの写真はなかなか撮れないです[が〜ん]
私はぶちゃ顔の方が好きなんですが[けけけ]
テンちゃんはどうでしょう[きょろきょろ]
■basilさん、ばんちゃ〜[うぃんく]
ヤプさん、ちょっと前は大変なことになってましたものね[ぐすん]
ウチも以前JUGEMで痛い目に会ったのですが
こればっかりは中の人に頑張っていただくしかありませんよね・・
現在はだいぶ落ち着きましたよね[拍手]
サンプル写真を探していた時に
オクラの毛がいやにナマナマしく思えてこれにしちゃいました[けけけ]
色といい、毛の感じといい
確かに虫っぽい感じが[わお][が〜ん]
オクラ食べられまへんがなぁ〜〜[ぷんぷん]
|
sannta | 2006/04/19 12:49 AM |
はじめまして
v2.0を導入しようと思うのですがどうしても上手く出来ません
/css、/images、/jsのフォルダ3つを
sb/Serene Bachのindex.htmlと同じディレクトリにアップロードしたのですが
動いてくれません
|
ぽんママ | 2006/04/19 07:41 AM |
おはようさんでございます。(´･ω･｀)ショボーン
今朝、ふっと『アレ？キンクマのちまちゃん？』…
違うよ〜〜〜、かいとチャンじゃないか！
そうだよっ、オクラ怪獣とＫ―１してるのがちまチャンだ！
私としたことが…一番やってはならぬことをしてしまいました。
申し訳ありません！今回のこと何卒お許しくださいませ。
|
basil | 2006/04/19 09:56 AM |
ぽんママさん、初めまして[うぃんく]
以下は当方で導入中上手くポップアップできなかった際の事例です。
・ブラウザのJavaが切れることがあった
・HEAD内のタグの書き間違い
ブラウザは何をお使いでしょうか？
もし公式サイトもポップアップしないようでしたらブラウザ関連だと思われるのですが
公式やウチの分が表示されるのであれば、タグが原因だと思われます。
複数設置した際に
rel="lightbox" と rel="lightbox[▲▲▲]" を一緒に記述してしまって
動作しないこともありました。
index.htmlと同じディレクトリにＵＰしたのであれば
<script type="text/javascript" src="{site_top}js/prototype.js"></script>
や
<script type="text/javascript"
src="
http://hamster-santa.info/js/prototype.js"></script>
（↑ウチの場合です）
で動作できるはずなのですが・・
３つのフォルダの属性は「777」になっています。
何かご参考になれば幸いです。
|
sannta | 2006/04/20 09:37 AM |
basilさん、おはよ〜[うぃんく]
両方ともでっかい写真にしたから紛らわしいかったですね[焦っ]
オクラ怪獣のネバネバ攻撃にやられているのがちまきです[けけけ]
|
sannta | 2006/04/20 09:40 AM |
返信ありがとうございました
いろんな対策案を頂いたのですが
自己解決で無事設置できました
これで数枚の画像を1枚で表示ができて
記事内が長ったらしくならないので
とても感激しております
大変厚かましくTBさせていただきたいのですが
認証後とのことですのでよろしくおねがいいたします
|
ぽんママ | 2006/04/20 12:15 PM |
ぽんママさん、おはようございます[うぃんく]
表示されてよかったです[ばんざい]
私も設置にかなり苦心しましたが
原因が分かる度に「こんなことで」の繰り返しでした[焦っ]
こういったツールを開発してくださる方には
本当に感謝しております。
ありがたいですよね[ぽっ]
トラバありがとうございます[拍手]
|
sannta | 2006/04/21 10:23 AM |
はじめまして
ブログの写真 画像のサムネイルを探して 検索をけていましたら こちらにたどりつきました。
Lightbox JS をお借りしようと思いまして DLしましたら ページがみつかりませんと表示されてしまいました。
DLはもおできないのでしょうか？
良かったら教えてください。
どうしても このブログの写真をサムネイルにしたいのです。
よろしくお願いします。
|
瑞稀 | 2006/10/01 11:57 PM |
瑞稀さん、初めまして[うぃんく]
公式サイトが閲覧・DLできないのは一時的なサーバーダウンかもしれません[焦っ]
後日再度ご訪問なさってみてくださいませ。
お急ぎでしたら似たようなサムネイルツールにLightbox Plusがあります。
スライドショーはできませんが、同じ画面上に画像を表示させる奇麗なツールです[拍手]
↓私のHNにリンク張ってございます。
|
sannta | 2006/10/02 01:09 AM |
おはようございます[ばんざい]
今朝 DLできました。。ありがとうございます。
つけましたら またご報告にきます・・
|
瑞稀 | 2006/10/02 10:05 AM |
こんばんは
サーバーに飛ばせたのでが
小さい画面にならないのですが・・？
すべて htmlのフォルダの中に/css、/images、/jsのフォルダ3つをsb/Serene Bachのindex.htmlと同じディレクトリにアップロードしてみたのですが 新しい画面になってしまいます。どこか設定が悪いのでしょうか？
URLのところに飛ばしたところのリンクをはりつけてみました。
お手数お掛けして申し訳ございませんが
宜しくお願いします。
|
瑞稀 | 2006/10/02 11:15 PM |
こんばんは
何度もすいません。
こちらに書き込みをして もう一度クリックしたらでかすが・・小窓になるとき 新しい窓になるときがあります。
それは設定とかに関係があるのでしょうか？
|
瑞稀 | 2006/10/02 11:29 PM |
瑞稀さん、こんばんは[うぃんく]
やはり一時的なダウンだったようですね[拍手]
「小さい画面にならない」とは記事内のサムネイル画像のことでしょうか？
これはSerene Bachの画像アップロード時にサムネイルでアップしなくては
小さい画像は利用できません。
（自前で小さいサムネイル画像を用意してアップしてもいいのですが）
「新しい画面になってしまいます」とのことですが
ファイルパスが正確でないと常に別窓で開いてしまいます。
再度設定を見直してみてくださいませ。
「新しい窓になるときがあります。」とのことですが
私自身も時々そうなります[焦っ]
これはブラウザによるものかなとあきらめております[が〜ん]
（当方はLunascapeを利用しております）
URL先は「該当する記事がありません。」になりました[焦っ]
|
sannta | 2006/10/02 11:59 PM |
はじめまして。
Lightbox JS v2.0の導入方法を探していたら、貴サイトにたどり着きました。
とってもわかりやすい説明で簡単に導入できました。
TBも送りましたので、ぜひよろしくお願いいたします[音符]
|
どら♀どら | 2006/12/27 10:16 PM |
どら♀どらさん、こんにちは[うぃんく]
お役に立てて嬉しいです[ぽっ]
トラバありがとうございました。
|
sannta | 2006/12/29 12:23 PM |
はじめまして、夢をかなえる営業マンと申します。
lightboxの導入に参考にさせてらもいました。
また寄せてください＾＾
|
夢をかなえる営業マン | 2008/06/19 04:29 PM |
COMMENTS
RSS
