Блина запутался, сначала, с html и css хорошо разбираюсь но javascript вообще никак.

1 вариант

Этот скрипт при щелчке на превью открывает изображение в popup окне, если в теге <a> параметру class присвоено значение popup

<a href="img1.jpg" class="popup"><img src="prev/img1.jpg"></a>

document.onclick = function(e) {
  e = e || event;
  var t = e.target || e.srcElement;
  while (t && t.nodeType == 1 && t.tagName.toLowerCase() != 'a')
     t = t.parentNode;
 
  if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {
    window.open(t.href,'…','…');
    return false;
  }
  return true;
}

[hr]

2 вариант

А этот дает возможность открывать popup окно того же разрешения, что и открываемое изображение (ну если все изображения разного разрешения)

<A HREF="javascript:CaricaFoto('lg-1.gif')"><IMG SRC="1.gif"></A>

function CaricaFoto(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}

я бы конечно использовал второй вариант, но там javascript прям в href, по моему не откроется если у кого не будет включен javascript и прописывать каждое изображение нужно ('lg-1.gif'), первый вариант с присваивание просто класса намного проще, но он открывает окно на весь экран, что смотрится очень убого, как эти два скрипта правильно объединить или что дописать в первый вариант?