トップ > ブログ運営 > ColorboxとFlexslider2設置メモ

ColorboxとFlexslider2設置メモ

ブログ運営 ブログ運営-Wordpress/CSSほか

会社のサイトへ使用

どちらもちょっとしたモノに使用。

会社の誰もHTMLとか知らないからしかたなく私がいじっている。 ちなみに会社PC環境はWin7でブラウザはFirefox 会社のレンタルサーバーはさくら。

Colorbox - a jQuery lightbox

いちいち画像が別窓で開くのがウザイから画像をポップアップにしようと。 Boxer?とかあったけど枠がシンプルでかわいいしColorboxにしました。

参考：Lightbox風のjQueryプラグインColorBoxの使い方 | bl6.jp 簡単なColorboxの設定方法 | Jquery

ダウンロードして設置ページにcolorboxフォルダを作り jsonファイル2種類とjsファイル（私はjquery.colorbox.js使用）を置いて サンプル1を使いたいので example1のフォルダのimagesフォルダとcolorbox.cssをcolorboxフォルダにコピー

jQueryの1行を挿入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

全部をグループにしたくないので設置場所が違うものはgroup2を後から追加した。 サンプルはオプション？がつらつら書いてあるけど要らないので最低限だけ。

<link rel="stylesheet" type="text/css" href="./colorbox/colorbox.css" />
<script src="./colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group1").colorbox({
rel:'group1'
});
$(".group2").colorbox({
rel:'group2'
});

});
</script>

 

動画も

<script>
$(document).ready(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:425,
innerHeight:344
});
});
</script>

 

画像のタグにclass="group1"を挿入 同じグループで指定したものは同じボックスで表示されると。

タイトルは表示されないようにいじったがどこをいじったか覚えてない。タイトル入れてないだけかと思ったが入れても出ないからたぶん何かした。 動画は <a href="http://www.youtube.com/embed/hogehoge" class="youtube">動画</a> っていう感じで。テキストなのは単純にページの中にモロ動画の箱があるのがなんか嫌だから。

 

Flexslider2

トップページの画像をスライドショーにせよという命令。 動画でやる案が出たが、差し替えの楽なこういうモノで対応。

このjQueryの利点はオプションが色々あって 後からあーせーこーせー言われても対応できる点

ダウンロード（2.2.2）して解凍 設置ページにフォルダを作る 表示する画像を用意する flexslider.cssとjquery.flexslider.jsを入れる ※今回はflexslider-min.jsの方を使用 fontsフォルダをcssファイルと同じフォルダに入れる 入れないと001みたいな□が出ます。画像を使いたい場合はflexslider.cssを編集する。 設置タグはサンプルの通り設置

参考： jQuery flexslider2 DEMO | らうんじ flexslider-Jqueryスライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点

オプションこんな感じ

animation:"fade",
pauseOnAction: true,
pauseOnHover: true,
touch: true,
slideshow:true,
randomize: false,
startAt: 7,
animationSpeed: 1000,
slideshowSpeed: 6000

スライドの動きの方が好きだけどフェードの方が動画っぽさが出るので スライドスピードをちょっと遅くしてより動画っぽく。 ただ、最初ランダムにしてたけど7枚目から開始してほしいのと成立しない（ランダムの7枚目から始まってしまう） 7枚目がトップっぽいからそうしてみたけどランダムのほうがよさげ 20枚くらい画像があるからサンプルのようなサムネイルが無いとわかんねーと思ったり

キャプションあるものは画像タグのすぐ後ろに追加 <p class="flex-caption">キャプション</p>

デフォルトの状態だと下の白い空白部に挿入されるので flexslider.cssに追加　参考：レスポンシブなコンテンツスライダーのjQueryプラグイン-FLEXSLIDER | memocarilog

.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4&gt; C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px; line-height: 16px; text-align:left;}

 

ところがXP/IE8のパソコンで見ると超崩れてて動作してないに等しい状態に（具体的にはすべての画像が上から順に並んでいてちらつきながら表示されている） IE8だとエラーが出ているようだが原因がつかめない

とりあえず文字コードがShift_JISになってるからUTF-8へ修正 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">に直して UTF-8のBOM無しで保存

エディタはMeryを使っています

するとIE8でもちゃんと表示された。左右のNext ボタンの動きがあやしいし色も違うんだけどいちいち対応しきれんし無視

IE10のツール＞開発者ツールでも確認 XPでも確認

最初設置した時jQueryが1.10.2だったら動かないので色々変えてみるが、変えると今度はColorboxが動かなくなったので http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js に変えたとこどちらも問題なく動作していたが 上記のUTF-8に変えたら1.10.2でも問題なく動作したので戻した。

ついでにLunalysも設置

前自分で使ってたPHPのなんたらアナライザーって名前が思い出せずこちらを設置。 軽くて見えやすい。社内PCからのアクセスをカウントしたくないんだけど拒否設定が見つからない。 Nexus7でサイトアクセスしてみたら、きちんと解析されていた。 アクセスなんて微量なんだけど中にXP/IE6ユーザーがいてクラっときてしまった。 大多数がクロームかスマホだからIE8以下は無視すると決めた ただの事務員なのに古いIEでの表示のことまで考えられるかい！