当ブログデザインは、IE6以前のブラウザには対応していません。 できれば、お使いのブラウザを新しいものへ更新してください。 Windows Internet Explorer 8: ホーム JavaScriptでページ読み込み中に画像等を表示する方法の紹介です。 下の画像のようなものを読み込み中のみ表示させます。 読み込み完了時の処理にはJavaScriptのonloadを使用します。 そのonloadで読み込みが完了したとき、JavaScriptからスタイルを指定して非表示にします。 今回はHTML、JavaScript、CSSを利用し作成します。 では早速HTMLに書く内容から書き始めます。 赤字は各々で変更してください。(書いてあるURLに飛べばどんな内容か分かると思います) HTML <body onLoad="init()"> <script type="text/javascr
Beautiful transition effectsNivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills neededCreate a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image croppingNivo Slider cr
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 ・prev/nextボタンを付ける ・画像と画像の間に12pxのpaddingを挿入する ・画像の幅、高さを設定する ・画像が切り替わる間隔(ミリ秒) ・1画面に表示させる画像の数や画像の総枚数を設定する などの細かいオプション設定は下記のように引数に記述します。 $(function() { $('ul#user_interaction').carouFredSel({ prev: '#prev', //id="prev"をもつDOM要素にprevを設定 next: '#next',//id="next"をもつDOM要素にprevを設定 padding: [0 12px 0 0],//画像と画像の間に12pxのpaddingを挿入 items: { visible: 1,//1画面に表示させ
コピペで簡単にできる、複数サムネイル(画像)の左右スライダーを表示するjquery.carouFredSel.jsをご紹介します。 複数サムネイルの左右スライドショーを表示するJavaScriptの記述 ※jquery-1.6.2.js、jquery.carouFredSel-2.5.6-packed.jsファイルを読み込みます。$(‘スライドエリア’).carouFredSel({オプション})を記述します。オプションでは自動再生、スライド枚数、次へ・前への表示等を設定します。 <script type="text/javascript" src="js/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.carouFredSel-2.5.6-packed.js"></script> <scri
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
バナーをたくさん貼りたいけど、あまりベタベタたくさん貼りたくない場合によく使う手なのですが、バナーをスライド風にして、自動でローテーションさせたりします。そんな時にこのjQueryカルーセルプラグイン「CarouFredSel」が便利です。オプションでいろいろな動き方を設定できますので、これ一つでいろいろな場面で使えますよ! 【更新履歴】 2013年02月22日 WordPressへの使い方追加 2013年09月05日 トップイメージによく使うオプションcrossfadeを追加 jQueryプラグインのダウンロード Circular, Responsive jQuery Carousel – CarouFredSel (機械日本語訳はこちら) 上記サイトよりプラグインをダウンロードして下さい。 「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouF
今回は、かなり使えそうなjQueryプラグイン「carouFredSel」というものをご紹介します。 カルーセルやスライダーにもなるということで、以前、bxSliderというプラグインを紹介しましたが、そちらよりも、機能はあるかもしれません。(その記事はこちら) こちらのプラグインでできることを簡単にあげますと、 ・オプションが豊富で、自由にカスタマイズできる ・スライドを自動/手動、マウスホイール、スワイプ等で設定可能 ・レスポンシブやリキッド等のレイアウトに対応 ・ページネーション、次へ、前へのボタンの設置が可能 ・スライドの向き(上下左右)、エフェクト(9種類)、イージング(5種類)から設定可能 ・スライド毎の横幅、縦幅が別でも伸縮してスライドしてくれる ・動的に、スライドを追加したり、削除することが可能 とこんな感じです。 なにより、高さが違うものをスライドできるのは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く