(solucionado)Mostrar un div sobre otro

[pabloledesma]

Cordial saludo para todos

 

En esta ocasión me inunda la siguiente duda:

Que atributo le tengo que dar a un div para que se muestre sobre los demás?

Hice una pagina con el modulo de cms para mostrar imágenes con estilo mosaico.

Para maximizar el tamaño de cada imagen al hacerle click, use un script de jquery ...

 

$(document).on("ready", main);

 

function main() {

$("body").append("<div id='previewSlideshow'><div id='imagen'><img src='' width='800' height='500' /><div id='descripcion'></div><div id='cerrar'>Cerrar</div></div></div>");

$("#slideshow img").on("click", abrirImagen);

$("#previewSlideshow #cerrar").on("click", cerrarImagen);

}

 

function abrirImagen() {

//code

$("#previewSlideshow").fadeIn();

$("#previewSlideshow img").attr("src", "img/cms/slideShow" + ($(this).index()+1) + ".jpg");

$("#previewSlideshow #descripcion").text($(this).attr("title"));

}

 

function cerrarImagen() {

//code

$("#previewSlideshow").fadeOut();

}

 

No he podido hacer que las imágenes aparezcan sobre el div #columns.

He intentado ponerle a la imagen un z-index de 1020 y no funciona.

Que atributo le tengo que dar a un div para que se muestre sobre los demás?

 

Agradezco de antemano su valiosa ayuda.

 

http://allianceinter...&controller=cms

Edited June 10, 2013 by pabloledesma (see edit history)

[pabloledesma]

Muchas gracias statictic

Ha funcionado de maravilla!!

[pabloledesma]

Muchas gracias statictic!!

He probado el script y funciona perfectamente

[pabloledesma]

Que buena idea!

Muchas gracias camarada!!

[pabloledesma]

Hola statictic

 

Estoy usando este script:

$(document).on("ready", main);
function main() {

$("body").append("<div id='previewSlideshow'><div id='imagen'><img src='' width='800' height='400' /><div id='descripcion'></div><div id='cerrar'>Cerrar</div></div></div>");
$("#slide1 .imagen").on("click", abrirImagen);
$("#previewSlideshow #cerrar").on("click", cerrarImagen);
}
function abrirImagen() {
//code
$("#previewSlideshow").fadeIn();
$("#previewSlideshow img").attr('src', '/themes/LDW/img/slideShow' + ($(this).index()+1) + '.jpg');  
$("#previewSlideshow #descripcion").text($(this).attr('title'));
}
function cerrarImagen() {
//code
$("#previewSlideshow").fadeOut();
$("#previewSlideshow").remove();

}

 

pero funciona a medias porque si construye los divs que le he ordenado pero no modifica el atributo src de la etiqueta img (ver imagen adjunta).

 

Porfavor regalame uno de tus excelentes concejos

Edited June 14, 2013 by pabloledesma (see edit history)

[pabloledesma]

no, es en ledesmaweb.com

[pabloledesma]

Hola stictic

 

Ya probé el script que me propusiste pero tiene un par de defectos:

 

$(document).on("ready", main);
function main() {
   $("body").append("<div id='previewSlideshow'></div>");
   $("#slideshow img").on("click", abrirImagen);
   $("#previewSlideshow #cerrar").on("click", cerrarImagen);
}
function abrirImagen() {
   //code
   var imgTitle = $(this).attr("title");
   $("#previewSlideshow").append("<div id='imagen'><img src="img/cms/slideShow"+($(this).index()+1)+".jpg" /><div id='descripcion'>"+imgTitle+"</div><div id='cerrar'>Cerrar</div></div>");
   $("#previewSlideshow").fadeIn();
}
function cerrarImagen() {
   //code
   $("#previewSlideshow").fadeOut();
   $("#imagen").remove();
}

 

1) no esta guardando el titulo en la variable imgTitle

2) Hay errores en esta parte <img src="img/cms/slideShow"+($(this).index()+1)+".jpg" /> el atributo src no queda bien definido y por lo tanto no abre la imagen

3) no sirve la función cerrarImagen

 

Asi que regrese al script inicial:

 

$(document).on("ready", main);
function main() {
   $("body").append("<div id='previewSlideshow'><div id='imagen'><img src='' width='800' height='500' /><div id='descripcion'></div><div id='cerrar'>Cerrar</div></div></div>");
   $("#slide1").on("click", abrirImagen);
   $("#previewSlideshow #cerrar").on("click", cerrarImagen);
}
function abrirImagen() {
   //code
   $("#previewSlideshow").fadeIn();
   $("#previewSlideshow img").attr("src", "../themes/LDW/img/slideShow" + ($(this).index()+1) + ".jpg");
   $("#previewSlideshow #descripcion").text($(this).attr("title"));
}
function cerrarImagen() {
   //code
   $("#previewSlideshow").fadeOut();
}

 

Muchas gracias por tu valiosa ayuda

[pabloledesma]

ok, Seré paciente