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回まで
  • 13歳以上
  • 登録:2011/01/12 01:28:08
  • 終了:2011/01/19 01:30:02

ベストアンサー

id:typista No.2

typista回答回数359ベストアンサー獲得回数72011/01/12 09:18:15

ポイント35pt

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

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

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

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


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

id:hosoyablog

typistaさま

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

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

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

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

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

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

2011/01/12 22:45:55

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/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という拡張が便利です。

id:hosoyablog

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)を修正しないと

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

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

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

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

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

2011/01/13 02:31:53
id:typista No.2

typista回答回数359ベストアンサー獲得回数72011/01/12 09:18:15ここでベストアンサー

ポイント35pt

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

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

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

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


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

id:hosoyablog

typistaさま

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

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

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

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

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

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

2011/01/12 22:45:55

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません