Shadowbox3.0.3
なぜ気に入っているかというと
第一が「グループ化しておけば、ポップアップしてから自動スライドギャラリー」設定が出来る。
２番目に「軽い」
三番は「シンプル」
って感じかな。
デモはこちら
では設置方法のご説明
まずはここからjsをダウンロード
ソースのショートを避けたいから、とりあえず「Bass」でいいかと。
私の場合は「jQuery派」なんで「jQuery」ですが
よくわからない人は「Bass」。
つぎにチェックマーク
これはポップアップしたい目的にあわせ選ぶんですが
ここもよくわからない人は「全てにチェック」
あと日本サイトの場合は「Japanese」を選択。
「Zip形式」でダウンロードして解凍。
次にHtmlの作成。
HEADタグに
<link type="text/css" href=
class="str">"css/shadowbox.css" rel="stylesheet"
media="all" />
<script type="text/javascript" src=
class="str">"js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
※「href="●●"」や「src="●●"」は自分が保存した場所を指定
あとは、ポップアップしたい箇所の「relにshadowbox」と入れるだけです。
簡単ですね。
画像ポップアップの場合は
<a href="●●.jpg" rel="shadowbox" title="タイトル"><img src="●●.jpg" /></a>
複数画像でギャラリー化する場合は
rel="shadowbox" のところでrel="shadowbox[グループ名]"あとはオプション設定ですが、
私の場合は、今回実施したかったオプションは２点
●ポップアップしたスライドを自動ギャラリー再生
●youtubeをそのままポップアップ
「ポップアップしたスライドを自動ギャラリー再生」
これは、head内に記載した
<script type="text/javascript">
Shadowbox.init();
</script>
の部分にオプション記載。
オプション設定はいろいろあるけど、この場合は
slideshowDelay: 3, //スライドを自動送りの時間、1で１秒 0だと自動送りしない
continuous: true, //ギャラリーをループできるようにするか否か
「youtubeをそのままポップアップ」
これは、オプション設定では無く、リンクタグを
<a rel="shadowbox;width=650;height=400;player=iframe" href="http://www.youtube.com/embed/qe6zourqnaE">
width、heightはポップアップしたいサイズに。
結局はiframeなんで、別ページや外部サイトを呼ぶのも同じタグ。
注意点は、youtubeのアドレスは「埋込コード」のsrc部分ということ。
参考までにその他のオプション設定は
animate:true //表示するのアニメーションの有無
animateFade: true //表示する際フェイドさせるか否か
initialHeight: 160 //relで高さを指定しない場合の最小の高さ
initialWidth: 320 //relで幅を指定しない場合の最小の幅
overlayColor: "#000" //背景の色の指定
overlayOpacity: 0.5 //背景の透過度の設定
showOverlay: true //背景の表示の有無
modal:false //trueに設定すると、boxを表示させた時に背景をクリックしてもboxが閉じない
handleOversize: "resize" //コンテンツが大きい場合リサイズする "drag"に設定するリサイズせず、ドラッグ可能になる
counterLimit: 10 //カウントの限界値
counterType: default //skipに設定すると枚数のカウントを別々にしてリンクできるようにする
displayCounter: true //カウントの表示の有無
displayNav: true //ナビゲーションの表示の有無
追記
ちなみに、サンプルページのオプション設定はこんな感じ
<script type="text/javascript">
Shadowbox.init({
overlayOpacity: 0.8,
slideshowDelay: 5,
continuous: true,
language: "en",
animateFade: true,
});
</script>