プログラミング

ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGrid」

ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン[jquery.vgrid.js]で動作の確認をしてみます。
確認のために jQueryUIのResizableプラグインを利用し、要素(グリッドのコンテナ内のコンテンツ)をマウスによってリサイズして可変的にレイアウトます
グリッドレイアウトの要素は、本ブログの投稿のアイキャッチ画像とタイトルで投稿のパーマリンクがリンクとしてセットしてあります。
また、リサイズ用のコンテナは本ブログの右側のウィジェットに広げられない様に幅に制限をいれてあります。
また、サイズがはみ出ない様に、CSSで[ overflow:auto ]が設定してあります。

可変的にグリッドレイアウト


  • ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGrid」

  • WordPress にて jQueryUI テーマを動的選択してデザインを反映

  • 列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。

  • 画像をポップアップするライトボックス jQuery プラグイン 「lightbox2」

  • Webページを本のようにめくる jQueryプラグイン 「Turn.js」

  • centos7 に Node Version Manager(nvm)で node.js のインストールするバージョンを管理する。

  • vim テキストエディターを快適に使う

  • MySQLによる 条件分岐とサブクエリー

  • 郵便番号データベース MySQL ビュー View

  • 郵便番号データベースで多対多のリレーション

  • PDOで郵便番号辞書データベース HTMLで一覧表示

  • PDOで郵便番号辞書データベース構築の記録

  • Centos7 に PostgreSQLをインストール PDO接続を試してみる。

  • centos7 + Apache2.4 + Mysql5.7 + Php7.0 構築の記録

  • Macにmysql 8.0.x をインストールする。

  • macOS Mojaveにデフォルトの Apache、PHPを利用してみる
function.phpショートコードの追加
jqueryのソース
ショートコードによるPHPファイル(/php/Resizeable_vgrid.php)

参考Webサイト
https://github.com/xlune/jQuery-vGrid-Plugin
https://jqueryui.com/resizable/
WordPress関数リファレンス

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    ワードプレス AmCharts Javascript ライブラリー を表示させる…
  2. プログラミング

    [python] Django ローカル環境にインストール サンプルアプリケーシ…
  3. Web・デザイン

    CSS3 アニメーションライブラリ animate.cssについて学ぶ
  4. Web・デザイン

    CSS3 グラフィックス transform transition anima…
  5. プログラミング

    sqlite3 & php class Library 応用編
PAGE TOP