読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

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

Web Web-ホームページ制作

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

ページトップ