画像をスクロールさせる jquery.scrollable.js

画像をスクロールさせる jquery.scrollable.js

jquery.scrollable.jsは、さまざまなコンテンツを画面内の特定の領域でスクロールさせるプラグインです。

Scroll your HTML with jquery.scrollable.jsで使い方など紹介はされているのですが、英文って事もあり直ぐに使い方が分からないかったので、自分の方でも解説をしておきたいと思います。

…ここからが続き

jquery.scrollable.jsの使い方・ダウンロード

  1. Scroll your HTML with jquery.scrollable.jsのFeaturesにある(requires mousewheel.js)からmousewheel.jsをダウンロード。
  2. Scroll your HTML with jquery.scrollable.jsの一番下の方のDownloadにあるjquery.scrollable.min.js (minified version, 3.9 kb)からjquery.scrollable.min.jsをダウンロード。
  3. サンプルのCSSはScroll your HTML with jquery.scrollable.jsの中間らへんにあるCSS fileからダウンロード。
    (ダウンロード後backgroundに指定されている画像のパスを絶対パスに記述変更。)
  4. head内body内に下記ソースをコピペでサンプルデモの出来上がりです。
    (head内のjsやCSSのパスは任意のものにして下さい。)

    head内

    <link rel="stylesheet" href="style/scrollable.css" type="text/css" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
    <script type="text/javascript">google.load("jquery", "1.2");</script>
    <script src="js/jquery.scrollable.min.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script>
    	$(function() {
    		$("#scrollable").scrollable({horizontal:true});
    	});
    </script>
    

    body内

    <div id="scrollable">
         
        <div class="navi"></div>
         
        <a class="prev"></a>
         
        <div class="items">
            <a>1</a>  <a>2</a>  <a>3</a>  <a>4</a>  <a>5</a> 
            <a>6</a>  <a>7</a>  <a>8</a>  <a>9</a>  <a>10</a> 
            <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
        </div>
         
        <a class="next"></a>
         
    </div>
    

    demo page

    jquery.scrollable.jsとlightbox.jsを使ったサンプル

    lightbox.jsの詳しい使い方については、「LightBoxのJQuery版 jQuery lightBox plugin」を参照下さい。

    head内

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
    <script type="text/javascript">google.load("jquery", "1.2");</script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <script src="js/jquery.scrollable.min.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script>
    	$(function() {
    		$("#scrollable").scrollable({horizontal:true});
    	});
    </script>
    

    body内

    <div id="scrollable"> 
         
        <div class="navi"></div> 
        
        <a class="prev"></a>     
         
        <div class="items"> 
            <a href="image/photo/01.jpg"><image src="image/photo/01.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/02.jpg"><image src="image/photo/02.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/03.jpg"><image src="image/photo/03.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/04.jpg"><image src="image/photo/04.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/05.jpg"><image src="image/photo/05.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/06.jpg"><image src="image/photo/06.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/07.jpg"><image src="image/photo/07.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/08.jpg"><image src="image/photo/08.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/09.jpg"><image src="image/photo/09.jpg" alt="サンプル画像" width="150" /></a>
            <a href="image/photo/10.jpg"><image src="image/photo/10.jpg" alt="サンプル画像" width="150" /></a>
        </div> 
         
        <a class="next"></a> 
         
    </div>
    

    demo page

Track Back

流れのままに~flowind~のブログ

jQueryに様々な機能を追加できるプラグイン(jQuery Tools)

画像を自動でスクロールするjavascriptを探していたら見つけたjQuery Tools 英語のページなので使い方を簡単にまとめておく デモページ ダ...

by 流れのままに~flowind~のブログ  

Comments

MIYA

MIYA

はじめまして。今紹介してるサイトを見てみたんですが、随分変わってましたね…

http://flowplayer.org/tools/archive/scrollable-0.13.html#download
が元あるページだと思われるんですが、ダウンロード出来なくなっている事からはもうサイト上にはなさそうです…

ちなみに tools.scrollable.mousewheel-1.0.1.min を変わりに入れた際動作ってどうでしたか?
無理そうなら
http://flowplayer.org/tools/demos/scrollable/index.htm
こちらのページを参考にして頂くしかないと思います><

2010年02月22日 22:55

ド素人

ド素人

はじめして、画像を公開するのに良いデザインのjava scriptがないかなと、探してたらこちらのサイトがあったので利用してみようかなと思ったのですがさっぱり分かりません。

