jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、

Question

hosoya

1

1もっと見る

70pt

インターネットウェブ制作

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/）のようにブラウザいっぱいに
背景画像が広がるようにしてみたのですが、ブラウザサイズを小さくすると、画像の上部分が
切れてしまうため、ブラウザサイズが小さくても上部が表示されるようにしたいと思っております。

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

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

回答の条件

1人2回まで

登録：2011/01/12 01:28:08
終了：2011/01/19 01:30:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

Cherenkov15044932011/01/12 10:39:58

35pt

質問をする際はコメント欄を有効にしたほうが有益です。
サンプルコードを貼ったほうが回答者の負担が減ったり、良質な回答が得やすいです。

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

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

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

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

思い付いたのは、

最初に表示する画像の総数を記録して、afterが実行される度にカウントし評価する。下のサンプルはこれ。$("#fullscreen>ul>li img").lengthが確実に総数になるかセレクタの確認は必要です。
if(/P1020543\.jpg/.test(ev.target.src) || ev.target.alt == 'koyasan'){ のような感じで最後の画像のsrcにマッチするか比較したり、画像の上の要素のtitle属性がev.targetのalt属性になるようなのでそれを比較する。このタイプだと画像を変更するたびにメンテナンスする必要があるので前述のカウンタのほうがいいかと。

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

がどういう状態か正しく判断できないのですが、リンク先と同じだと仮定すると、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>

</head>

<body>

1

2

3

</body>

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

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

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

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

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

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

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

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

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

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

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

2011/01/13 02:31:53

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

typista · Accepted Answer · 2011-01-12T09:18:15+09:00

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

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

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

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に変更していますので、

注意してください。

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

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

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

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

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

typista · Accepted Answer · 2011-01-12T09:18:15+09:00

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

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

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

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に変更していますので、

注意してください。

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

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

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

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

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

jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、

ベストアンサー

typista35972011/01/12 09:18:15

その他の回答（1件）

Cherenkov15044932011/01/12 10:39:58

typista35972011/01/12 09:18:15ここでベストアンサー

コメント（0件)

この質問への反応（ブックマークコメント）