「CrossSlide」写真や画像をかっこよくスライド表示

写真をスタイリッシュにスライドショー

私はコンテンツを作るのは得意ですが、トップページがどうも苦手で…。
「まとめてゲーム」を作る際、トップページに何か華が欲しいと考えていました。

そこで思いついたのはサイトの要点を説明する、ちょっとしたムービーですね。
華やかなだけでなく、サイトを訪問者に知ってもらうこともできますので。

セオリーで言えばFlashを使用したいところです。
ただ一応使用経験はありましたが、もう５年ほど前の話です。

…完全に忘れてますね。(笑)

仕方ないので、何か簡単に実現できる方法が無いか？と探していたところ、jQueryのプラグインとして動作する「CrossSlide」というものを見つけました。

元々の用途はフェードを基本とした写真のスライドショーですが、使い方によってはFlashで作るような簡易的なムービーもどきも作れます。(笑)

CrossSlideのメリットと機能

とても簡単です。
これに尽きますね。(笑)

写真画像を用意して、ちょこちょこっと設定を書くだけで使えます。
実行確認もブラウザで表示するだけですし、修正後も再読み込みですぐ適用。

もちろん、追加や削除も設定の書かれたHTMLもしくはjsファイルを書き換えるだけですので、お手軽で簡単です。

機能としては、写真間の切り替えが必ずフェードイン・フェードアウトになること(切替え間隔は設定可能)と、写真の拡大縮小や移動が設定できます。

これらを上手く組み合わせれば、なかなか良いものが作れるようになります。

作例としてはまとめてゲームのトップページに使用していますので、そちらを見てください。

jQueryを用意する

CrossSlideはjQueryのプラグインであるため、jQuery本体が必要となります。

そこでjQueryの配布元である「jQuery: The Write Less, Do More, JavaScript Library」へ行き、トップページにある「↓Download(jQuery);」ボタンからダウンロードします。

…と言いたいところですが。

天下のgoogle様が共通利用できるライブラリとして提供しているので、それを利用した方が便利です。

使用するページのheadタグの間に、下記コードを追加するだけでOKです。

これでgoogleのサーバ上からjQueryを読み込みますので、若干ですがサーバの転送量を減らせます。

また、赤字で示した「1」の部分はjQueryのバージョンです。
例のように単なる１と書いた場合には、バージョン１の最新リビジョンのjQueryが読み込まれますので、細かいリビジョンアップが行われても都度修正する必要がありません。

逆に「1.5.2」と、リビジョンまで決め打ちした記述も可能です。

CrossSlideの準備をする

CrossSlideの配布元である「CrossSlide」へ行き、

CrossSlideをダウンロード

「Download minified」をクリックして、CrossSlideの本体をダウロードします。
ブラウザによってはダウンロードされずに、ソースがそのまま表示されるだけの場合があるので、その場合はリンクを右クリックして「名前を付けてリンク先を保存」や「対象をファイルに保存」でダウンロードします。

CrossSlideのjsファイルは、URLでアクセスできるのであれば、格納場所はどこでもかまいません。
ご自身の設置ルールに従って設置してOKです。

CrossSlideを適用する

CrossSlideはJavaScriptですので、使用するページのheadタグの間に、下記コードを追加します。
先ほど追加した、jQueryの下に記述すれば良いでしょう。

これで準備はOKです。
続いて設定に入ります。

単純なスライドショーとして使う(初級)

CrossSlideの一番簡単な使い方です。
まずは表示したい場所に下記コードを入れます。

続いて設定部分を入れます。
設定はJavaScriptで行い、記述場所はbodyタグの間にあればどこでも構いません。

赤字の部分は、CrossSlideに表示場所を教えています。
つまり前述したdivタグのid値(赤字部分)と、同じ文字列を入れるのです。

「sleep」では、画像の切り替え時間(フェードが始まるまでの時間で単位は秒)を指定します。
数字部分を大きくすれば、切り替えまでの時間が長くなります。

「fade」では、フェードに要する時間(単位は秒)を指定します。
数字部分を大きくすれば、フェードに要する時間が長くなる、つまりユックリとフェードするようになります。

「 { src: 'image1.jpg' }」の部分は、表示する画像の場所と名前を指定します。
上記の例では３つの画像ですが、「,(カンマ)」区切りで追加することで、いくつでも画像が増やせます。

動きのあるスライドショーとして使う(中級)

CrossSlideを、ちょっと動きのあるスライドショーとして使う場合の設定です。

赤字部分の「dir」を指定することで、画像を動かす(スクロールさせる)ことができます。
指定できるのは「up」、「down」、「left」、「right」の４つとなり、指定した方向に動きながら表示されるようになります。

ただしdivのサイズと画像サイズが一緒の場合、当然ですが全くスクロールしません。(笑)

「speed」では、画像の移動スピード(１秒間で移動するピクセル数)を指定します。
数字部分を大きくすれば、画像の移動スピードが速くなります。

簡易ムービーとして使う(上級)

CrossSlideに、もう少し複雑な動きを与える場合の設定です。

「from」は画像表示の開始位置、「to」は画像表示の終了位置を示します。
１つ１つパラメータを説明すると、１つ目が縦方向の位置、２つ目が横方向の位置、３つ目が画像の拡大率です。

上記の設定でimage1.jpgはどう動くかというと、「画像は絶えず真ん中を維持しつつ、６倍のサイズから０．５倍のサイズまで縮小されながら表示される」です。
単純に言うと、「手前から奥に向かって画像が移動する」ような立体的な動作を再現しています。

image2.jpgは「画像が右から左へ移動する」です。

image3.jpgは「画像が拡大しながら左上に向かって移動する」になります。

あとは「time」ですが、指定した画像の表示時間です。
数字部分を大きくすれば、エフェクトの動作がユックリになります。

sleepやspeedと違い、画像毎に指定できるので、こちらの方が便利ですね。

ちょっとややこしいですので、実際試してもらうのが一番だと思います。

スライドショーの再生回数を１回にする

今までの例を実行しますと、CrossSlideは無限ループとなり、スライドショーを永遠に再生し続けます。
流す内容によっては「一通り再生したら止めたい」というニーズもあると思いますので、CrossSlideの再生回数を指定する場合の設定です。

赤字部分の「loop」パラメータを指定するだけでOKです。
数字部分が再生回数となり、１回だけでスライドショーを止める場合は「１」とします。

パラメータを追加する際は「,」で区切る必要がありますので、「fade: 1」の後に「,」が付いていることに注意してください。

以上、CrossSlideの使い方でした。

Tweet
カテゴリー	：	便利ツールやサイト
キーワード	：	jQuery,JavaScript,CrossSlide,スライドショー

はね丸さん、こんにちは・・・CrossSlideの動き、素敵ですね・・・
http://mizee.org/ に簡単なスライドショーと簡易ムービーの二つを使いたいと思っています。
ひととおり画像がまわった後、停止させるにはどういった記述をすればいいのでしょうか・・・
おひまなときにでも教えていただけないでしょうか、よろしくお願いいたします。

tamami　2011-09-13 12:24:23

tamamiさん、こんにちは。
CrossSlideは簡単な割には良い動きをしますので、私もお気に入りです。(笑)

さて質問の再生回数ですが、「loop」というパラメータを使用します。
具体的な使用方法は上の記事に追記しましたので、そちらを参照してみてください。
たぶんこれで目的の動作になるはずです。

はね丸　2011-09-13 12:56:34

＞image2.jpgは「画像が右から左へ移動する」です。
が
＞from: top left 1.0x,
＞to: top right 1.0x,
なのはなぜですか？
左から右なのではないのでしょうか。

しん　2012-07-07 06:59:17

画像がスクロールする都合上、表示部分より画像サイズの方が大きい、ことがまず前提になります。

「from: top left 1.0x」の指定は「画像の左上が表示部分に表示されている」ことを示します。
ということは、画像の左上と表示部分の左上が重なるようになり、画像の右側ははみ出したようになっています。
つまりスタート時の画像は、右に寄った状態で表示されています。

「to: top right 1.0x」の指定は「画像の右上が表示部分に表示されている」ことを示します。
ということは、画像の右上と表示部分の右上が重なるようになり、画像の左側ははみ出したようになっています。
つまり終了時の画像は、左に寄った状態で表示されています。

この遷移を瞬間移動ではなくスクロールの形で見た場合、画像が右から左へ移動したように見えるわけです。
言葉ではちょっと説明し難いのですが、実際にパラメータを設定して動作確認をしますと、そのように動いているのがわかると思います。

はね丸　2012-07-07 13:10:47

こんにちはo(^▽^o)〃
写真のスライドで困っていたところここにたどりつきました。
教えていただけますか？
下記はWindowは対応していないのでしょうか？？？

jQueryの配布元である「jQuery: The Write Less, Do More, JavaScript Library」へ行き、トップページにある

Hakkey　2012-12-22 10:37:09

