Tema: Ventana nueva dentro de la pagina
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 22/05/2012, 21:16
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 12 años, 9 meses
Puntos: 320
Respuesta: Ventana nueva dentro de la pagina
buenas, sin duda ajax y lightbox es una gran solucion pero dependeras de que el visitante lo tenga activado e instalado, (lo mejor en mi opinion) pero como vi que todas las respuestas fueron de este tipo te planteo una opcion distinta, animar tus imagenes con CSS.
puedes agregar animaciones y textos descriptivos a las imagenes con css,
crea un documento nombre.html y pega dentro este codigo:

Código HTML: 
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  2. <head>
  3. <style>
  4.  
  5. .imagepluscontainer{ /* main image container */
  6. position: relative;
  7. z-index: 1;
  8. }
  9.  
  10. .imagepluscontainer img{ /* CSS for image within container */
  11. position: relative;
  12. z-index: 2;
  13. -moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
  14. -webkit-transition: all 0.5s ease-in-out;
  15. -o-transition: all 0.5s ease-in-out;
  16. -ms-transition: all 0.5s ease-in-out;
  17. transition: all 0.5s ease-in-out;
  18. }
  19.  
  20. .imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
  21. -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  22. -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  23. box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  24. -moz-transform: scale(1.05, 1.05);
  25. -webkit-transform: scale(1.05, 1.05);
  26. -ms-transform: scale(1.05, 1.05);
  27. -o-transform: scale(1.05, 1.05);
  28. transform: scale(1.05, 1.05);
  29. }
  30.  
  31. .imagepluscontainer div.desc{ /* CSS for desc div of each image. */
  32. position: absolute;
  33. width: 90%;
  34. z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
  35. bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
  36. left: 5px;
  37. padding: 8px;
  38. background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
  39. color: white;
  40. -moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
  41. -webkit-border-radius: 0 0 8px 8px;
  42. border-radius: 0 0 8px 8px;
  43. opacity: 0; /* Set initial opacity to 0 */
  44. -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
  45. -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  46. box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  47. -moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
  48. -webkit-transition: all 0.5s ease 0.5s;
  49. -o-transition: all 0.5s ease 0.5s;
  50. -ms-transition: all 0.5s ease 0.5s;
  51. transition: all 0.5s ease 0.5s;
  52. }
  53.  
  54. .imagepluscontainer div.desc a{
  55. color: white;
  56. }
  57.  
  58. .imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
  59. -moz-transform: translate(0, 100%);
  60. -webkit-transform: translate(0, 100%);
  61. -ms-transform: translate(0, 100%);
  62. -o-transform: translate(0, 100%);
  63. transform: translate(0, 100%);
  64. opacity:1; /* Reveal desc DIV fully */
  65. }
  66.  
  67. /*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
  68.  
  69. .imagepluscontainer div.rightslide{
  70. width: 150px; /* reset from default */
  71. top:15px;
  72. right:0;
  73. left:auto;  /* reset from default */
  74. bottom:auto;  /* reset from default */
  75. padding-left:15px;
  76. -moz-border-radius: 0 8px 8px 0;
  77. -webkit-border-radius: 0 8px 8px 0;
  78. border-radius: 0 8px 8px 0;
  79. }
  80.  
  81. .imagepluscontainer:hover div.rightslide{
  82. -moz-transform: translate(100%, 0);
  83. -webkit-transform: translate(100%, 0);
  84. -ms-transform: translate(100%, 0);
  85. -o-transform: translate(100%, 0);
  86. transform: translate(100%, 0);
  87. }
  88.  
  89. /*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
  90.  
  91. .imagepluscontainer div.leftslide{
  92. width: 150px;  /* reset from default */
  93. top:15px;
  94. left:0;
  95. bottom:auto;  /* reset from default */
  96. padding-left:15px;
  97. -moz-border-radius: 8px 0 0 8px;
  98. -webkit-border-radius: 8px 0 0 8px;
  99. border-radius: 8px 0 0 8px;
  100. }
  101.  
  102. .imagepluscontainer:hover div.leftslide{
  103. -moz-transform: translate(-100%, 0);
  104. -webkit-transform: translate(-100%, 0);
  105. -ms-transform: translate(-100%, 0);
  106. -o-transform: translate(-100%, 0);
  107. transform:translate(-100%, 0);
  108. }
  109.  
  110. /*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
  111.  
  112. .imagepluscontainer div.upslide{
  113. top:0;
  114. bottom:auto;  /* reset from default */
  115. padding-bottom:10px;
  116. -moz-border-radius: 8px 8px 0 0;
  117. -webkit-border-radius: 8px 8px 0 0;
  118. border-radius: 8px 8px 0 0;
  119. }
  120.  
  121. .imagepluscontainer:hover div.upslide{
  122. -moz-transform: translate(0, -100%);
  123. -webkit-transform: translate(0, -100%);
  124. -ms-transform: translate(0, -100%);
  125. -o-transform: translate(0, -100%);
  126. transform:translate(0, -100%);
  127. }
  128.  
  129. </style>
  130. </head>
  131.  
  132. <body>
  133. <div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
  134.     <img src="http://1.bp.blogspot.com/-q_yoK4Rm104/TijHERnER6I/AAAAAAAAAR0/srjbsBCsKNA/s1600/rio-de-selva.jpeg" width="200px" />
  135.     <div class="desc">
  136.         Aca un texto descriptivo de la imagen que acabas de publicar :)
  137.     </div>
  138. </div>
  139.  
  140. <br />
  141.  
  142. <div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
  143.     <img src="http://1.bp.blogspot.com/-q_yoK4Rm104/TijHERnER6I/AAAAAAAAAR0/srjbsBCsKNA/s1600/rio-de-selva.jpeg" width="200px" />
  144.     <div class="desc">
  145.         Aca un texto descriptivo de la imagen que acabas de publicar :)
  146.     </div>
  147. </div>
  148.  
  149. <br />
  150.  
  151. <div class="imagepluscontainer" style="width:263px; height:199px">
  152.     <img src="http://1.bp.blogspot.com/-q_yoK4Rm104/TijHERnER6I/AAAAAAAAAR0/srjbsBCsKNA/s1600/rio-de-selva.jpeg" width="200px" />
  153.     <div class="desc">
  154.         Aca un texto descriptivo de la imagen que acabas de publicar :)
  155.     </div>
  156. </div>
  157.  
  158. <br />
  159.  
  160. <div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
  161.     <img src="http://1.bp.blogspot.com/-q_yoK4Rm104/TijHERnER6I/AAAAAAAAAR0/srjbsBCsKNA/s1600/rio-de-selva.jpeg" width="200px" />
  162.     <div class="desc">
  163.         Aca un texto descriptivo de la imagen que acabas de publicar :)
  164.     </div>
  165. </div>
  166. </body>
  167. </html>

dime que te parece el resultado jeje es CSS3 y es copatible con muchos navegadores, es mucho mas simple que usar java mucho mas claro y eficiente la unica "contra" es que no es tan bonito como java.
espero que te guste mi aporte y si no te sirve para esto talvez puedas usarlo para otra cosa en el futuro.
saludos!