Модальные окна в цикле

[L6go1as]

Уважаемые, подскажите, как сделать для циклов модальное окно.

Код следующий:

<script>
$(document).ready(function()
{
	var docWidth = ($(document).width() - 1024) / 2;
	var docHeight = ($(document).height() / 100) * 2;

	$("#thumbpic").click(function()//Открываем 
	{
		$("#modal_backlayer").css({'display': 'block'});
		$("#modal_image").css({'left': docWidth, 'top': docHeight, 'display': 'block'});
	});

	$("#modal_backlayer").click(function()//Закрываем
	{
		$(this).fadeOut(100);
		$("#modal_image").css({'display':'none'});
	});
});
</script>

Сами картинки выдаю в цикле:

?><img id = "thumbpic" src="<?=$img['src']?>" width = <?=$img['width'];?> height = <?=$img['height'];?>><?
?><img id = "modal_image" src="<?=$big_img?>" width = 1024 height = 576><?

Заряжаю массив из 10 элементов.
Рисую маленькие, кликабельные картинки (thumbpic).
А следом большие (modal_image).

Возникает следующая проблема: в модальном окне лишь первая картинка работает из 10.

В чем может быть проблема ? В какую сторону копать ?

[L6go1as]

Я конечно могу предположить, что браузер не понимаю какую большую картинку в окне открывать, но почему тогда не выводит скажем только первую, но везде ?
А получается, работает лишь первая картинка, а остальные отваливаются ...

[lomastr_]

где тут цикл, где картинки где что?

[L6go1as]

Сообщение от lomastr_

где тут цикл, где картинки где что?

вот тут цикл, там же и картинки:

?><img id = "thumbpic" src="<?=$img['src']?>" width = <?=$img['width'];?> height = <?=$img['height'];?>><?
?><img id = "modal_image" src="<?=$big_img?>" width = 1024 height = 576><?

[L6go1as]

Проблему решил.

Рабочий код:

<script>
$(document).ready(function()
{
	var docWidth = ($(document).width() - 1024) / 2;
	var docHeight = ($(document).height() / 100) * 2;
	var open_modal = $('.open_modal'); <- Новое

	open_modal.click(function(event)//Открываем  <- Новое
	{
		event.preventDefault(); <- Новое
		var div = $(this).attr('href'); <- Новое
		$("#modal_backlayer").css({'display': 'block'});
		$(div).css({'left': docWidth, 'top': docHeight, 'display': 'block'}); <- Новое
	});

	$("#modal_backlayer").click(function()//Закрываем
	{
		$(this).fadeOut(100);
		$(".modal_image").css({'display':'none'});
	});
});
</script>

Цикл:

?>
<a href = "#id<?=$counter?>" class = "open_modal"><img src="<?=$img['src']?>" width = <?=$img['width'];?> height = <?=$img['height'];?>></a>
<img id = "id<?=$counter?>" class = "modal_image" src="<?=$big_img?>" width = 1024 height = 576>
<?
$counter++;

Увы, без контроллов, но над этим буду работать )

[lomastr_]

тут никакого цикла нет, есть серверный код никакого отношения к вопросу не имеющий