LightBox and Leaflet to create an image gallery

Question

I am currently trying to implement a map, full of markers which are generated. In each of the popup box of the marker is an image, and each image when onclick will be shown in a Lightbox modal. Does anyone know if it possible to all of these together as at the moment my image opens a modal but with not links to other images.

In an effort to debug i have added images in the same page, that are not on the map and it seems to work fine.

Any help on how i could make (what seems to be a problem with the jquery and leaflet(maps)) work.

Answer 1

I've created something simular to a lightbox using jquery UI's dialogbox

See this thread: 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);