【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。
今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider：サンプル・デモ 特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の１つです。 実装方法は以下のとおり。 ［bxSlider］の設置方法 最初に［bxSlider］の本体ファイルをダウンロードします。 リンクは以下より。 bxSlider：ダウンロード フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxs
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE
レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。 初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。 bxSlider 最初に紹介するのが［bxSlider］です。 設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。 ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。 ダウンロードURL
【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。
jQuery を使って、画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショーを紹介します。 簡単に設置できることはもちろん、JavaScript、HTML、CSS がすべて短いコードで書かれているのが特徴です。 百聞は一見に如かず。まずはサンプルをご覧ください。 クロスフェードで切り替わるシンプルな画像スライドショー： サンプルデモ jQuery依存なので、まずはHTMLの <head>〜<head> 内でjQueryを読み込みます。 <head> <script src="/js/jquery.js"></script> <head> JavaScript の書き方$(function(){ // 設定 var $width =640; // 横幅 var $height =300; // 高さ var $interval = 3000; // 切り替わりの間隔（ミリ秒
【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。
デバイスは最新のiPhone6を使用。アプリはデフォルトの「Safari」で、左の画像は普通に表示させたもの。そして右側が、今回紹介する「ウェブアプリケーション・フルスクリーンモード」でサイトを表示させたものです。 これは以前［iOS 7.1］のときだけ限定的に使えた「minimal-ui」の進化版で、「フルスクリーンモード」または「ウェブアプリモード」とも呼ばれる表示機能です。 この機能を有効化する方法は簡単で、ウェブサイトの <head>〜</head> 内に以下のコードを挿入するだけで実装できます。 <meta name="apple-mobile-web-app-capable" content="yes"> 「ウェブアプリケーション」と冠するだけあって、ウェブサイトがアプリのように表示されるのでカッコいいですよね。 余分なステータスバーやメニューバー、ツールバーが非表示になるので
【WordPress】外部サイトのRSS情報を取得して表示させる方法。
外部サイトのRSSを取得してきて、適当な箇所で表示させたい場合、「Google API」を使ったり、配布されているPHPライブラリを使ったり、あるいはPHPやJavaScriptで独自のプログラムを作って実装することになります。 「Google API」を使う方法「PHP」を使う方法もしサイトをWordPressで構築している場合は、上記の方法の他に、ワードプレスが独自に用意している［fetch_feed］函数を利用することができます。 使い方は簡単で、テーマファイルの中、RSSを表示させたい箇所で以下のコードを記述すればOKです。 <?php include_once(ABSPATH . WPINC . '/feed.php'); $rss = fetch_feed('https://on-ze.com/feed'); // RSSのURLを指定 if (!is_wp_error( $r
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。 スタイルシートも使いません。 すべてをjQueryのコードだけで賄います。 というワケでjQueryの記述方法です。 「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。 $('head').append( '<style>body{display:none;}' ); $(window
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
