始めた当初からずっと背景をスライドショーにするというのをやってみたかったのですが、いかんせんフロント周りはサッパリわからないのでまったく手を付けていませんでした。

前書き


先日、Activityページを作成しまして、その際にjavascriptを少々触りました。(といっても出来合いのライブラリをちょろっといじくっただけですが…)これをきっかけに「自分でjavascriptを書けなくてもライブラリを組み合わせたらある程度なんでもできる」ってのが解り、思い立ってやることに。

やり方は非常に簡単でした。といってもちょっと詰まったんですけどね。

ちなみに、HexoはテーマによってejsというHTMLのテンプレート(という解釈であってるのか?)が異なります。そのため、この記事はテーマのtranquilpeak使ってる人はそのまま参考になりますが、それ以外の人はそのままこの記事の通りというわけにはいきません。といっても他のテーマでも大して変わらないでしょう。

この記事記載時点の私のtranquilpeakのバージョンはリリース前の1.10.0にカスタマイズを加えたものです。調べてないですが基本的にバージョンによる差はないと思います。

使うライブラリ


jquery-bgswitcherというライブラリを使用します。まず、このライブラリをダウンロードします。
ライブラリの基本的な使用方法はリンクの方を参照してください。

修正箇所


tranquilpeak/layout/_partial/cover.ejsを修正します。

まるまる下記のコードに差し替えます。
jQueryやbgswitcher.jsや画像のパスやオプションは各々の環境にあわせて変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- jQueryはtranquilpeakで使用されているのでmin.jsを指定するか -->
<!-- もしくはjQueryをダウンロードしてきて参照する。 -->
<script type="text/javascript" src="/assets/js/script.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.bgswitcher.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.cover').bgSwitcher({
images: ['/assets/images/covers/cover1.jpg'
,'/assets/images/covers/cover2.JPG'
,'/assets/images/covers/cover3.JPG'
,'/assets/images/covers/cover4.JPG'
,'/assets/images/covers/cover5.JPG'
,'/assets/images/covers/cover6.JPG'],
interval: 6000,
shuffle: "true",
effect: "fade",
duration: 3500
});
});
</script>

<div id="cover" class="cover"></div>

<!-- このコードはコメントアウトもしくは削除する必要がある。-->
<!-- <div id="cover" style="background-image:url('<%= coverImageUrl %>');"></div> --!>

もとのコードは基本的に残っていても構いませんが、最下部のコードは削除するかコメントアウトする必要があります。
また、前述の通りjQueryを参照する必要があります。jQueryはtranquilpeakで使用されているのでmin.jsを指定するか、それがダメな場合はjQueryをダウンロードしてきて参照します。

imagesにスライドショーにしたい画像をつらつらと書きます。

bgswitcher.jsの修正


これで、「やったーうごいたぜ!」なのですが…このままでは背景画像が縦スクロールに合わせてスクロールされてしまい、非常にダサくなります。なので、bgswitcher.jsに下記2行を追記します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* Setup background element
*/

_setupBackgroundElement: function() {
this.$bg = $(document.createElement('div'));
this.$bg.css({
position: 'absolute',
zIndex: (parseInt(this.$el.css('zIndex'), 10) || 0) - 1,
overflow: 'hidden'
});

this._copyBackgroundStyles();
this._adjustRectangle();

if (this.$el[0].tagName === 'BODY') {
this.$el.prepend(this.$bg);
} else {
this.$el.before(this.$bg);
this.$el.css('background', 'none');
}
/* 下記2行を足します。1行目はいらないかも */
this.$bg.css('background-size', 'cover');
this.$bg.css('position', 'fixed');
},

以上です。これで動きます。

ちなみに…

やってしまった後で再検証がめんどくさいので試してませんが たぶん、前述のtranquilpeak/layout/_partial/cover.ejs<div id="cover"...を下記のように書くだけで動く気がします。要するに下記のように記述すれば、bgswitcher.jsを変更しなくてもちゃんと動くかもしれません。やってないので断言できないですが。

1
<div id="cover" class="cover" style="position:fixed; ></div>