サイト制作に使用した自作jQueryコードのご紹介WEB-PARK.ORGContactRssTwitter簡単実装!スライドギャラリープラグイン「jquery.easySlideGallery.js」の紹介Javascriptgallery/jQuery/plugin/slide/2010.04.22ツイートついにプラグインを作成しました!ハードルが高いと思い敬遠していましたが、何とかリリースすることができました。jquery.easySlideGallery.jsとは今回作成したのはスライドする画像ギャラリーです。サイト内の画像紹介ページなどに利用できればと思い作成しました。簡単に実装できますが、javascript以外にhtmlとcssにも特定のソースを記述する必要があります。Javascriptまずはjqueryを読み込ませその次にイージースライドギャラリーのプラグインを読み込ませます。他のプラグインと衝突させないためjQuery.noConflict();を指定してますので引数に($)が必要です。type="text/javascript">jQuery(function($){$("#gallery").easySlideGallery();});</script>HTMLスライドする画像をid=”slideImg”の子要素に入れます。サンプルソースはul、li要素ですが、divの親子要素でも問題ございません。id=”pagenation”内のid=”previous”とid=”next”はスライドさせるためのボタン(矢印)になります。id="next">Next</p></div></div>CSSCSSは下記ソースが必須になります。pointer;}各種設定このプラグインには「幅」「高さ」「速さ」を設定できます。幅スライド画像の表示領域のwidthを設定します。高さスライド画像の表示領域のheightを設定します。速さスライドするスピード設定します。左から順に「幅」「高さ」「速さ」を入力します。type="text/javascript">$(function($){$("#gallery").easySlideGallery(600,500,300);});</script>簡単な解説このプラグインは、表示領域のちょうど真ん中にくるようになっています。スライドする画像サイズがバラバラでもちゃんと真ん中に表示します。ul、li要素でなくてもid=slideImg内であればどんな要素にも対応しています。※ブロック要素に限ります。ダウンロードプラグイン(4KB)今回初めてプラグインを作成したので不備がございましたら、ご連絡頂けると幸いです。更新履歴2010.04.23#slideImgの子要素にposition:abslotuteを追加(IE6対策)2010.04.23サンプルの「next」「previous」を逆に変更2010.04.23他のコードと衝突させないため、「$」をjQuery.noConflict()で「jQuery」に変更そのためこのプラグインを読み込む際は$(function($){と引数に「$」が必要になります。AMご指摘ありがとうございます。jQueryでposition:absoluteを指定するとIE6だと認識してないみたいです。cssに記述しないと駄目みたいですね。AMコメントありがとうございます。サンプルを充実させて、このプラグインのできることを紹介したいと思います。PM素敵なプラグインを作成して頂いてありがとうございます。こちらのプラグインを1ページに複数に使用するにはどうすれば宜しいでしょうか?ご検討宜しくお願いします。PMサイトさん、コメントありがとうございます!申し訳ありません。基本的に1ページ1つの考えで作成しておりました。コメント頂いたので、別のエントリーで1ページに複数作成出来るプラグインを考えます!少々お待ち下さい。105https://web-park.org/javascript/easyslidegallery100421.html/trackbackCATEGORYFlashJavascriptPhotoshopwebsiteWordPressRECENTRYjQueryでモーダルウィンドウのプラグインを自作したので公開します。year1982FromOsaka,Japan。