上へ戻る

[コピペでOK]Backstretchのスライドショーで手動切替のボタンつけてみた。

Pocket

背景の全画面表示で使えるjQuery「Backstretch」。

これコードいれて、画像を指定すればフルスクリーン表示できるライブラリなのですが、他にもスライドショーにもできます。

関連記事:デモ。

ただ初期の設定だと自動で写真がきりかわりはするものの、手動での切り替えボタンがありません。

ということで今回は「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の記事を参考に手動の切り替えボタンを作ってみました。
切り替えボタンの画像いらずなので、コピペで実装することができます。


解説はいらない!コピペでとりあえず使いたい人はこっち



細かな解説なしでとりあえずコピペで使いたい!という人はこちら。
Backstretchのライブラリファイルは公式サイトからダウンロードして「jquery.backstretch.min.js」というファイルのみを使用します。


1.スライドを表示させたいところに下記のコードを挿入。




2.の前に下記を挿入。






3.CSSを挿入。
(min-heightは大きさに応じて変えてください。)
#top_gallery{
width: auto;
min-height: 600px;
}
.textcenter{
text-align: center;
}
.liinlineblock li {
display: inline-block;
cursor: pointer;
}


どうでしょうか。
手動でも切り替えられるBackstretchがサイトに組み込めらたのではないかと思います。




解説見たい!Backstretchのスライドを手動で切り替える方法。


ここからは上のコードを対象に解説していきます。
とても簡単なので、読んでもらえればすっとわかってもらえるかと。

まずは1番目の項目ですが#top_galleryをおいて表示する場所の指定と、高さを指定しています。
この高さを指定しておくことで大きさを決めることができ、なおかつ全画面表示に持っていくことができます。

li要素はそれぞれにid名を振り分けましたがセレクタ使ってももちろん良し。
横並びにするためにfloatではなくinline-blockを使いましたが、よく考えるとinlineでもOKです。



2番目のjsの項目はまずjqueryを読み込んで、次にBackstretchを公式サイトからダウンロードしてサーバーにでも上げて読み込みます。
重要なのは、手動切替にするための

$("#click3").click(function (e) {
e.preventDefault();
$("#top_gallery").backstretch("三枚目の画像URL");
});

の部分。
これはliに振り分けられたidの内容をクリックすると、そこで紐付いた画像を表示させるよー。といったものです。


最後3番目の項目はCSSですね。
勝手に自分がいつも使っている名前でやりましたが、すでにサイトで同様のCSSを設定している場合はそちらに変えてもOK。

基本、jQueryとライブラリ読み込んで、コード配置すればどんなサイト(レスポンシブもいける!)でも使えるのでぜひ使ってみてください。

最新投稿された記事はいかがですか?

1987年2月生まれ、滋賀県湖南市育ち、現在湖南市の三雲駅から徒歩20分超の場所でコワーキングスペース「今プラス」の管理人をしております。
続きを読む