Tag : ブログカスタマイズ  Category : Diary  Date : 2011.07.05  Edit

ブログやホームページの写真や動画を拡大表示できるスクリプト。ページをカッコ良く飾るにはいいかもしれない。Seesaaでの設置方法を書いてみる。

*追記(2013/02/06)
Youtubeのパラメータ変更 Shadowboxも書き換えを(詳しくはコチラでも)
&hd=1 から &vq=hd720 にパラメータが変更されているので書き換える。(解像度数値


2011070403.jpg2011070403.jpg
*画像をクリック (左:Shadowbox適用, 右:Shadowbox無し)

Shadowbox.js
http://www.shadowbox-js.com/index.html
ページ内の Examples の写真をクリック。いろいろ対応しているのが分かる。

Shadowbox.js Download
http://www.shadowbox-js.com/download.html

ダウンロードページ
簡単に単体起動するなら Base (standalone) を選択。分かる人は Prototype,jQuery でも。対応させたい形式は、とりあえず全部にチェックでいい。言語は日本語で。ZIP絵をクリックでダウンロード。

設置1
拡張子が png gif swf css js のファイル(10個程あるが足しても150KB)をSeesaaのサーバーにアップロード。css と js ファイルの、アップロード後のフルパス(アドレス)をメモ。


設置2
ブログ編集ページ→デザイン→HTML を開く。バックアップ推奨。headタグ内に下記ソースを追加。


<head>
〜〜〜〜
〜〜〜〜

<link rel="stylesheet" type="text/css" href="CSSのフルパス.css">
<script type="text/javascript" src="JSのフルパス.js" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
Shadowbox.init({
overlayOpacity: 0.75,
fadeDuration: 0.5,
resizeDuration: 0.5,
initialWidth: 320,
initialHeight: 195,
language: 'ja',
});
</script>

</head>

overlayOpacity 黒背景の濃度 0.00〜1.00
fadeDuration: 暗くなるエフェクトの時間 秒
resizeDuration: 拡大エフェクトの時間 秒
initialWidth: 拡大前サムネイルサイズ 横幅 px (適当
initialHeight: 〃 縦幅 px (適当
いろいろ数字を変えて、自分好みに変更を。


設置3(画像ファイルへの設置)
画像ファイルリンクにコードを追加。*ここは毎回追加の必要あり。Seesaaのサムネイル簡易貼り付けコードの、1行目 a の後あたりに rel="shadowbox" を追加。

<a rel="shadowbox" href="画像ファイル.jpg" target="_blank"><img src="画像ファイル.jpg" width="32
0" height="200" border="0" align="" alt="画像ファイル.jpg" /></a>



設置4(Youtubeファイルへの設置)
Youtubeリンクにコードを追加。*ここは毎回追加の必要あり。Youtubeの画像自体へのリンクに rel="shadowbox;width=1280;height=760;player=swf" を追加。
<a href="http://www.youtube.com/v/●Youtube動画コード●?
version=3&hl=ja_JP&rel=0&hd=1&autoplay=1"
rel="shadowbox;width=1280;height=760;player=swf"
title="●表示される文字●">●文字かリンク画像●"</a>
ここでの width と height は拡大後の数値を入れる、HD画質なら width1280 height760 以上がオススメ。

設置例
文字クリック→ ●文字かリンク画像●

画像クリック→ 

コメント (2) トラックバック (0)
Comments
たかし
lightbox2とShadowboxは共存できないのでしょうか?
2個記述すると画像を選択した時に2回表示されます。
2013/03/29 00:06

村雨一馬
lightboxは使ったことがないのですが、 relの値を個別に使うしかないようですね;。

rel="shadowbox" rel="lightbox"
2013/03/29 01:23

Comment Form
名前:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。