TAG : フォトギャラリー

jquery jQuery lightGallery (Version 1.2.x) の使い方や設定

2016年1月16日

jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.2.13」。以前「Version 1.1.4」の時にも調べたけれど、最近使おうと思ったらバージョンが上がっていました。Version 1.2.0 で全面的に書き換えたとなっています。(Completely re-written the plugin..) lightGallery ホーム(デモ) lightGallery GitHub 目次 jQuery light…

続きを読む

jquery jQuery lightSlider の使い方や設定

2014年12月31日

jQuery スライダープラグイン lightSlider の基本的な使い方や設定に関する個人的なメモ。この時点での lightSlider のバージョンは「Version 1.1.1」。 ライセンス:MIT License レスポンシブ対応 ギャラリーモード(スライドショー) サムネイル表示 Slide, Fade アニメーション youtube, vimeo , google map 対応 目次 jQuery lightSlider のダウンロード jQuery lightSlider のページの上部メニュー右側にある「Download」をクリックし…

続きを読む

jquery jQuery lightGallery の使い方や設定

2014年12月30日

追加情報 Version 1.2.x については「 jQuery lightGallery (Version 1.2.x) の使い方や設定」をご覧ください。 jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.1.4」。 ライセンス:MIT License レスポンシブ対応 Youtube Vimeo Video and html5 videos 対応 Slide and Fade アニメーション iframe 対応…

続きを読む

wordpress WordPress で Magnific Popup を使ってみる

2014年6月5日

Magnific Popup を WordPress で使う際のメモ。 現時点ではまだ WordPress 用のプラグインはできていないが、いずれはプラグイン化されるとのこと。 目次 基本的な使い方等については、よろしければ以下をご覧ください。 関連ページ:Magnific Popup を使って見る Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード(ページ右側の「Download ZIP」から) ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnif…

続きを読む

jquery jQuery レスポンシブ・スライダー bxSlider

2014年5月18日

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」からファイルをダウンロード。 ダウンロードしたファイルを展開すると以下のようになっている。 images:コントロール類やローディングの画像 plugins:オプションで使用する「jquery.eas…

続きを読む

jquery カルーセルパネル(スライドパネル)の表示

2014年1月14日

カルーセルパネル(パネルをスライドして1周すると元のパネルに戻る)やスライドパネルを使う際のメモと練習(実用的でないものがほとんど)。 カルーセルパネルの表示(サンプル1) サンプル1 シンプルなカルーセルパネルを表示する。 カルーセル全体を囲む div 要素を配置(id=”slider_wrap”) その内側に「戻る」(slider_prev)と「進む」(slider_next)ボタンを配置 パネルを表示する領域の div 要素(id=”slider”)を配置(overflow: hidden に設定) …

続きを読む

wordpress WordPress で取得したデータを jQuery で表示(フォトギャラリー)

2013年6月5日

カスタム投稿タイプのそれぞれの投稿のアイキャッチ画像を jQuery で表示するフォトギャラリーのメモ。 カスタム投稿タイプ’works’とそのタクソノミー’works_cat’を登録。 テンプレート「taxonomy-works_cat.php」を使って表示。 ループで投稿のデータを取得し、最初のデータの中サイズの画像と、全てのデータの小サイズの画像を表示。 小サイズの画像(サムネイル)をクリックすると、それに対応する中サイズの画像を jQuery で表示する。 posts_per_page を指定すれば…

続きを読む

jquery jQuery の fadeOut() を使ったスライドショー

2013年5月17日

プラグインを使わずに、jQuery を使って簡単なスライドショーを行う方法のメモ。 シンプルなスライドショー そのページにアクセスすると自動的にスライドショーを行う単純なもの。 サンプル1 基本的な構造 最初に表示する写真とそのタイトルを HTML に記述。 スライドショーで表示する写真のファイル名と情報をカンマ区切りで、非表示に指定した div 要素内に li 要素として記述しておく。 表示する他の写真は、最初の写真と同じフォルダに配置 HTML img 要素は絶対配置(position:absolute)を指定。 CSS jQuery の記述 次に表…

続きを読む