プログラミング

ワードプレス上で可変的にグリッドレイアウトを行う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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. サーバー環境

    ubuntu 20.04 nginx php postgreSQL 12.5 W…
  2. プログラミング

    Django Webアプリケーションの構築 データベースの内容一覧表示 およびア…
  3. Ubuntu nginx SSL

    サーバー環境

    ubuntu nginx SSL Webサーバー構築
  4. プログラミング

    Django Webアプリケーションの構築 Nginxで公開 Mysqlに接続す…
  5. プログラミング

    WordPress jQuery + CSS + ショートコードで モーダル…
PAGE TOP