• かちびと.net

    複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Pluginのご紹介です。省スペースにコンテンツを置きたい時にいいかもですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin

スポンサーリンク

ちょっとうまい説明が思いつかなかった
んですけど、複数並べられた画像など
を同時にスライドさせるjQueryプラグイン。
省スペースに多くのコンテンツを表示
させる事が出来るのはちょっといいかも
知れません。

あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。

Grid Slide Plugin


これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。

デモ見たほうが早いですね。説明下手ですみません。

Demo

js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.gridslide.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$('#gridslide').gridslide();
			});
		</script> 

本体、easingプラグインとGrid Slide Pluginを読み込んでセレクタ書くだけ。

マークアップ

<div id="gridslide">
			<div class="g0">0</div>
			<div class="g1">1</div>
			<div class="g2">2</div>
              ・
              ・
              ・
			<div class="g27">27</div>
			<div class="g28">28</div> 

		</div> 

単純なマークアップで作れるのもいいですね。

画像も勿論対応しています。デモもあるのでぜひどうぞ。

Grid Slide Plugin

URL :
TRB :

Comments & Trackbacks (2)

  1. moly

    ホームページ制作の初心者です。

    このJQueryがうまく表示されません。
    とりあえず、ソースをそのままコピペしてみても、
    数字の方もまったく動作しなかったのですが、
    何が悪いのでしょうか?
    ご指導よろしくお願い致します。

    • シロ

      こんにちは。コメントありがとう御座います。

      とりあえず、ソースをそのままコピペしてみても、
      数字の方もまったく動作しなかったのですが、
      何が悪いのでしょうか?

      コピペですか・・ちょっと頂いた情報だけですと僕の勘に頼るしか無いのですが、jsファイルはちゃんとダウンロードしてありますか?

      このままのコピペですと、jquery.easing.1.3.jsとjquery.gridslide.jsが相対パスなのでhtmlファイルと同様にjsファイルがサーバーにないと動きません。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services