Question

I am currently building a website that has certain images, when clicked will open up a movable pop up window like this here.

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

(go down to the bottom and click the (fire) button to test it)

The code and source files are available on the top page

Instead of the submit button, I set it to a image. That has been working great.

Now, here is my problem. I need this to be, when clicked depending on the image, it will show different images in the pop up window. But when I duplicated the code and pasted it elsewhere on the same page it seems that no matter what I do it just shows the very first image and it doesn’t change anything. Even when I changed the links to the image files. What exactly is wrong? why doesn’t my second window change and have the same images as the first one?

Detailed example of what I’m trying to do

1. Image one is clicked and shows red image with movable window.
2. Image two is clicked and shows blue image with movable window.

Answer 1

The link you showed us is very old. So it would be stupid to support your tasks, because much of the functionality is handled in other ways today.

You can use jQuery with jQueryUI to make something like you want. You can watch Demos there but yours could be easy done by making 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 watch your DEMO on JS Fiddle.​​

UPDATE:

More beautiful would be this solution on JS Fiddle

Because you select the functionality with a class and save the open dialog in a data-openid Attribute. Be sure to understand the first example, before you start this one 🙂 Also you have to know something about jQuery and CSS Selectors

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");
        });
    });
});