LightBox和Leaflet创建一个图库

时间:2014-04-03 23:04:44

标签: javascript jquery google-maps lightbox leaflet

我目前正在尝试实施一个地图,其中包含生成的标记。在标记的每个弹出框中都有一个图像,每个图像在onclick时都会以Lightbox模式显示。有没有人知道所有这些是否可能在我的图像打开模态但没有链接到其他图像的那一刻。

为了调试我在同一页面添加了图片,这些图片不在地图上,似乎工作正常。

有关我如何制作的任何帮助(jquery和传单(地图)似乎有问题)工作。

1 个答案:

答案 0 :(得分:0)

我使用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);