Can I use this code to display two different windows?

Question

I am currently creating a website with specific images, when clicked, an open popup window similar to this one opens.

http://dhtmlpopups.webarticles.org/movable.php

(go down and press the (fire) button to check it)

Code and source files are available on the top page.

Instead of a submit button, I set it to an image. This works great.

Now here is my problem. I need it to be, when clicked depending on the image, it will display different images in a popup. But when I duplicated the code and pasted it in another place on the same page, it seems that no matter what I do, it just shows the very first image and does not change anything. Even when I changed the links to image files. What exactly is wrong? why is my second window unchanged and has the same images as the first?

A detailed example of what I'm trying to do

• An image of one is clicked and displays a red image with a moving window.
• Image two is clicked and displays a blue image with a moving window.

Answer 1

The link you showed us is very old. Therefore, it would be foolish to support your tasks, because today most functions are processed in other ways.

You can use jQuery with jQueryUI to do something like what you want. You can watch Demons, but yours can be easily made by doing this:

HTML

<div id="diag1"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div> <div id="diag2"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div> <img id="pic1" src="http://dummyimage.com/100&text=pic1"> <img id="pic2" src="http://dummyimage.com/100&text=pic2"> 

JavaScript:

 $().ready(function(){ $("#diag1").dialog({ autoOpen: false }); $("#diag2").dialog({ autoOpen: false }); $("#pic1").click(function(){ $("#diag1").dialog('open'); }); $("#pic2").click(function(){ $("#diag2").dialog('open'); }); }); 

Also see your DEMO on the JS script.

UPDATE:

More beautiful would be this solution on JS Fiddle

Since you select functionality with the class and save the open dialog in the data-openid . Be sure to check out the first example before you start this :) Also you need to learn something about jQuery and the CSS Selector

HTML:

 <div id="diag1" class="diagc"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div> <div id="diag2" class="diagc"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div> <div id="diag3" class="diagc"><img src="http://dummyimage.com/100/00ff00/FFFFFF&text=green"></div> <img class="picdiag" src="http://dummyimage.com/100&text=pic1" data-openid="diag1"> <img class="picdiag" src="http://dummyimage.com/100&text=pic2" data-openid="diag2"> <img class="picdiag" src="http://dummyimage.com/100&text=pic3" data-openid="diag3">​ 

JavaScript:

 $().ready(function(){ $(".diagc").each(function(){ $(this).dialog({ autoOpen: false }); }); $(".picdiag").each(function(){ $(this).click(function(){ $("#"+$(this).attr("data-openid")).dialog("open"); }); }); });