Image Display

[PeterWaij]

I hope somone can help me. I made a page and used jquery for a popup page. In the popup page i have 15 images. I want the user to select a image and once the image is clicked it must be displayed on the main page. I have tried this script but can't get my image to display:
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return;
}
</script>

[Airshow]

Peter,

There's no unique solution.

I would handle this with two functions; one in the popup and one in the main window:

In Popup:

function selectImage(imgURL){
	if(confirm('Show ' + imgURL + ' in the main window?')){//optional confirm; delete if not requied
		opener.displayImage(imgURL);
	}
}

In main window:

function displayImage(imgURL){
	var imageDiv = document.getElementById('myImageDiv');
	var img = document.createElement('img');
	imageDiv.appendChild(img);
	img.src = imgURL;
}

HTML in the popup would look something like this (at its simplest):

<img src="image_dir/image_1.jpg" onclick="selectImage(this.src);">
<img src="image_dir/image_2.jpg" onclick="selectImage(this.src);">
<img src="image_dir/image_3.jpg" onclick="selectImage(this.src);">
<img src="image_dir/image_4.jpg" onclick="selectImage(this.src);">
<img src="image_dir/image_5.jpg" onclick="selectImage(this.src);">
<!-- etc -->

Though it's better practice to attach the onclick handlers in javascript, in a window.onload function.

Airshow

[PeterWaij]

Thank you for the code. I will give it a try and let you know.

[PeterWaij]

Hi Airshow,

I have tried the code and it is going in the right direction. Once i click on the image i get a message "Do you want to display the image on the main page" If i click ok the message disappear and the popup stays open.

[Airshow]

If i click ok the message disappear and the popup stays open.

That's good. It is behaving as I intended (without testing!).

If you want the window to close automatically after an image is selected, then add self.close() inside the confirm block.

You might also like to add a "Close" button at bottom of the popup page:

<button onclick="self.close()">Close</button>

User interfaces always take time to develop. You will probably need to play around with ideas before coming up with something satisfactory.

Airshow

[PeterWaij]

Airshow,
Thanks a million for your help. Thanks to your code i could solved this. I did use another code for this.

$(document).ready(function() {
     $('#thumbnails a').click(function() {
        var img = $(this).find('img');
        $('#image-to-switch').attr('src', img.attr('src'));
        return false;
     });
});

I still trying to close my popup. I do have a close button, but what i would like to do is as soon as a image is clicked i want the popup closed. I know there is a script for this, but don't know how. Can you please assist me with this.

[Airshow]

Peter,

From the code it looks like you are using a popup div (or similar) and not a window opened with window.open(...) .

If that is the case, you can close (hide) the popup by inserting on of the following lines above return false; :

$('#my_popup').hide();//hides immediately
$('#my_popup').hide('fast');//hides fast (200ms)
$('#my_popup').hide('slow');//hides slowly (600 ms)

Replace my_popup with the id of your popup (div?) container.

(If I'm wrong, and you are using window.open() , then insert self.close() at the same point above return false; ).

Airshow

[PeterWaij]

Hi Airshow,

Thanks a million for your help. This was what i was looking for.

[JCWD]

Hi Peter,

I have facing same problem as you have (actually you have solved). Can you please send me your solved example files.

Thanks

[PeterWaij]

Hi JCWD,

I have changed the code to how i want it to work. Can you tell me what you are trying then i can sent you what you need.

Peter

[JCWD]

Hi JCWD,

I have changed the code to how i want it to work. Can you tell me what you are trying then i can sent you what you need.

Peter

Hi Peter,

No problem. I have worked on your above code reference and i have solved the problem as i want to show image.

Thanx...