simplemente tenes que ocultar las imagenes, y mostrarlas cuando es necesario con javascrpt.
aun que es una tecnica muy mala ocultar una imagen grande por que consume muchos recursos cuando cargas la pagina.
la tecnica de ocultacion que uso yo es la siguiente:
Código PHP:
Ver original<?
while($imagen = $imagenes->iterate()){ ?>
<img src="<?= $imagen->imagen_chica ?>" id="imagen_id_<?= $imagen->imagen_id ?>" />
<input type="hidden" name="img_grande" value="<?= $imagen->imagen_grande ?>" id="hidden_id_<?= $imagen->imagen_id ?>" />
<? } ?>
Código Javascript
:
Ver originalJS
//cuando hago click en un boton "ver imagen grande" por ejemplo ejecuto esta funcion:
function cambiaImagen(id_imagen){
document.getElementById("imagen_id_"+id_imagen).src = document.getElementById("hidden_id_"+id_imagen).value;
}
con esto te evitas una recarga importante si tenes que cargar muchas imagenes,
lo podes mejorar agregando una bandera indicando que la imagen grande que se cargo una vez ya no tiene que cargarse otra vez