人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、
(http://maxb.net/scripts/jbgallery/docs/background/slideshow.html)
JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず
困っております。

スライドショーにはjbgallery-3.0.jsといファイルを使用しております。
(ファイルを製作された方のサイトはこちら:http://maxb.net/scripts/jbgallery/)

スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、
ぜひ教えていただきたいと思っております。

また、製作者の方のサイト(http://maxb.net/scripts/jbgallery/)のようにブラウザいっぱいに
背景画像が広がるようにしてみたのですが、ブラウザサイズを小さくすると、画像の上部分が
切れてしまうため、ブラウザサイズが小さくても上部が表示されるようにしたいと思っております。

表示させる方法をお分かりになる方いらっしゃいましたら
教えていただきたいと思っております。

ご教授のほど、何卒よろしくお願いいたします。

●質問者: hosoya
●カテゴリ:インターネット ウェブ制作
✍キーワード:jQuery js URL サイズ サイト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●35ポイント

>最後の一枚でストップする

確認したところリピートを停止するオプションが無いようなので、

画像を表示した後に実行されるafterオプションでAPIのstop()を実行して停止するようにしました。

その際、「いま表示したのが最後の画像か」という条件を与えてやる必要があります

思い付いたのは、


>ブラウザいっぱいに背景画像が広がるように

がどういう状態か正しく判断できないのですが、リンク先と同じだと仮定すると、styleプロパティを'centered'にすれば常に全体が表示されるようになります。(cssのbackgroundに画像が設定されている場合は縮小拡大はできません。)


以下のコードは、リンク先にあるサンプルのzipを解凍してそのすぐ下に保存すると動きます。

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 <link href="jbgallery-3.0.css" rel="stylesheet" media="screen" />
 <script src="libs/jquery-1.4.4.min.js" type="text/javascript"></script>
 <script src="jbgallery-3.0.js" type="text/javascript"></script>
 <script type="text/javascript"><!--
 jQuery(document).ready(function(){
 var imgLen = $("#fullscreen>ul>li img").length; //画像枚数保存
 var imgCount = 0; //カウンター

 var api = jQuery("#fullscreen").jbgallery({
 menu : 'simple',
 style : 'centered',
 slideshow:true,
 timers : {
 fade : 400,
 interval: 1500
 },
 after: function(ev){
 //console.log(ev.target) //debug用
 if (++imgCount >= imgLen) { //最後の画像か
 api.stop();
 console.log('stop')
 }
 }
 }, true); //APIを使うためには第2引数のtrueは必要
 });
 --></script>
</head>
<body>
<div class="jbgallery" id="fullscreen">
 <ul>
 <li><a title="nara" href="http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvrjvU83I/AAAAAAAABAU/8tbAipa9wgk/P1020533.jpg"><img src="http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvrjvU83I/AAAAAAAABAU/8tbAipa9wgk/s288/P1020533.jpg" alt="" /></a></li>
 <li><a title="tokyo" href="http://lh5.ggpht.com/_JJJpzXdPAI4/SpzuSpC-0zI/AAAAAAAAA48/M2GPV81K4Ak/100_2090.jpg"><img src="http://lh5.ggpht.com/_JJJpzXdPAI4/SpzuSpC-0zI/AAAAAAAAA48/M2GPV81K4Ak/s288/100_2090.jpg" alt="" /></a></li>
 <li><a title="koyasan" href="http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvR10H1cI/AAAAAAAAA94/n4OjsO0TYH8/P1020543.jpg"><img src="http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvR10H1cI/AAAAAAAAA94/n4OjsO0TYH8/s288/P1020543.jpg" alt="" /></a></li>
 </ul>
</div>
</body>
</html>

デバッグはFirefoxのFirebugという拡張が便利です。

◎質問者からの返答

Cherenkovさま

ご回答いただき誠にありがとうございます。

また、質問をする際のアドバイス、ありがとうございます。

ブラウザ背景という表現はわかりづらいものだったかと思います。

お聞きしたかった事をあらてめて申し上げますと

現在下記のようなサイトを作成しております。

http://www.specialsouce.com/test/

htmlは以下です。

<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<title>demo</title>

<meta name="author" content="Massimiliano Balestrieri" />

<link href="css/jbgallery-2.0.css" rel="stylesheet" media="screen" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/jbgallery-3.1a.js" type="text/javascript"></script>

<script type="text/javascript"><!--</p> <p> jQuery(document).ready(function(){</p> <p>jQuery(".jbgallery").jbgallery({menu : false, slideshow : true, style: "zoom", caption : false, loop : false});</p> <p>});</p> <p>--></script>

</head>

<body>

</body>

内のlistにしている画像がフルブラウザで

スライドするようになっているのですが、ブラウザのサイズにより

画像の上部分が切れてしまう為、どのブラウザサイズでも左上に

画像左上が表示されるようにしたいと思っております。

そのためにはcssファイル(http://www.specialsouce.com/test/css/jbgallery-2.0.css)

または、jsファイル(http://www.specialsouce.com/test/js/jbgallery-3.1a.js)を修正しないと

いけないと思っておりますが、どこを修正していいのか分からず困っております。

ちゃんとご説明出来たか若干不安ではありますが

もし方法をお分かりでしたらご教授いただけると幸いです。

よろしくお願いいたします。

また重ねてお礼申し上げます。


2 ● typista
●35ポイント ベストアンサー

かなり作りこまれているビューアプラグインですね。

見たところ非ループ処理は実装されていないようだったので、

少しだけ修正したものを以下にアップロードしました。

http://typista.xii.jp/test/hatena/1294763285/jbgallery-3.1a.js

*ある程度、日数が経過したら削除してしまいますので

ダウンロードして使ってください。

なお、デフォルト動作に影響を及ぼさない意図でパラメータ追加して

いますので、HTML側での呼び出し方も少しだけ修正が必要です。

14行目

[修正後]jQuery(".jbgallery").jbgallery({caption : false, menu : false, slideshow : true, loop : false});

[修正前]jQuery(".jbgallery").jbgallery({caption : false, menu : false, slideshow : true});

それとJSファイル名もjbgallery-3.1a.jsに変更していますので、

注意してください。

◆非ループのサンプル(わかりやすいように画像は3枚)

http://typista.xii.jp/test/hatena/1294763285/index.html

◆ループのサンプル(わかりやすいように画像は3枚)

http://typista.xii.jp/test/hatena/1294763285/loop.html


ブラウザサイズを小さくしたほうの対応はちょっとすぐにはわかりそうにないです。

◎質問者からの返答

typistaさま

ご回答ありがとうございます。

ダウンロードさせていただき、教えていただいた通りにすることで

スライドのループを止めることが出来ました。

本当に感謝の気持ちでいっぱいです。

心よりお礼申し上げます。

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