●スポンサーサイト
日記とWindows&Mac関連のオススメフリーソフトやオススメサービス・オススメ技術情報などをわかりやすく掲載しています。
TomomiX日記「TRASH」
http://blackcat13numbers.blog31.fc2.com/
ブックマーク登録や相互リンクは大歓迎ですのでご自由にどうぞ。その際はコメントいただければ幸いです。なるべく早めにご挨拶に伺います。
HOME > ARCHIVE > 2007年04月
最近の記事
日記とWindows&Mac関連のオススメフリーソフトやオススメサービス・オススメ技術情報などをわかりやすく掲載しています。
TomomiX日記「TRASH」
http://blackcat13numbers.blog31.fc2.com/
ブックマーク登録や相互リンクは大歓迎ですのでご自由にどうぞ。その際はコメントいただければ幸いです。なるべく早めにご挨拶に伺います。
2007年04月26日
●『Lightbox』
日記とWindows&Mac関連のオススメフリーソフトやオススメサービス・オススメ技術情報などをわかりやすく掲載しています。
TomomiX日記「TRASH」
http://blackcat13numbers.blog31.fc2.com/
ブックマーク登録や相互リンクは大歓迎ですのでご自由にどうぞ。その際はコメントいただければ幸いです。なるべく早めにご挨拶に伺います。
さて、本日は Blogやホームページに掲載したサムネイル画像をクリックした時に格好良くポップアップさせるツールを紹介したいと思います。これは、見た目重視の方向けで実装したら、かなり気に入るかと思いますよ♪
クリックして実寸画像を表示する時に、新しいウインドウを開くこともなく、現在のウインドウにオーバレイで表示してくれる仕組みで、当 Blogのサムネイル画像はすべて採用しているので、確認してみて格好良いと思ったら以下でダウンロードして評価してみてはいかがでしょう。FC2Blog上でのやり方は・・・
■設定手順上記の赤文字部分をご自身の環境に合った記述に変えてください。また、オレンジ色の「title="Test"」は、画像表示した際の下の余白に入れられる文字です。タグを入れなければ、デフォルトの空白になります。
- Lightboxのサイトへアクセス
- Downloadを選択
- 圧縮ファイルを解凍し、フォルダ内の全ファイル（css,js,images）を確認
- ダウンロードした lightbox.cssの修正（内容一部抜粋＆赤字を修正）
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/prev.gif) left 53% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/next.gif) right 53% no-repeat; }- ダウンロードした lightbox.jsの修正（内容一部抜粋＆赤字を修正）
// Configuration
//
var fileLoadingImage = "http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/loading.gif";
var fileBottomNavCloseImage = "http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/close.gif";
var borderSize = 10;- フォルダ内の全ファイル（css,js,images）をアップロード
- 以下のアップロードした css,jsファイルを<head>〜</head>タグ内にこのままコピペ
<script type="text/javascript" src="http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/prototype.js "></script>
<script type="text/javascript" src="http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/scriptaculous.js "></script>
<script type="text/javascript" src="http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/lightbox.js "></script>
<link rel="stylesheet" href="http://blog-imgs-23.fc2.com/g/i/n/gindamanjiro/lightbox.css " type="text/css" media="screen" /">
■掲載画像への適用方法
- 掲載したい画像をいつものようにアップロード
- 画像をアップロードして生成されたタグを以下のように編集
<a href="掲載したい画像のパス"target="_blank"rel="lightbox" title="Test"><img src="掲載したい画像のパス" alt="lightbox" border="0"></a><br clear="all">
かなり手順が複雑ですが、できた時の達成感はたまらなかったです。ご不明な点ありましたらコメント欄かメールにてご質問ください。でも FC2Blogでもフォルダ毎まとめてアップロードできる機能が欲しいと痛感しました。
| メイン |