http://www.css-lecture.com/log/javascript/020.html

このスクロールバーを利用したいのですが、上記に書いてあるファイル名がjquery.scrollable.min.js などが見つからず、tools.scrollable.mousewheel-1.0.1.minのファイルをダウンロードしたのですが、これでよいのでしょうか。

2010年02月19日 17:47

mabuo

mabuo

Miya様

回答ありがとうございました!
ちょっと調べなおしてみたところ、対処ページに設定項目がありました!

http://flowplayer.org/tools/scrollable.html
に記載されているソースに

$("JQUERY SELECTOR").scrollable({
loop:true,
});


上記のようにloopの設定を適用したところ、
項目がループされるようになりました!
参考までにご確認いただければと思います。

ちなみに、ただいまCGIで選択した項目のDivタグにActiveクラスを適用して、選択を活性化させているのですが、Activeクラスが適用されている項目をページ遷移後に真ん中に表示させる設定方法はご存知でしょうか?
もしご存知でしたらぜひ教えてください!

2010年01月04日 20:06

MIYA

MIYA

mabuoさん

カスタマイズの件なんですが、直ぐに分かりそうにないです><
時間があれば見たいとは思うですけどね…それで出来るとも言えませんが…

お力になれなくてすみません><

2009年12月17日 10:37

mabuo

mabuo

こんにちは!こちらのサイトを参考にさせていただき、問題なく動きました!大変感謝しております。もしわかれば教えていただきたいのですが、現状このスクロール使用は最後の画像、または最初のに表示が差し掛かると矢印のボタンが効かなくなりますが、最後の画像にさしかかった場合に、最初の画像に戻る動きにカスタマイズしたいのですが、どのようにすれば良いか教えていただくことは出来ますでしょうか?

2009年12月16日 05:03

MIYA

MIYA

MMさん。お力になれて良かったです!

2009年09月01日 20:55

MM

MM

MIYAさま

丁寧にご教授ありがとうございます。

>後一番考えられそうな事は他に指定している要素のCSSの影響が出ている事も考えられますので、scrollableで使っているCSS以外を全部きった状態で表示がどうなるのかも検証してみたらよいかと思います。

MIYAさんのおっしゃるとおり、ひとつひとつ検証していったところ、他の部分のdivが影響していたようです。

そこをなおしたら無事解決致しました。

本当にありがとうございました!

2009年09月01日 20:04

MIYA

MIYA

MMさん。はじめまして!

実際のその状況を見てみないとはっきりした事は言えないですが、

>ieでは最初の二つしか表示されません。
とありますが、スクロールさせた際の次の表示も二つしか表示されない状況なんでしょうか?

画像の表示するエリアはdiv.itemsで行っており、その内部はdiv.items aで横幅や高さの調整を行っているんですが、そこは問題ない感じなんでしょうか?

後一番考えられそうな事は他に指定している要素のCSSの影響が出ている事も考えられますので、scrollableで使っているCSS以外を全部きった状態で表示がどうなるのかも検証してみたらよいかと思います。

2009年08月30日 15:54

MM

MM

はじめまして、よろしくお願い致します。
scrollableの解説サイトを探しておりまして、こちらのサイトをみつけまして、大変勉強させていただいております。

画像を最初に4つ表示させるようにして設置しまして、ブラウザで確認したところ、WINDOWS IE7で画像が最初の2つだけしか表示されません。(ボタンなどは正常に表示され動作もしております)当方MACで制作していまして、MACのfirefoxとsafariでは正常に表示されています。

色々とやってみたのですが何が原因なのかわかりません。お分かりになられましたらご教授頂けると大変助かります。よろしくお願い致します。

2009年08月28日 18:47

MIYA

MIYA

自分で検証してみた所デモページにyuga.js0.7.0を組み込んでも問題なく動作は確認出来ました。
ファンクションなど一切いじる事なくhead内に読み込ませただけで問題なかったので、他に何か原因となるような要素はないでしょうか?

2009年01月20日 10:46

nimo

nimo

日本語の説明をたどっていたところ拝見させて頂きました。
問題なく動作するのですがyuga.js7.0に組み込むとどうも
うまく動作しないようです。

知識がないもので方法が間違っているのが原因かと思うの
ですが組み込むにはどうすればいいのでしょうか?