Hakkeyさん、こんにちは。
どのような状況を指してWindowは対応していないと判断されたのか書かれていませんので、想像で回答します。

おそらくダウンロードを押した際、ダウンロードが開始されずに画面に文字列が表示される…だと仮定して答えますと、それはOSの違いではなく、ブラウザに依存しているものと思われます。

私の環境ではIEですとダウンロードのダイアログが表示されますが、FirefoxやGoogle Chromeではソースが画面表示されてしまいました。
jQueryサイトのダウンロード方式に難があるのかもしれません。
回避策としましては、IEでダウロードを実行するか、画面に表示された文字列を全てメモ帳などのテキストエディタにコピペし、「jquery-1.8.3.min.js」というファイル名で保存してください。

もし質問の意図が違いましたら、またコメントください。

はね丸　2012-12-22 13:36:04

はね丸様
はじめまして。

素敵なスライドショーのご紹介ありがとうございます。是非設置したいと思って、やってみたのですが、画像が全く表示されません。Windows 7, IE9とFirefox19.0で試しています。

1.jpg
1.jpg
1.jpg
index.html
jquery.cross-slide.min.js
は全て同じフォルダにそのまま入れています。

index.htmlの記載は下記の通りです。大変お手数をおかけして申し訳ないのですが、教えていただければ有難いです。どうぞ宜しくお願い致します。

<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.min.js"></script>
</head>

<body bgcolor="#FFFFFF">

<div id="slidedisp"></div>

<p>
<script type="text/javascript">
$('#slidedisp').crossSlide({
sleep: 2,
fade: 1
},[
{ src: '1.jpg' },
{ src: '2.jpg' },
{ src: '3.jpg' }
]);
</script>
</p>

</body>
</html>

さいとう　2013-03-02 02:02:03

はじめまして、さいとうさん。
当ブログに訪問いただき、ありがとうございます。

さてご質問の回答ですが、表示場所であるdivにサイズ指定がありませんので、それでサイズが1px×1pxとなってしまい、目に見えないのではないでしょうか？

<div id="slidedisp"></div>に対してCSSで横と縦のサイズを指定するか、<div id="slidedisp" style="width:100px;height:100px;"></div>と直接書くことで見えるようになると思います。

はね丸　2013-03-04 23:18:45

はね丸さん

早速お教えいただきありがとうございます。

まさにそのご指摘通りでした。
大きさを指定しましたらすぐ表示されました。
早速サイトに掲載できます。いろんな所に
使えますのでとても便利ですね。

ありがとうございました。
また宜しくお願い致します。

さいとう　2013-03-05 08:36:40

こんにちは、さいとうさん。
はね丸です。

お役に立てたようで良かったです。
サイト作成、頑張ってください。

今後もよろしくお願いします。

はね丸　2013-03-05 16:59:20

はね丸様

お陰さまでとりあえず設置できて、見栄えががらっと変わり
いい雰囲気のサイトになりました。ありがとうございました。

中級に進んで動きを入れてみましたら、どういうわけかまた動かなくなりました。下のindex.htmlファイルの状態ですと、初級のスライドショーだけで、画像に動きはありません。2.jpg以外は動きを記載しているのにです。

sleep: 2, のところを　speed: 45,に変更しましたら
画像が表示されなくなってしまいましたので、元に戻しました。

大変申し訳ありませんが、教えていただければ助かります。

<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.min.js"></script>
</head>

<body bgcolor="#FFFFFF">
<table width="800" align="center" height="122">
<tr>
<td>
<div id="slidedisp" style="width:800px;height:300px;"></div>
<p>
<script type="text/javascript">
$('#slidedisp').crossSlide({
sleep: 2,
fade: 1
},[

{ src: '1.jpg',
from: 'center center 6.0x',
to: 'center center 0.5x',
time: 1.0 },

{ src: '2.jpg'},
{ src: '3.jpg', dir: 'left' },
{ src: '4.jpg', dir: 'up' },
{ src: '5.jpg', dir: 'right' },
{ src: '6.jpg', dir: 'up' },
{ src: '7.jpg', dir: 'up' },
{ src: '8.jpg', dir: 'right' }
]);
</script>
</p>
</td>
</tr>
</table>
</body>
</html>

さいとう　2013-03-05 21:29:55

こんばんは、はね丸です。
忙しくて遅くなりました。

大した実験もしていないので推測ですが、おそらく記述のし方が混じっているのが原因だと思います。
1.jpgが上級の定義、2.jpgが初級の定義、他が中級で説明した定義になっています。
全ての画像を統一した定義にすれば直ります。

