[英]LightBox and Leaflet to create an image gallery
我目前正在嘗試實現一張地圖,其中充滿了生成的標記。 在標記的每個彈出框中都有一個圖像,並且在單擊時每個圖像將顯示在一個燈箱模式中。 有誰知道是否有可能將所有這些放在一起,因為目前我的圖像打開了一個模態但沒有鏈接到其他圖像。
為了調試,我在同一頁面中添加了圖像,這些圖像不在地圖上,而且似乎工作正常。
關於我如何使(jquery 和傳單(地圖)似乎有問題)工作的任何幫助。
我使用 jquery UI 的對話框創建了類似於燈箱的東西
請參閱此線程: 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.