LightBox和Leaflet創建圖片庫

Question

我目前正在嘗試實現一張地圖，其中包含所有生成的標記。在標記的每個彈出框中都有一個圖像，而每個onclick圖像將以燈箱模式顯示。有沒有人知道是否可以將所有這些結合在一起，因爲此刻我的圖像打開了一個模式，但沒有鏈接到其他圖像。

在努力調試我已添加圖像在同一頁面，這是不是在地圖上，它似乎工作正常。

任何幫助，我怎麼可以（這似乎是一個問題，jQuery和傳單（地圖））的工作。

Answer 1

我創建的東西simular使用jQuery用戶界面的對話框燈箱

看到這個線程：https://stackoverflow.com/a/24190496/3679978

的jsfiddle： http://jsfiddle.net/8Lnt4/52/

//Creates the div element in jQuery 
var container = $('<div/>'); 


// Creates a variable holding html string to go in above container 
// Note I made the same image thats going to be enlarged into a smaller 120x90 thumbnail 
var tempimg = '<div id="dialog" style="display: none;"><img id="image" src=""/></div><div class="myImage"><img src="http://www.w3schools.com/images/pulpit.jpg" alt="myimage" width="120" height="90"/></div> Click to enlarge'; 


// Upon clicking the .myImage Class in the container (which is the thumbnail) Open a jQueryUI Dialog... 
container.on('click', '.myImage', function() { $('#dialog').dialog(
//...which upon when it's opened... 
    {open: function(){ 
///... assign a variable that can acess the div id 'image'... 
    imageTag = $('#image'); 
///... and set the image src in #image (note that it'll be the fullsize this time)... 
    imageTag.attr("src","http://www.w3schools.com/images/pulpit.jpg"); 
},closeOnEscape: true, modal:true}); 
}); 

container.html(tempimg);