どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 　> 　DEMO 　> 　DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込

前回に引き続きのテーマですが、 今回は方法がちょっと違います。 前回は、背景画像をスライドさせる形でしたが、 今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。 それでは、DEMOをご覧下さい。 DEMO margin-leftを使用し、ulをずらしています。 見えなくなった先頭の要素を一番後ろに入れて、、 というの繰り返して無限ループになるようになってます。 以下、javascritになります。 $(function(){ setInterval("photoslide()", 50); }); var current = 0; function photoslide(){ current -= 1; //先頭の写真が見えなくなった時の処理 if(current == -400){ var copy = $(".slide ul li:first").c

「jQuery」とは、JavaScriptのライブラリーの1つです。 「prototype.js」や「MooTools」など様々なJavaScriptライブラリーがありますが、「jQuery」はその中でも突出した人気を誇るライブラリーです。 最大の特徴は、通常のJavascriptとは異なる方法で命令を記述できることです。Javascriptの記述には多くの手続きを必要としますが、「jQuery」を利用すると非常に短いコードで済みます。また、CSSに近い記述方法を採用しているため、CSSがわかるWEBデザイナーやマークアップエンジニアが比較的簡単に習得できるように設計されています。 jQueryの利点 ファイルサイズが軽量でWebページの読み込み速度にほとんど影響をあたえない。 2010年9月5日時点の最新バージョンは1.4.2。Minified（圧縮版）で24KB。 クロスブラウザー

jQuery.simpleLoopSlider.js Default autoslide:false controller:false, pagination:false, interval:1500

ホームページで、画像、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字を クリックして、そのページ内で動画などを開く方法 [Shadowbox] Lightbox for Media 更に、画像も動画も一緒に、スライドショーをしてくれる[Shadowbox] Shadowbox は、画像、動画など幅広い多くのメディアを拡大ポップアップ表示してくれる。 また、様々なJSフレームワーク(アダプター）に対応しているので、いずれかを好みによりダウンロードして、使用します。 Base(standoalone)（非JSフレームワークタイプ） jQuery Prototype MooTools (requires 1.2 Core) Dojo Toolkit Yahoo! User Interface Library Ext (requires ext-core.js) jQue

前回の記事の 12個のかっこいいjQueryスライドショープラグインまとめでスライドショーのプラグインを紹介しました。今回はSlides, A Slideshow Plugin for jQueryを使ったサンプルを制作したのでチュートリアルを記事にします。サイト制作の参考にしてみてください。前回の記事の 12個のかっこいいjQueryスライドショープラグインまとめでスライドショーのプラグインを紹介しました。今回はSlides, A Slideshow Plugin for jQueryを使ったサンプルを制作したのでチュートリアルを記事にします。サイト制作の参考にしてみてください。 サンプルサイトの完成例 メインビジュアルのソファ部分がスライドショーで切り替わります。 サンプルサイトこちらからご覧にいただけます。 スライドショー導入の手順 ダウンロード jsファイル、CSSファイルのリンク