jQuery BoxerというLightBoxについて

いつもありがとうございます。

早速ですが、表題のとおり【JQuery】のBoxerというプラグインについて質問となります。

現在、HTMLで自前のWeページを作成しているのですが、少し動的な要素を付け加えてみようと
当スクリプトをダウンロードして実装してみました。

実際にPCで画像を拡大したところ、基本動作としては特に問題はないようなのですが
ポップアップされる画像がどうしても縦長（ブラウザの画面MAX）で横幅が極端に狭いレイアウトで
表示され、レイアウトが崩れてしまいます。

指定する画像のサイズ自体を変更してみたりと、CSS・JSを変更せずに対処できないかと
試行錯誤していますが、特に変化がなく原因がわかりません。
※画像サイズを小さくしていくことで、縦・横の比率は適切に表示されるようになりますが
　結果的に、表示される画像自体が小さくなってしまいます。

いろいろと評価した結果、画面サイズが異なるモバイル（タブレット・スマホ）であれば
レイアウトが崩れることなく表示されることから、PCで表示するページサイズが原因かとも
考えておりますが、根本的な原因解決には至っておりません。
実際にブラウザの表示を100％→65％に変更したところ、正常に表示されることを確認していますが

何かCSS・JSで指定できるような設定項目があればご教示頂きたいと考えております。


以上です。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2018/05/23 17:43

こんにちは

直接の回答ではありませんが、何かの参考にでもなれば程度で…

Boxerって知りませんでしたが、ココ（↓）の設置例でも（多分）ご質問と同じような事象が発生しているようです。
http://web-pixy.com/jquery-plugin-boxer/

観察してみると、拡大表示した状態でリサイズイベントを発生させると、正規のサイズになるようです。（画面サイズをちょっとだけ動かせば反応します）
以後は、正しく表示されるようです。

推測ですが、画面サイズか画像サイズの取得がうまくいっておらず、イベント発生で再度取得し直すことで正しく計算できているのではないかと思います。
リサイズイベントなので画像サイズの取得のように思えますが、いろいろいじってみると（多分）画像サイズの取得に失敗しているのではないかという気がします。

一方で、こちら（↓）のデモではそのような事象は発生していないようです。
https://www.jqueryscript.net/demo/Quick-Simple-L …

設置方法の違いを細部まで見てはいませんが、それぞれで、jQueryおよび Boxerのバージョンが違いますので、組み合わせによるものか、あるいはBoxerのあるバージョンに不具合があるのかも知れません。
（Boxerはもうメンテナンスはしていないようです）

例に挙げた前者は
　jQuery　v1.11.1　　Boxer　ｖ3.3.0
後者は
　jQuery　v1.10.2　　Boxer　ｖ1.10.3
のようです。

何かのご参考になれば・・・

※ どのような利用法をなさっているのかわかりませんが、通常の（一般的な）利用法であれば、同様のライブラリがたくさんあると思いますので、Boxerに固執せずに乗り換えてしまうのもひとつの手段だとは思います。

この回答へのお礼

御礼が遅くなってしまい申し訳ございません。
ご丁寧にご案内頂き、大変助かります。

>観察してみると、拡大表示した状態でリサイズイベントを発生させると、正規のサイズになるようです。（画面サイズをちょっとだけ動かせば反応します）
>以後は、正しく表示されるようです

　仰せの通り、一度ブラウザの画面サイズを「70％」程度までに落としてみると、ポップアップの画像も正しく表示されました。
　自身の環境だけであれば、これで”解決”となるのですが、社内イントラに公開している為、社員全員に対して同じ対処が必要となりそうです。。

一度ご案内頂いたサイトで事例を確認してみて、解決しなさそうであればご教示頂いたとおり
別のライブラリ？を試してみるべきかとも考えております。。
※タブレット・スマホなどでは画面サイズに合わせてキレイに表示されているので、残念ではありますが。。
やはり、jQueryなどの知識がないもので、意図しないことが起きた場合は対処が追い付かないです。

重ねてとなり大変厚かましいのですが、同じように、画像ポップアップでおススメされるプラグインなどがあれば
ご紹介頂けませんでしょうか。

まずは、御礼のご連絡とさせて頂きます。

以上、どうぞよろしくお願い致します。

お礼日時：2018/05/30 19:45