Open a window ontop of current browser to select an image

[james909]

When I click an image I am trying to get another window to open (500px by 500px) which can be scrolled down, that sits on top of the current browser screen, which displays multiple images (that are 50px by 50px), when one of these images is clicked it sets a javascript global variable in the current browser screen as that image name, and changes the image that was originally clicked in the current browser to the new image.

 

Can anyone supply any sample code of how I would achieve this

[kicken]

You'd be better off, and it'd be easier to code, using a div overlay as your window. There are a number of libraries out there to create modal dialogs using div overlays, jQuery UI's dialog is a common one and easy to use. Combine that with some ajax to load your image list and display it.

 

function promptForImage(cb){
   var dlg = $('<div>');
   dlg.on('click', 'img', function(e){
      cb(this.src);
      dlg.dialog('close');
   }).load('image_list.html').dialog({
      modal: true
      , width: 500
      , height: 500
      , autoOpen: true
   });
}

promptForImage(function(img){
   alert('You selected image: '+img);
});

Just as a sample. image_list.html would just be a page with a bunch of <img> tags. When an image is clicked it will show you the source of the image selected by using the callback function provided when calling promptForImage.