4

私は現在、openlayers を広く使用する Web サイトを設計しています。マップにはさまざまなベクター マーカーが配置されており、ユーザーがマーカーをクリックするとポップアップが表示されます。このポップアップ内には、ライトボックス用に設定された画像がいくつかあります。唯一の問題は、サムネイルをクリックすると画像が新しいウィンドウで開くことです (つまり、リンクのライトボックスによるイベント認識がありませんでした)。ポップアップの外でテストしたので、ライトボックスの html はまったく問題ありません。

ポップアップでライトボックスが機能するようにしたいと思います。どんな助けでも大歓迎です。これが私のコードです：

作成されたポップアップ:

function onFeatureSelect(feature) {
    selectedFeature = feature;
    popup = new OpenLayers.Popup.AnchoredBubble("PopUp", 
                    feature.geometry.getBounds().getCenterLonLat(),
                    null,
                    null,
                    null, true, onPopupClose);
    popup.setContentHTML('<div><a  href="large_image.png" rel="lightbox"><img src="thumb_image.png" /></a></div>');
    feature.popup = popup;

    map.addPopup(popup);
}

Lightbox.jsクリックリスニングに関する抜粋：

updateImageList: function() {   
    this.updateImageList = Prototype.emptyFunction;
    document.observe('click', (function(event){
        var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
        if (target) {
            event.stop();
            this.start(target);
        }
    }).bind(this));
},

読んでくれてありがとう。どんな助けでも大歓迎です。

4

2 に答える 2

0

現在プロジェクトにjqueryがないため、Lightbox2への切り替えは機能しません...ここでは、Openlayers 2.13.1でjqueryを導入する手順を示します

まず、ライトボックスを手動で初期化します。body タグの特定の onload 関数が、lightbox.js の標準の初期化を上書きしているようです

function initMap() {
    // manually call the init function from lightbox.js
    if (initLightbox)
        initLightbox();
...

次のステップは、手動で onclick 関数を画像のサムに追加することです。通常はライトボックスがこれを行いますが、フィーチャー シンボルをクリックすると、ポップアップ コンテンツが動的に読み込まれます。画像リンクは次のようになります

<a class="doc" href="/path_to_pic/util/docklein/sample.jpg" rel="lightbox"
            onclick="showLightbox(this); return false;">
    <img src="/path_to_pic/util/docpreview/sample.jpg"/>
</a>

これが変更された後、画像の読み込みが機能するはずです。残念ながら、写真は地図の後ろに表示されています。css を変更するだけで、この問題は解決します。

#overlay {
    z-index: 1100 ! important;
}

#lightbox {
    z-index: 1101 ! important;
}

それが誰かに役立つことを願っています:-D

于 2014-07-08T08:54:13.447 に答える