2014年9月 Archive

fancyboxをもっとお洒落にする方法

jqueryのlightboxというと、
colorboxかfancyboxをよく使うのですが、
このfancybox、画像もHTMLも色々ポップアップできるし、サクサク動くし、設定もラクチンで大好きなのですが、
オリジナルデザインにカスタムしまくれちゃうってご存知でしたか?

ボタンや画像類は変えられるのは分かるけど、
枠のデザインまで好きにできるんですね!!


fanceboxの枠のID.jpg


ちょっと抜粋なので、そのまま使えなくて申し訳ないですが、
分かる方には分かるかと・・・(というより未来への自分へのメモだし)



/* 上 */
#fancy-bg-n {
    background-image: url('fancy-bg-n.png');
    background-repeat:repeat-x;
}
/* 右上 */
#fancy-bg-ne {
    background-image: url('fancy-bg-ne.png');
}
/* 右 */
#fancy-bg-e {
    background-image: url('fancy-bg-e.png');
    background-repeat:repeat-y;
}
/* 右下 */
#fancy-bg-se {
    background-image: url('fancy-bg-se.png');
}
/* 下 */
#fancy-bg-s {
    background-image: url('fancy-bg-s.png');
    background-repeat:repeat-x;
}
/* 左下 */
#fancy-bg-sw {
    background-image: url('fancy-bg-sw.png');
}
/* 左 */
#fancy-bg-w {
    background-image: url('fancy-bg-w.png');
    background-repeat:repeat-y;
}
/* 左上 */
#fancy-bg-nw {
    background-image: url('fancy-bg-nw.png');
}


上、下、右、左と、その四隅にみんなIDがついてるんですね。

それぞれに背景画像を指定してやれば、

 ↓ こんな感じで、額縁のようなデザインも可能になっちゃうのです。


fanceboxの枠改修後.jpg


ちなみに、IEは8以下で、画像が表示されないバグがあるので、
ハックとして、

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xxxxxxx/fancy-bg-n.png', sizingMethod='scale');

↑ こんな風に絶対パスが書き加えないといけないのですけどね。
テスト機と本番機で書きえたり、面倒だけど。。。
IE6、7はだいぶ除外されてきてるので、8さえどけば・・・!!!ですね(-_^)

1