今回の場合、1つでも上級が混じっていますので、全て上級の書き方に統一することになります。

はね丸　2013-03-10 21:10:27

はね丸様

大変お忙しい中アドバイスいただきありがとうございました。

上級編がお陰さまで動くようになりました。
こんな簡単な設置で、、、感動です。

ありがとうございました。
また宜しくお願いいたします。

さいとう　2013-03-18 00:28:00

追伸

中級編も動くようになりました。
ありがとうございました。

さいとう　2013-03-18 00:34:54

こんばんは、さいとうさん。

無事動いたようで良かったです。
着実に前進されているようで、とても素晴らしいです。

「CrossSlide」はシンプルな割に見た目のインパクトがありますので、アイデア次第でいろいろなサイトに使えると思います。
是非、有効活用してください。

今後もよろしくお願いします。

はね丸　2013-03-18 01:45:39

はね丸様

何度もご指導ありがとうございます。

上級編の完成したのを中央で表示させようといろいろ試みたのですが、どうしても左端にしか表示されないのですが、何が問題なのでしょうか。

テーブルに入れても、サーバーにアップしても、左端にしか表示されないのが不思議です。

通常のhtmlではない書き方が必要なのでしょうか。

恐れ入りますが、宜しくお願い致します。

<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.min.js"></script>
</head>

<body bgcolor="#000000">
<div id="slidedisp" style="width:800px;height:300px;"></div>

<p align="center">
<script type="text/javascript">
$('#slidedisp').crossSlide({
fade: 1
},[

{ src: '1.jpg',
from: 'center center 1.5x',
to: 'center center 0.8x',
time: 4.0 },

中略

{ src: '14.jpg',
from: 'center left 1.0x',
to: 'bottom right 1.0x',
time: 4.0 }

]);

</script>
</p>
<p>　</p>
</body>
</html>

さいとう　2013-03-28 18:49:37

無事解決しましたので、ご返事不要です。

お騒がせしました。
また宜しくお願い致します。

さいとう　2013-04-01 19:47:32

こんばんは、さいとうさん。
対応ができなくてすみませんでした。
先週末後半に、ちょっと本業が立て込んでいましたので…。

自己解決できて良かったです。
今後もよろしくお願いします。

はね丸　2013-04-01 20:06:23

はね丸様
はじめまして。
Jqueryは私たちwebデザイナーにとって必須ですね。とくにCrossSlideは表現の幅が広がって助かります。
さてご教授いただきたいのですが、
はね丸様ご指導の「初級」は問題なく動くのですが、なぜか上下のスクロールを指定してみても動きは「初級」のままなのです。
コンテナサイズは画像よりも縦横小さくしてあります。まったく表示されないのであれば指定が間違っていることも考えられますが、動きが「初級」のままというのがどうしてなのかわかりません。下記にソースを書きますので、どうかご指導をお願いいたします。
ちなみに、sleepとfadeの数値をいろいろと変えてみましたが変化はありませんでした・・。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title>
<style type="text/css">
#test1 {
　 width: 500px;
height: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.cross-slide.js" type="text/javascript"></script>
<script type='text/javascript'>

$(function() {
$('#test1').crossSlide({
sleep: 40,
fade: 1
}, [
{ src: 'jpg/1.jpg', dir: 'up' },
{ src: 'jpg/2.jpg', dir: 'down' },
{ src: 'jpg/3.jpg', dir: 'up' }
]);
});
</script>

</head>
<body>
<div id="test1">Loading…</div>
</body>
</html>

ユウ　2013-07-03 18:18:11

こんにちは、ユウさん。

問い合わせの件ですが、本文でもわかりやすいように赤字で示しておりますが、中級編は「sleep」ではなく「speed」になります。
似たようなスペルですので間違えやすいのですが、sleepをspeedに変えてみてください。
意図した動作をすると思います。

はね丸　2013-07-03 18:41:59

はね丸さま。
早速のご指導をありがとうございました。
スペル･･･気がつきませんでした(⌒_⌒;
ご指摘のとおり変更しました。
無事に動き出しました。
ありがとうございました。
またお願いいたします。

ユウ　2013-07-03 19:58:21

コメントを記入する

コメントを受け付けました。
コメントは管理人の承認後、表示されます。

はね丸

　お問い合わせ

普通の会社員をしながら、趣味でWEB製作をしています。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。

こんな私ですが、今後もよろしくお願いします。

育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと

@hanemaru_comをフォロー

はね丸のWEB工房メニュー