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のテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

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

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

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

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

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

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

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

WordPressのオリジナルテーマを自作しました。

テーマを変えたら自分でも作りたくなったので作ってみました。