2011 Jun 22

よく会社のウェブサイトなんかにアクセスすると、イメージ画像のスライドショーをよく見ますよねー(・ω・)

仕事の方でもよくFLASHで表現していたのですけど、準備に時間がかかってしまうので、ちょっと見直してみようーってことで、Ajaxで良いものないかな〜とグーグル先生に相談してみたらなかなか良さそうなJQueryプラグインを発見したので、自分のメモがてらにカキカキ。

JQueryプラグインはこちらを利用させていただきました(・ω・)ノ


(1)『jquery.cross-slide.min.js』ダウンロード

上記CrossSlideサイトのページ上部の「Download minified」部分より『jquery.cross-slide.min.js』をダウンロードします。

(2)『jquery.cross-slide.min.js』をの任意のフォルダに設置・呼び出し(今回は、jsフォルダ)

HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す
※jQueryのダウンロードはこちらから

<head>
<script type="text/JavaScript" src="ドメイン名/js/jquery-1.6.min.js"></script>
<script src="ドメイン名/js/jquery.cross-slide.min.js" type="text/javascript"></script>
</head>

(3)スライドショーを表示する場所に呼び出しコードを貼りつけ

<script type="text/javascript">
$(function() {
$('#mainVisual').crossSlide({
sleep: 4, //in sec
fade: 1 //in sec
},
[
{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' }
]);
});
</script>

<div id="mainVisual">
<p>Now Loading...</p>
</div>

<div id="mainVisual">の場所に画像が表示されますので、CSSで横幅と高さの指定をしましょう。
「mainVisual」は任意の名前に変更可能です(・ω・)

それとjavascriptの表記内をちょっと補足しますー

【sleep】次の画像に切り替わるまでの時間
【fade】フェードさせる時間

になります。

画像ファイルを増やすときは、

{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_03.jpg', href: 'http://mtw.cocotte.jp/' }

こんな具合にコードを増やすことで可能。つなぎの『,』を忘れずに!

ハイパーリンクを消したいときは、

{ src: 'mainImage_01.jpg' },

この状態にしてもらえればハイパーリンクなしになります(・ω・)ノ

あと、このJQueryプラグインは、クロスフェードや拡大縮小みたいな事もできます
その辺りコードは、本家サイトを参考にしてください

※2011.0902追記

画像が表示される場所に表示される画像サイズ「width」「height」の指定をCSSで表記する必要があるようです。
それと、ちゃんと「jquery.cross-slide.min.js」は読み込んでるのに画像表示されない!っていうときは他の javascriptが干渉してる可能性があるみたいですので、検証して原因をつきとめてみてください。

■今回の参考サイト様
CrossSlide | 設置サンプル

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/639
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2011/06/22-1955.php

Comment

■コメント

>potetoさん

遅くなりましてごめんなさい!
このJQuery結構便利で簡単なので、ぜひぜひ活用してくださいな!

結希猫 Author Profile Page | 2014年4月 1日 14:29

リンク設定の仕方を探していました。
分かりやすい解説ありがとうございます!

poteto | 2014年1月23日 19:02

■コメントを投稿

  コメントをプレビュー

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。


画像の中に見える文字を入力してください。

Amazon オススメ人気RANKING BEST8

Amazon ねんどろいど人気RANKING BEST8

Site Search

Tag Cloud


2002.6.6 count start