[jQuery]画像などの要素を縦にも横にも簡単スクロール simplyscroll.js

公開日:  最終更新日:2016/03/10

この記事のタイトルとURLをコピーする

[jQuery]画像などの要素を縦にも横にも簡単スクロール simplyscroll.js
以前の書いた記事

[楽天][jQuery]商品画像を横に自動スライドする[endless_scroll_min.js]
楽天などのネットショップ、ECサイトで商品画像が横に自動的にスライドしている見せ方を見た事があるかと思います。 限られたスペ...

と似たような内容になりますが、ショップページに商品を陳列する際スペースがない場所でも自動でスクロールさせて動かすことで、多くの商品をお客さんの目に止めることが可能になります。

本日は、縦にも横にも画像などの要素をスクロールさせる方法を紹介したいと思います。

スポンサードリンク

画像を縦横にスクロール「simplyscroll.js」

では、具体的にどんな表示イメージかというと
靴ショップやまう
本日は無料化で何かと話題なYahoo!ショッピングから紹介したいと思います。
こちらのショップ 靴ショップやまう
スクロールサンプルイメージ
ページ中ごろにある「瞬足」が並んでいる部分を見てもらうと画像がスクロールしています。

実装方法について

simplyscrollの公式サイトより、jquery.simplyscroll.zipをダウンロードしてください。

ダウンロードしたファイルの中から
「jquery.simplyscroll.js」
「jquery.simplyscroll.css」
「buttons.png」
の3つを使います。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
サンプルソース sample1.html

<link rel="stylesheet" href="jquery.simplyscroll.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.simplyscroll.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
    $(function() {
        $("#slider").simplyScroll();
  });
})(jQuery);
</script>
 
  <ul id="slider">
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>   
  </ul>

1、2、3行目 ダウンロードした3つのファイルを読み込みんでいます。
(サーバー内にアップするのを忘れないでください。サンプルソースは同一フォルダにファイルを配置した場合なのでパスも環境に合わせて変更してください)

4~10行目で スライダーの設定、実行をしている部分です。
ここで、動き、表示等の設定を行います。また、実行時には <ul id=”slider”>のidを指定しています。
htmlの記述部分も、非常にシンプルですね。
必要な数だけ<li><img src=””></li>を設定します。
もちろん、画像からのリンク設定も出来ます。
品名や価格などを表示したい場合も<li></li>内に記述可能です。


あとは jquery.simplyscroll.css 内で表示する画像に合わせて幅、高さを調整する必要があります。

【横スライドの場合】
140、141行目(width、height)、146、147行目(width、height)で全体の表示領域を調整します。
154、155行目(width、height)で1つの画像の表示領域を調整します。

【縦スライドの場合】
182、183行目(width、height)、188、189行目(width、height)で全体の表示領域を調整します。
195、196行目(width、height)で1つの画像の表示領域を調整します。

動作サンプル(デフォルト)

実行時のオプション等など指定しない場合

自動スクロールなし、スピード指定

実行の記述部分にオプションを指定します。

<script type="text/javascript">
(function($) {
  $(function() {
    $("#slider").simplyScroll({
      auto: false,
      speed: 5
    });
  });
})(jQuery);
</script>

縦にスライド

実行の記述部分にオプションを指定します。

<script type="text/javascript">
(function($) {
  $(function() {
    $("#slider").simplyScroll({
      orientation: 'vertical',
      auto: true,
      manualMode: 'loop',
      frameRate: 10,
      speed: 5
    });
  });
})(jQuery);
</script>


他にも マウスオーバー時にスクロール停止
pauseOnHover:true / false

自動スクロール停止ボタンを表示
pauseButton:false / true

スクロールする向きを指定
direction:’forwards’ / ‘backwards’

など実行時のオプションとして指定することが出来ます。
詳しくは、公式サイトにて確認ください。
ページにスペースがない時など商品情報を陳列すれば良いかもしれません。
ぜひ、活用してみてください。

スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Comment

  1. mori より:

    はじめまして。
    アップありがとうございます。
    「画像などの要素を縦にも横にも簡単スクロール」を自分のサイトで
    試していたのですが、画像が縦に並んでしまいます。
    スライドショーも始まりません。
    解決策ありますでしょうか?

    • peacepopo より:

      mori 様

      コメントありがとうございます。
      ソースを確認しないと何ともいえませんが、スライドも動いてないとのことですので
      サンプルソースにある1,2,3行目でcss、jsなどの外部ファイルを読み込んでいる部分が怪しいかもしれません。

      まず、外部ファイルをダウンロードしてサーバーにアップロードする必要があります。
      さらに、サンプルソースではそれぞれファイル名しか指定していない状態になっています。

      ファイル名のみの指定の場合は
       sample.html →(実装を記述したhtmlファイル)
       jquery.simplyscroll.css
      jquery.min.js
      jquery.simplyscroll.js
      がサーバーの同じ階層にアップされている必要があります。
      css,jsなど別フォルダを作成してそこにアップロードしている場合は、実際の環境に合わせてファイルの場所を指定する必要があります。

      例)
      href=”./css/jquery.simplyscroll.css”
      src=”./js/jquery.min.js”

      上記のファイルの読み込みが問題ないのであれば、読み込んでいるjQueryのバージョンなども関係してくるかもしれません。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