cargar pagina dentro de mi home

[djaevi]

Te recomendaria que tengas un div aparte que sea para las descripciones entonces al clickear tu imagen lo haces aparecer con el metodo fadeIn() de jquery x ejemplo:

Supongamos que estos son tus divs que muestran las fotos

Código HTML:

<div class="imagenMini" onclick="info('celeste')"><img src='celeste.jpg'></div>
<div class="imagenMini" onclick="info('negro')"><img src='negro.jpg'></div> 
<div class="imagenMini" onclick="info('rosa')"><img src='rosa.jpg'></div>
<div class="imagenMini" onclick="info('verde')"><img src='verde.jpg'></div> 
<div class="imagenMini" onclick="info('azul')"><img src='azul.jpg'></div>
<div class="imagenMini" onclick="info('blanco')"><img src='blanco.jpg'></div>
 

Ahora supongamos que ademas tengas un div con la misma clase (tamaño etc) pero sin la imagen dentro porque lo usaras solo para texto y por defecto lo pondras oculto, ademas deberas agregarle un id para llamarlo desde jquery:

Código HTML:

<div class="imagenMini" id="divOculto" style="display:none;"></div>
 

Entonces ahora esta seria la funcion info de javascript que recuerda iria entre las etiquetas head

Código Javascript:

function info(color) {
    $.ajax({
        method:"POST",
        url:"tu_archivo_conectado_a_base_de_datos",
        data:{color:color},
        success:function(resp) {
            $("#divOculto").fadeOut("slow");
            $("#divOculto").html(resp);
            $("#divOculto").fadeIn("slow");
        }
    })
}
 

Esta funcion lo que haria es enviar el color seleccionado a un archivo que procese la peticion a una base de datos (PHP,ASP el que uses) y devuelva el mensaje (variable resp) entonces una vez hecho esto simplemente haces primero un fadeOut (ocultar div, si es la primera vez que el usuario pincha no interesa porque si el div esta oculto simplemente lo ignorara, luego le cargas al div la informacion recibida y finalmente lo muestras con fadeIn();

Probalo aver si te resulta facil de realizar y cualquier duda me avisas

Salu2