こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。
カスタマイズ第2弾はプラグインではなくて
通常のjQueryライブラリをカスタマイズしたいと思います。
施工事例やギャラリーなどをライトボックスを使って表示している方も多いと思います。
クリックして拡大するライブラリとしてLightboxは有名ですよね…?
そのライトボックスに、透かしとしてBefore/Afterの文字をいれたいというご要望を1年前くらいにいただいたのでご紹介いたします。
もちろん画像のタイトルに文字をいれたら反映されるのがすでに実装されているのですが、小さいし画像の外だし、思っているのと違うかもということで今回はCSSとjsを書き換えました。
目指すは上の状態です。
文字が一つだけであればライトボックス全体を囲った塊に絶対位置指定ができて楽なのですが、今回はあくまでも画像ごとに文字を変えるこという点にも着目しました。
詳しくはこちらで紹介しておりますので
ぜひご確認ください。