Sorairo

jQueryプラグインのLightboxを導入しました。

ブログ記事内の画像リンクにjQueryプラグインのLightboxを実装しましたのでご紹介します。
Lightboxの実装についてはWordPressのプラグインが多数存在しますが、やはり今回もプラグインなしでやってみました。

advertisement

公式サイトよりダウンロード

Lightboxの公式サイトよりデータ一式をダウンロードします。

サイト上部の「DOWNLOAD」ボタンをクリックするとlightbox2-master.zipがダウンロードされますので解凍してください。
ダウンロードしたフォルダ内にはいくつかファイルがありますが、使用するのはdistフォルダ内の以下のファイルです。

  • cssフォルダ
    • lightbox.css
  • jsフォルダ
    • lightbox.js
  • imagesフォルダ
    • close.png
    • loading.gif
    • next.png
    • prev.png

cssフォルダにはlightbox.min.cssjsフォルダにはlightbox.min.jsという圧縮済みのファイルもそれぞれ入っていますのでカスタマイズせずにデフォルトのまま使う方はこちらでも大丈夫です。
それぞれのファイルをサーバーにアップしといてください。

HTMLを編集

サーバーへのアップロードが完了したら次はHTMLの編集です。
headタグ内の任意の場所に以下のコードを追加します。

各ファイルへのパスはサイトに合わせて適宜変更してください。

画像にリンクするaタグにrel=”rightbox”を追加

ファイルのアップロード、HTMLの編集が終わったら、次は画像にリンクするaタグにrel="rightbox"を追加します。
ところが、既存のaタグに一つ一つ追加していくのはかなりの労力なので、functions.phpに以下のコードを追加します。

これで完成です。
以下にサンプルとして画像リンク貼っときます。

よく見かけるやつですね。

参考にした記事

実装方法は上の記事で理解できたんですが、肝心のrel="lightbox"をどうやって過去記事にも追加するかが謎だったので実装していませんでした。
ところが、以下の記事を見つけたので一気に導入できました。

これで過去記事にもこれから書く記事にも画像リンクには自動的に付与されるのでとても便利です。

最後に

いかがでしたでしょうか。
できればグループ化も自動的にできればいいんですが、とりあえずやり方が分からないので今のところは後回しです(笑)
グループ化するにもグループ名をどうやって自動挿入するか、グループ名をどうするか、その辺がうまいことできればいいんでしょうけど今の私には皆目見当もつきません。
でも見つけたら実装したいですね。

advertisement

related posts

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

WordPressの内外部リンクについてショートコードを実装してみましたのでご紹介します。

WordPressにプラグインなしで色々と実装する方法

プラグインは便利ですけど重たくなる場合があるためできるだけそれに頼らずテーマ作成を行いました。

今日からまた、WordPress始めます。

心機一転、新たにブログを書き始めます。iPhoneを購入して一変した私の人生を記録していければと思っています。

初めての有料テーマ「ALBATROS」を購入しました!

初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。

jQueryを使って記事中の目次を開閉式にしました。

目次が開閉式だとどんなメリットがありますかね。表示領域が広がるくらいですか。

WordPressのテーマをカスタマイズするには子テーマを作成すべし!

色んな所で言われていることですが、少しでもカスタマイズするならやっぱり子テーマは作るべきですね、簡単ですし。

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。