ブログテンプレート必須編集項目4 LightBox系

LightBox系を導入する場合はブログテンプレートのHTMLを編集する必要があります。

LightBox系とは、画像をモーダルウィンドウで表示するプラグインです。
サムネイル画像等をクリックするとその拡大画像がWeb上にレイヤー表示されるものといえば分かるでしょうか。

例:サンプル画像
sp125.jpg

ブログに導入する方法は元祖エボリアヌーメで紹介していますので、そちらをご覧ください。

元祖エボリアヌーメ「Lightbox2 導入方法
元祖エボリアヌーメ「Shadowbox を導入してみた

どちらも、導入する時はCSSとJavaScriptに記載の画像のファイルパスをFC2のファイルアップロード先のパスに書き換える必要があります。
また、FC2ブログのアップロード制限でファイル名に「.」ドットを含められないので、他の文字に置換するなどの修正が必要です。

関連ファイルをアップロードしたら、ブログテンプレートのHTML編集で <head>にCSSとJavaScriptを読み込む記述を加えます。詳しくは上記リンク先で確認してください。

今回はShadowboxを導入しました。

以下、追記部分に今回テンプレートに追加したコードを記載してます。


<!-- ▼ shadowbox head 開始 ▼ -->
<link rel="stylesheet" type="text/css" href="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shadowbox.css">
<script type="text/javascript" src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
  animate: "true", //表示するときのアニメーションの有無
  animateFade: "true", //表示する際フェイドさせるか否か
  initialHeight: 100, //relで高さを指定しない場合の最小の高さ
  initialWidth: 100, //relで幅を指定しない場合の最小の幅
  overlayColor: "#000", //背景の色の指定
  overlayOpacity: 0.8, //背景の透過度の設定
  showOverlay: "true", //背景の表示の有無
  handleOversize: "resize",  //コンテンツが大きい場合リサイズする "drag"に設定するリサイズせず、ドラッグ可能になる
  slideshowDelay: 0, //スライドを自動送りの時間、1で1秒 0だと自動送りしない
  continuous: "false", //ギャラリーをループできるようにするか否か
  counterLimit: 10, //カウントの限界値
  counterType: "default", //skipに設定すると枚数のカウントを別々にしてリンクできるようにする
  displayCounter: "true", //カウントの表示の有無
  displayNav: "true" //ナビゲーションの表示の有無
});
</script>
<!-- ▲ shadowbox head 終了 ▲ -->

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。