Открытие нескольких изображений в одном окне и открытие нескольких таких типов окон

Question

Я новичок в html и javascript. Я работаю над веб-интерфейсом, где у меня есть много данных для показа на веб-странице. Я показываю его в таблице. Теперь для каждой строки у меня есть 2 изображения для отображения. Я хочу создать одну ссылку в каждой строке, которая откроет новое окно и покажет оба изображения. А также, когда я нажимаю на другие ссылки в других строках, они также должны открываться с открывшимся предыдущим окном.

Вот что я делаю:

for ($i=0;$i<$total_images;$i++){ 
    <tr><td><a href=\"JavaScript:newPopup('/var/www/html/images/imga$i.png','/var/www/html/images/imgb$i.png');\">Open Images with Link $i</a><td></tr> 
} 

и вот код JavaScript

function newPopup(url1,url2) { 
    popupWindow = window.open(url1,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') 
    popupWindow = window.open(url2,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') 
} 

Проблема, которую я имею, что это открытие только второе изображение не оба изображения и Мне нужно закрыть предыдущее окно для открытия нового.

Пожалуйста, сообщите мне, какую ошибку я делаю или какие изменения мне нужно сделать в коде для решения обеих проблем.

Answer 1

Вы используете popUpWindow в качестве справочника для обоих.

Это означает, что 2-й вызов window.open не откроет новое окно, но будет использовать уже существующий.

Дайте им различные refences, например ...

function newPopup(url1,url2) { 
    popupWindow1 = window.open(url1,'popUpWindow1',...); 
    popupWindow2 = window.open(url2,'popUpWindow2',...); 
} 

---

Кроме того, из-за замечаний ОП, если вы всегда хотите новое окно используйте _blank в качестве ссылки. ..

window.open(url1,'_blank',...); 

Answer 2

Вы можете открыть оба адреса в одном окне так же легко, как:

function newPopup(url1,url2){ 
        var contents = '<img src="' + url1+ '"></img>' + '<img src="' + url2+ '"></img>' ; 
        var previewWindow = window.open('','Preview','',''); 
        previewWindow.document.body.innerHTML = contents; 
       }