プログラミング

ワードプレス上で可変的にグリッドレイアウトを行う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. プログラミング

    WordPressで jqueryプラグイン Qrcodeを表示する
  2. Raspberry PI

    RaspberyPi 4B によるローカルネットワークドライブ、共有フォルダーを…
  3. wordpres5をubuntu nginxにインストール

    サーバー環境

    ubuntu20.04 nginx に wordpress5.6 を インストー…
  4. サーバー環境

    Webサイト https 導入 備忘録
  5. プログラミング

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