建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

建設現場に大型LEDビジョンや液晶ディスプレイで現場のICT化を促進する提案を行うヤマト広告公式ブログ

ヤマト広告公式ブログ
大型LEDビジョンモニたろうや液晶モニターモニすけなど
デジタルサイネージ提案で建設現場のICT化を促進します!

『Lightbox』の上に透かし文字をいれるカスタマイズ

f:id:yamato-ugaki:20160518214404j:plain

こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。

カスタマイズ第2弾はプラグインではなくて
通常のjQueryライブラリをカスタマイズしたいと思います。


施工事例やギャラリーなどをライトボックスを使って表示している方も多いと思います。
クリックして拡大するライブラリとしてLightboxは有名ですよね…?

f:id:yamato-ugaki:20160518214050g:plain



そのライトボックスに、透かしとしてBefore/Afterの文字をいれたいというご要望を1年前くらいにいただいたのでご紹介いたします。

もちろん画像のタイトルに文字をいれたら反映されるのがすでに実装されているのですが、小さいし画像の外だし、思っているのと違うかもということで今回はCSSとjsを書き換えました。



f:id:yamato-ugaki:20160518214352g:plain

目指すは上の状態です。
文字が一つだけであればライトボックス全体を囲った塊に絶対位置指定ができて楽なのですが、今回はあくまでも画像ごとに文字を変えるこという点にも着目しました。

詳しくはこちらで紹介しておりますので
ぜひご確認ください。

wp-notebook.com

ページトップ