Implementación de código para imagen a tamaño original

[alfmar01]

Hola estimados,
con el código que expongo a continuación, cargo una serie de imagenes en un div determinado. Lo que quiero lograr, si es posible, es que cuando clique en cualquier imagen de esta serie, se expanda la img a su tamaño original.
Entiendo que, al ser cargadas mediante este código, sea complicado conseguir lo que expongo para realizar este zoom que necesito, pero el poder realizarlo sin necesidad de llamarlas con el típico "img src" y "a href" (lo que me condiciona a insertarlas manualmente), es algo que os agradería me pudíerais solucionar.
El código que tengo es:

<?php
$directory="imgFotos/";
$dirint = dir($directory);
while (($archivo = $dirint->read()) !== false)
{
if (preg_match("/gif/", $archivo) || preg_match("/jpg/", $archivo) || preg_match("/png/", $archivo)){
echo '<img src="'.$directory."/".$archivo.'" width="110px">'."\n";
}
}
$dirint->close();
?>

Saludos cordiales a todos los que con vuestro tiempo desinteresado, nos ayudais.

[Patriarka]

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:

<?
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:

JS
//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

[alfmar01]

Gracias por contestar tan rápido.
Podrías indicarme donde relaciono mi carpeta "imgFotos" dentro de este código para enrutar ubicación?.
Saludos.

[Patriarka]

a ver, esta linea tiene , en la imaginacion de muchos, una coleccion de imagenes:
$imagenes
cuando las itero puedo tenes el valor de sus campos
while($imagen = $imagenes->iterate())

cada imagen tendria esto:

$imagen[id] = 1;
$imagen[imagen_chica] = "chicas/foto1.png";
$imagen[imagen_grande] = "grandes/foto1.png";;

una cosa asi, yo te la hice con objetos pero si te queda mas facil con arrays hacelo con arrays

[alfmar01]

Requete agradezco su cortesía de nuevo.
Ocurre que no es lo que estoy buscando (seguramente mes explique mal), disculpas.
Tengo un formulario por el que me suben las imágenes todos los usuarios que lo deseen, y el cual me las inserta en una base de datos y al mismo tiempo en una carpeta llamada imgFotos de mi pc. Todo funciona perfectamente, pero lo quiero conseguir es que además (y con el código expuesto más arriba el cual me las inserta en un div de mi preferencia y diseño), al hacer click me las muestre a su tamaño original, cosa que no puedo conseguir dado la configuración del mismo (código). Mediante CSS es fácil realizar un zoom y dar otras características a las mismas, pero no logro implementar la o las líneas necesarias para este fin en cuestión. Es mi deseo no cargarme demasiado con mi interés, por lo que si he logrado que se me entienda mejor, reitero mis disculpas por mi anterior exposición.
Saludos cordiales.

[gldelossantos]

No te recomiendo esa forma ya que como dice patriarca consumiria mucho ancho de banda en la web, existen plugins que pueden hacerte ese trabajito..

aunque tambien puedes rediregir hacia la imagen..

solo basta con <a href='url de la imagen en grande'><img src='url imagen chica'/></a>