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

背景の全画面表示で使える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分超の場所でコワーキングスペース「今プラス」の管理人をしております。
→続きを読む

カテゴリー