MS Access Tips/Sample and VBA and Blog customize etc...

jQuery FancyBox の最新版が出ていた

当ブログでは、サイトマップやメールフォームをポップアップ表示してますが、それは、jQuery の FancyBox というプラグインを利用しています。

ところが、IE8 ではなぜか、下図のように表示領域の高さが極端に小さくなると言う不具合がありました。これでは使い物にならないのでなんとかしたいと思っていましたが、ブログ再開でまずはこの不具合解消に取り組んでみました。

SiteMapのキャプチャ

FancyBox のサイトに行ってみると、最新版が11月に出ているではないですか。これにバージョンアップしたらひょっとして不具合も解消されるかもと期待して、さっそく導入してみました。

難易度:

下記のページから、ダウンロードしました。
Fancybox - Fancy lightbox alternative
現時点で、最新版は、Version: 1.3.4 (2010/11/11) です。

ダウンロードしたファイルを解凍して、できたfancyboxフォルダー内の画像ファイル, jsファイル, cssファイルを一式をブログにアップロードします。テンプレートの設定等は下記を参照してください。

SiteMapポップアップ表示 初級向け導入法

ただし、前回の設定のままでは、サイズがおかしくなります。いろいろ、調べてみると、ポップアップするボックスのサイズの指定が frameWidth, frameHight だったのですが、width, height に変更されているようでした。

そこで、テンプレートHTMLのスクリプトの記述を下記のように変更しました。

結果としては、表示範囲がせまくなるという不具合は、解消されました。

SiteMap不具合解消のキャプチャ

また、PageTopボタン(jQuery Scroll to Top Control)との相性も解消されるというおまけもついてきました。いままでは、FancyBoxでポップアップを表示させた後は、PageTopボタンが表示されなくなるという状態でしたが、問題なく表示されるようになります。


拍手する

4 Comments

Genzo says..."うまくいかない・・・orz"

いつも参考にさせてもらいながら
失敗に終わるGenzoです。

書いてあるとおりに記述してるつもりですが、
クリックしても反応が無かったりと悪戦苦闘中です(^^ゞ

すぐに編集できるHatenaさんに毎回脱帽です。

2010.12.20 22:00 | URL | #x9UxyK2Y [edit]
hatena says..."Re: うまくいかない・・・orz"

Genzoさん、おひさ~。

> 書いてあるとおりに記述してるつもりですが、
> クリックしても反応が無かったりと悪戦苦闘中です(^^ゞ

自作のテンプレートですよね。
共有テンプレートで公開してますか。
公開してないのなら、テンプレートのHTMLとCSSを送ってもらえたら、
設定してみますよ。

2010.12.21 09:59 | URL | #- [edit]
だらりん says..."動かない…"

はじめまして、カスタマイズを色々と参考にさせてもらっております。

サイトマップを作りたくて躓きました…。
設定が悪いのか、
同ページにサイトマップが出てきてしまい、
FancyBoxでポップアップを表示してくれません。

また、相性もわるいのかFancyBoxを入れると、
メニューのアコーディオンも動かなくなりました。

導入を諦めるしかないかも…。

2011.01.29 08:50 | URL | #y1erWbfc [edit]
だらりん says..."動かない…(解決)"

自己解決できました。

アコーディオンとの相性からか、
力量不足なのか、
やむを得ず外してみると動きました。

ありがとうございました。

Hatenaさんのカスタマイズを利用しながら、
自分好みに仕上げていくつもりです。

2011.02.01 06:52 | URL | #y1erWbfc [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/275-bc77fb72
該当の記事は見つかりませんでした。