見よう見まねではありますが各ファンクションの最下部に
以下のように追加し

imgscroll: function() {
$("#scrollable").scrollable({horizontal:true});
}

定義する先頭部分に

$(function() {
...
...
...
$.yuga.imgscroll();
});

と定義してみましたが動作しませんでした。

2009年01月20日 00:44

MIYA

MIYA

jquery.mousewheel.jsへのパスはあっているんでしょうか?
マウススクロールで動くjsはjquery.mousewheel.jsなのでそれをちゃんと読み込んでいれば動くはずですよ。

2008年11月16日 19:57

kh

kh

返信ありがとうございます。
サンプルの通りにしたのですがマウススクロールが効きません、何故なのでしょうか?
たびたび申し訳ありませんがよろしくお願い致します。

2008年11月16日 02:24

okr

okr

先日は素早いご回答どうもありがとうございました。
無事動きました。そこに付け加えるのですね!
とても勉強になりました。ありがとうございました。

2008年11月12日 13:24

MIYA

MIYA

head内のスプリクトの記述かlightbox.js内の一番に下に

$(function() {
$('.items a').lightBox();
});

を記述したら動きませんか?

このデモページでは LightBoxのJQuery版 jQuery lightBox pluginで紹介している。
記述をlightbox.jsに直接書き込んでいたんですよね…

不親切ですみませんでした。


JQuery版のlightBoxは上記ソースの様に何処の要素のaタグが記述しないといけないってわけなんです。

2008年11月11日 21:36

MIYA

MIYA

kh2003さん返答が遅くなりごめんなさい。

あの後自分の方から問い合わせはみたんですが、返答がなく困っていました…

今日確認してみるとサイト事態がリニューアルされていたんですが、問題だったリンク先も復活しておりますので、今だと問題なくダウンロード出来ますよ。

2008年11月11日 21:30

seki

seki

はじめまして、よろしくお願いします。
僕も当サイトで勉強させて頂いてます。

早速ですが、
「jquery.scrollable.jsとlightbox.jsを併用する方法」を利用したいと思い、テストを行っているのですがlightbox.jsが動きません。。。

scrollableまでは正常に動きましたが、lightboxが作動せず、通常のリンク(画像へリンクを張っている)状態になってしまいます。
headの中へは必要な項目を記載しました。
”~.js”も所定の場所へ保存されています。
bodyの中へも必要な項目を記載しました。
どこかの記述が間違っているかと思うのですが素人の為どこなのかわからず止まってしまっております。
可能であれば、ご指摘いただけると幸いです。

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

2008年11月11日 11:39

MIYA

MIYA

okrさん。ありがとうございます。

idは同一ページ内に一つと決まっておりますので、同一ページに二つつけたい場合ですと、二つ目のスクロールをさせたい部分をid="scrollable2"と仮にし。
head内に記述した
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
$(function() {
$("#scrollable2").scrollable({horizontal:true});
});
と付け加えてみて下さい。

そしたら一つ目も二つ目も通常に動くはずですよ。

2008年11月11日 10:42

okr

okr

はじめまして。
サイトを拝見いたしまして、勉強させていただいております。そこで質問です。

ひとつだとうまく動くのですが、これを同一ページに二つつけてみようとすると一つ目は動くのに二つ目はすべての内容が出てきてしまいうまく動きません。
ふつうに並べただけでは動かないのでしょうか?初心者ですので調べようにも調べられず困っています。大変お手数ですが、もし分かりましたらお教えいただけないでしょうか。よろしくお願いいたします。

2008年11月10日 16:12

MIYA

MIYA

はじめまして

自分の方でも確認してみたのですが、他のページにもjquery.scrollable.min.jsをダウンロード出来る場所もあるのでそこも見てみたんですが、どうやらリンク切れしてるみたいですね…

ページが存在しているって事は配布を中止にしたわけではないと思いますので、自分の方で問い合わせしてみる事にしますね!

おって連絡したと思います。

2008年10月24日 01:04

kh2003

kh2003

はじめまして
先日こちらのページを拝見致しまして自分のホームページにつけてみようと頑張っているのですがうまくいきません。

Scroll your HTML with jquery.scrollable.jsのFeaturesにある(requires mousewheel.js)からmousewheel.jsをダウンロード

とのことですがもうファイルは無くなってしまったのでしょうか?

2008年10月24日 00:42

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

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

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article