ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

0518

20165/18

『Lightbox』に画像ごとに違うテキストを乗せる

画像をクリックして拡大表示するライブラリとして有名な『Lightbox』。
施工実績などで画像を一覧で並べて、クリックで拡大をするというサイトも多いはず。そんな中で、画像の上にBefore/Afterの文字をのせてほしいという声を聞いたので今回はLightboxの上に文字を乗せるカスタマイズを行いました。

Lightboxを準備する。

Lightboxのカスタマイズなのですでに導入済みであることを前提に進めさせていただきます。
まだ設置していないよという方はLightboxのページからダウンロードして
サーバーにアップロード、headerにパスを記述して読み込んでください。

今回やりたいこと

asda-2

このように、ページを移動すると違う文字を上に乗せるというもの。
画像にタイトルを指定すれば文字が入るのは入るのですが、このように大きく透かしをいれたい…ということでjsファイルを直接触っていきます。

①light.cssに追加します。

/* 追加 */
.lb-container {position:rerative;}
.ligntbox_intxt {
        position:absolute;
        bottom:20px;
        left:20px;
        color:#FFF;
        font-size:30px;
        font-weight:bold;
}

ライトボックスのCSSにこちらを追記してください。クラス名は任意です。後でjsファイルに付け加えるので忘れないようにしましょう。

②lightbox.js を書き換える。

61行目付近の<div>などを吐き出す記述がされているところをを以下のソースに置き換えます。
おそらくダウンロードしているバージョンによって行数などがバラバラなので特定のクラス名を見つけてエディタで検索を掛けた方がはやいと思います。

※<p class=’ligntbox_intxt’></p>を追加しただけですのでわかる方はコピペより自分で追加したほうがいいかもしれません。

 $("
").appendTo($('body'));

③lightbox.jsに以下を付け加える。

表示する文字を出力するためのコードを追加します。
記述する順番は関係ないと思いますが、どの関数の中に書くかは大切だと思うので他にページ数などを表示している付近に書き加えてください。
.lb-numberの中身を設定しているあたりで大丈夫だと思います。(340行目付近)

        if (this.album.length > 1 && this.options.showImageNumberLabel) {
                if(this.currentImageIndex + 1 > 1 ) {
                        this.$lightbox.find('.ligntbox_intxt').text('After').fadeIn('fast');
                } else {
                        this.$lightbox.find('.ligntbox_intxt').text('Before').fadeIn('fast');
                }
      } else {
        this.$lightbox.find('.ligntbox_intxt').hide();
      }

this.currentImageIndex + 1 > [ページ数-1] で表示したいページ数を指定しています。

以上です。試すのはバックアップをとった後、自己責任でお願い致します。

  • このエントリーをはてなブックマークに追加

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

a

201710/24

プラグインを使わない絞り込み機能【未選択時はすべて表示したい】

Wordpressの検索機能について チェックボックスに1つもチェックをいれなかったら 絞り込まずに全部表示。 「絞り込みの入…

av

Welcartのカテゴリー管理・新規登録ページをカスタマイズする

ECサイトをWordpressで運用するときに使われる『Welcart』というプラグイン。 私はこのプラグインが使いにくくて仕方がないです…

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

ページ上部へ戻る