サポート » プラグイン » Lightbox2 がクリッカブルマップで動かない

  • 解決済 yann_anemo

    (@yann_anemo)


    試行錯誤のうえ自己解決できなかったのでどうかお力をお貸しください。

    http://kidscafe-isumi.com/test

    上記テストページのimgファイルはクリックするとポップアップしますが、店内マップのカメラのマークをクリックするとポップアップではなくHTMLで画像が表示されます。

    環境は
    WordPress 3.2.1
    Lightbox 2.9.2
    Lightboxのオプションは両方チェック入れてます。

    Google検索で「wordpress lightbox クリッカブルマップ」や「wordpress lightbox イメージマップ」の結果サイトを確認し、jsファイルのrelをlangに変更したり、Lightbox Plusを試したりしましたが変化なし。
    IE9、chrome、safariでも同じ挙動。
    一瞬画面が黒く(背景は黒の設定)なるんですが、やはりポップアップせず。

    ソースを確認すると、手動で「rel=”lightbox”」を入力したリンクは
    <area rel="lightbox" shape="rect" coords="197,139,237,167" href="http://kidscafe-isumi.com/images/map3.jpg" />
    ですが、自動で挿入させると
    <area shape="rect" coords="331,99,368,127" href="http://kidscafe-isumi.com/images/babyroom.jpg" / rel="lightbox[407]">
    みたいな感じで最後のスラッシュの後に追加されます。

    Lightbox2を再インストールしようと思いましたが、プラグインを検索してもLightbox2が見当たりません。

    他の画像のようにクリッカブルマップでも画像をポップアップしたいのです。
    他のプラグインでもいいのですが、Lightbox 2 OptionsのAuto-lightbox image linksとShrink large images to fit smaller screens機能も欲しいのです。

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

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック投稿者 yann_anemo

    (@yann_anemo)

    追記です。
    試行錯誤を続けていて、
    http://www.kxh-web.com/web/javascript/453
    このサイトから「jQuery LightBox Plugin」なら実現可能なのかとも思いながらWP用ではないし、現在は「WP jQuery Lightbox」というプラグインを有効化していろいろ試しています。

    Lightbox風にイメージマップでも拡大してポップアップできればどのプラグインでもいいのです。
    実装したいのは1つの画像だけなので、そこだけ何か違うプラグインを適用とかでもいいような・・・迷走中です。

    どなたかお知恵をお貸しください。
    よろしくお願い致します。

    実装したいのが一つの画像だけなのでしたら、Lightbox Plusを利用し、目的の画像だけ手動でクラス名を付与してはどうでしょうか?
     
    http://www.shappa.jp/wordpress/225/

    「Primary Lightbox – Other Settings:」の中の、「Use Class Method」にチェックを入れ、自動で動かないように「Do Not Auto-Lightbox Images」にチェックする。これで「class=”cboxModal”」と指定したものだけ機能する。

    トピック投稿者 yann_anemo

    (@yann_anemo)

    popupさん、ありがとうございます。

    すでに教えていただいたサイトの方法も試してみたんですが、うまくいかなかったんです。
    でも今回もう一度試してソースを見たら、ダブルクオテーションが全角だったみたいです。
    そのサイトの記述をコピペしてしまったのが敗因のようです。

    ちゃんとポップアップできるようになってうれしいです。
    見直すきっかけをくださり、ありがとうございました!

    トピック投稿者 yann_anemo

    (@yann_anemo)

    新規で質問すべきか迷いますが、続きで質問させてください。

    Lightbox Plusで実装できましたが、そのウィンドウを閉じても背景が黒いまま残ってる感じになり、もう一度ページのどこかをクリックしないと解除されません。
    Lightbox2も実装しているので、競合かなにか起こしているのでしょうか。

    設定をいろいろ変更してみましたが回避策が見つかりません。
    どうかよろしくお願いします。

    分かる方が回答すると思いますので、新規トピックを作成して質問するようにしてください。
     
    こちらではLightbox Plusのウィンドウを閉じた時に背景が残る現象は発生していません。
    IE9、Google Chrome 18で核にしました。(Lightbox2は未使用です。)
    Lightbox2を停止した場合はどうなりますか?
    問題が発生するブラウザも記載して新規に質問してみてください。

    トピック投稿者 yann_anemo

    (@yann_anemo)

    popupさん、ありがとうございます。

    Lightbox2を停止したら解決しました。
    質問の内容が元に戻ってしまったのでこのまま質問させていただきます。
    ちなみに使用しているブラウザはFirefox7.0.1で、IE9でも確認しました。

    ここでどうするべきか迷ってしまいましたが、Lightbox2のLightbox 2 Optionsの「Auto-lightbox image links」と「Shrink large images to fit smaller screens」機能を今後も投稿記事などに使っていきたいのですが、そうすると店内マップのリンク部分に「rel=”lightbox”」が自動的に挿入されてしまい、ウィンドウを閉じても背景が黒いまま残ってしまうというのが現状です。

    Lightbox Plusで「Shrink large images to fit smaller screens」機能が実装できれば
    Lightbox Plusだけを使用しようかとも思います。
    もしくは「Shrink large images to fit smaller screens」機能をあきらめてLightbox Plusを使用するしかないのでしょうか。
    記事を携帯から投稿しているので、できればサイズは自動でリザイズしてほしいのです。

    わがままな質問でごめんなさい。
    どうぞよろしくお願いします。

    クリッカブルマップを行うページだけLightbox Plusを利用して、Lightbox2を無効にするのはいかがでしょう?
     

    function my_scripts_method() {
    	if(is_page('ページのIDまたはタイトルまたはスラッグ')) {
    		wp_deregister_script( 'lightbox' );
    	}
    }
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

     
    すべての固定ページでLightbox2を無効にしてもいい場合はis_page()とだけします。
    条件分岐タグ WordPress ページ – Codex 日本語版
    http://codex.wordpress.org/Function_Reference/wp_deregister_script
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    トピック投稿者 yann_anemo

    (@yann_anemo)

    popupさん、ありがとうございます!

    私には思いつかない方法です。試してみてうまくいきましたが、あと1つ問題が残ってしまいました。

    このtestページは最終的にトップページにする予定なのですが、メインの記事が3つに分かれていて、1番上はメッセージ、2番目はクリッカブルマップを使った店内マップ、そして最後にブログ記事の最新記事を1つ載せています。

    そのトップページで表示されるブログ記事にだけclass=”cboxModal”を追加するようなことは不可能でしょうか。
    もしくはすべての投稿記事にclass=”cboxModal”を追加して、lightbox plusをトップページ以外で無効にするほうがスマートでしょうか。

    あともう少しで希望通りの挙動をしてくれそうです。
    何度もお手数をおかけしますが、そうぞよろしくお願いします。

    トピック投稿者 yann_anemo

    (@yann_anemo)

    トップページに1件だけ載せるブログの最新記事の写真にだけclass=”cboxModal”を追加する方法がわからなかったので、トップページには写真なしの最新記事5件を表示させることで自己完結しました。

    また勉強してから挑戦したいと思います。
    貴重なご意見をくださったpopupさん、ありがとうございました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「Lightbox2 がクリッカブルマップで動かない」には新たに返信することはできません。