Foros del Web » Creando para Internet » HTML »

abrir con enlace un iframe en una zona especifica

Estas en el tema de abrir con enlace un iframe en una zona especifica en el foro de HTML en Foros del Web. Hola qué tal amigos de "forosdelweb.com" la verdad que soy un poco nuevo en esto de los foros, aunque realmente soy nuevo en esto, pero ...
  #1 (permalink)  
Antiguo 28/11/2010, 17:29
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Pregunta abrir con enlace un iframe en una zona especifica

Hola qué tal amigos de "forosdelweb.com" la verdad que soy un poco nuevo en esto de los foros, aunque realmente soy nuevo en esto, pero tengo uno que otro conocimiento básico de lo que he aprendido por mi cuenta, tanto en lo que es diseño digital y diseño web.

Bueno... ahora a lo que vengo. ( trataré de ser lo más claro jeje )

Tengo :

- una barra de navegación de 2 textos ( ejemplo1 y ejemplo2 )
- un contenedor div ( maincont ) que tiene a los divs ( izq y der )
- también tengo 2 páginas correspondientes a ejemplo1.html, ejemplo2.html y sobra.html

Lo que necesito :

Convertir esos 2 textos de la barra de navegación en enlaces que abran el contenido de las páginas en la zona del div "der" ya que en el izquierdo iría "predeterminadamente" sobra.html u otra información.

Lo que trato de con esto es que no cargue el LAYOUT o el diseño de mi web y solo cambie la información que en este caso solo son esas zonas las que cambian.

Agradezco de antemano su ayuda. Saludos! ;) ( Ah! olvidaba, no es que ofrezca algo a cambio, pero estoy interesado en personas que quieran tener amigos metidos en el diseño y aprender uno del otro, y más si requieren de ayudita en lo digital jejeje )
  #2 (permalink)  
Antiguo 28/11/2010, 18:48
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: abrir con enlace un iframe en una zona especifica

2 alternativas:

1-agregar un iframe en la zona especifica, y para dirigir los enlaces hacia él solo debes de añadir el atributo target="name_iframe" al link especifico, o desde javascript utilizando:

window.open("url","name_iframe");

2-con AJAX te evitas el iframe y puedes cambiar dinámicamente el contenido del div con innerHTML (tendrás que investigar sobre ajax al respecto)
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 28/11/2010, 19:20
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por maycolalvarez Ver Mensaje
2 alternativas:

1-agregar un iframe en la zona especifica, y para dirigir los enlaces hacia él solo debes de añadir el atributo target="name_iframe" al link especifico, o desde javascript utilizando:

window.open("url","name_iframe");

2-con AJAX te evitas el iframe y puedes cambiar dinámicamente el contenido del div con innerHTML (tendrás que investigar sobre ajax al respecto)
Maquetearé un poco esto para que en base a esto me ayuden. Gracias por tu aporte maycolalvarez , pero está algo resumido jeje necesito saber PORQUE.

Código HTML:
<div class="maincont">
<div class="navbar" style="height:50px; width:500px; border: 1px solid #00F;">
EJEMPLO1  EJEMPLO2
</div>
<div class="izq"  style="width:200px; height:400px; float:left; align:left; border: 1px solid #60F;">
sobra.html ( no cambia en EJEMPLO1 pero sí en EJEMPLO2 )
</div>
<div class="der"  style="width:500px; height:400px; align:rigth; border: 1px solid #C3C;">
ejemplo1.html
ejemplo2.html
( Dependiendo del enlace de la barra de navigación en el que estemos )
</div>
</div> 

Última edición por rzkgraphics; 28/11/2010 a las 19:39
  #4 (permalink)  
Antiguo 29/11/2010, 07:08
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Espero que alguien quiera ayudarme jeje
  #5 (permalink)  
Antiguo 29/11/2010, 19:37
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Seré algo paciente. :)
  #6 (permalink)  
Antiguo 30/11/2010, 00:37
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Mientras iré viendo en qué puedo ayudar en el foro.
  #7 (permalink)  
Antiguo 30/11/2010, 22:08
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Ufff movieron mi tema, pero se olvideron de responderme jeje
  #8 (permalink)  
Antiguo 01/12/2010, 03:18
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

http://www.dynamicdrive.com/dynamici...jaxcontent.htm



__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 01/12/2010, 10:05
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
[url]http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm[/url]




jejeje se ve interesante y me parece que es lo que quiero, pero desearía una ayudita con eso.
  #10 (permalink)  
Antiguo 01/12/2010, 10:20
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

Bureno, intenta con las instrucciones que ahi te dan, en todo caso, si aun no te funciona, lo vemos

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 02/12/2010, 18:10
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Amigos del foro! espero más propuestas suyas, de preferencia HTML ( este foro es sobre eso )
  #12 (permalink)  
Antiguo 03/12/2010, 19:45
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
Bureno, intenta con las instrucciones que ahi te dan, en todo caso, si aun no te funciona, lo vemos

Saludos
Probado. Está muy buena tu ayuda bro, pero hay algunas cosillas que me interesan.
Aquí comienzo :


- Necesito que URLS DIRECTAS de los links de mis menues para poder compartirlos
- Quisiera que al dar click en uno de esos enlaces de mi menú se pudieran cambiar 1 o 2 divs en mi diseño.


Todo me funciona de 1000 maravillas pero quisiera más opción. Haber si me ayudas. :D
  #13 (permalink)  
Antiguo 03/12/2010, 20:24
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

lo de las URLS directas, no se bien que quieres decir

Para cambiar el contenido de 2 divs, debes poner las funciones ajaxpage() que cargan individualmente en una función, y cargarla desde otro elemento

Archivo ajaxdd.js (aqui dentro pones el contenido de la script de dinamyc Drive

Archivo 2divs.html

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>2 Divs con Ajax</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="ES-ar" />
  7. <meta http-equiv="Content-Style-Type" content="text/css" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
  10. <meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
  11. <script type="text/javascript" src="ajaxdd.js"></script>
  12. <style type="text/css">
  13. /*<![CDATA[*/
  14.  
  15. p {
  16. border: 2px solid #273018;
  17. padding: 4px;
  18. background-color:#789449;
  19. color: #000;
  20. font-size: 10pt;
  21. font-weight: bold;
  22. width: 120px;
  23. text-align: center;
  24. cursor: pointer;
  25. }
  26.  
  27. #a, #b {
  28. width :250px;
  29. height: 150px;
  30. border: 2px solid #273018;
  31. color: #000;
  32. font-size: 10pt;
  33. font-weight: bold;
  34. background-color:#9E933F;
  35. margin-bottom: 10px;
  36. }
  37.  
  38. /*]]>*/
  39.  
  40. <script type="text/javascript">
  41. //<![CDATA[
  42. function recarga(){
  43. ajaxpage('a.html','a');
  44. ajaxpage('b.html','b');
  45. }
  46. //]]>
  47. </head>
  48. <p onclick="recarga();">Cargar a y b</p>
  49. <div id="a">
  50. Div A
  51. </div>
  52. <div id="b">
  53. Div B
  54. </div>
  55. <!-- ©2000 Emprear.com -->
  56. </body>
  57. </html>


archivo a.html

Código HTML:
Ver original
  1. <h1>A</h1>


archivo b.html

Código HTML:
Ver original
  1. <h1>B</h1>


Pone los 4 archivos en una carpeta.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #14 (permalink)  
Antiguo 03/12/2010, 23:10
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
lo de las URLS directas, no se bien que quieres decir

Para cambiar el contenido de 2 divs, debes poner las funciones ajaxpage() que cargan individualmente en una función, y cargarla desde otro elemento

Archivo ajaxdd.js (aqui dentro pones el contenido de la script de dinamyc Drive

Archivo 2divs.html

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>2 Divs con Ajax</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="ES-ar" />
  7. <meta http-equiv="Content-Style-Type" content="text/css" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
  10. <meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
  11. <script type="text/javascript" src="ajaxdd.js"></script>
  12. <style type="text/css">
  13. /*<![CDATA[*/
  14.  
  15. p {
  16. border: 2px solid #273018;
  17. padding: 4px;
  18. background-color:#789449;
  19. color: #000;
  20. font-size: 10pt;
  21. font-weight: bold;
  22. width: 120px;
  23. text-align: center;
  24. cursor: pointer;
  25. }
  26.  
  27. #a, #b {
  28. width :250px;
  29. height: 150px;
  30. border: 2px solid #273018;
  31. color: #000;
  32. font-size: 10pt;
  33. font-weight: bold;
  34. background-color:#9E933F;
  35. margin-bottom: 10px;
  36. }
  37.  
  38. /*]]>*/
  39.  
  40. <script type="text/javascript">
  41. //<![CDATA[
  42. function recarga(){
  43. ajaxpage('a.html','a');
  44. ajaxpage('b.html','b');
  45. }
  46. //]]>
  47. </head>
  48. <p onclick="recarga();">Cargar a y b</p>
  49. <div id="a">
  50. Div A
  51. </div>
  52. <div id="b">
  53. Div B
  54. </div>
  55. <!-- ©2000 Emprear.com -->
  56. </body>
  57. </html>


archivo a.html

Código HTML:
Ver original
  1. <h1>A</h1>


archivo b.html

Código HTML:
Ver original
  1. <h1>B</h1>


Pone los 4 archivos en una carpeta.

Saludos
Lo probaré. Gracias por la ayuda de verdad se me está haciendo de mucha utilidad ;) y estoy aprendiendo un poco de esto jeje.

Lo de URL DIRECTA me refería a que por ejemplo :

si estoy en menú 1 : mi url sería http://midominio.com/menu1.html , pero con esto que estoy haciendo para la web, no puedo compartirlo así =/ alguna otra forma?
  #15 (permalink)  
Antiguo 03/12/2010, 23:50
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Ya está, con lo que me guié de lo ultimo que me dijiste y lo primero, solo llegué a la conclusión que tenía que agregar ajaxpage('a.html', 'div');); nada más que eso (:

En un rato subo parte de lo que he avanzado con tu ayuda, para que me entiendas un poco mejor lo que quisiera hacer. Saludos! Y MUCHAS GRACIAS!
  #16 (permalink)  
Antiguo 05/12/2010, 11:52
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

(: Bueno, ya he avanzado gracias a tu ayuda, pero aún tengo par de inconvenientes, he subido mi proyecto a un host gratuito para que puedas apoyarme y entender mejro lo que estoy haciendo, espero tu respuesta para mandartelo y me sigas ayudando :)
  #17 (permalink)  
Antiguo 05/12/2010, 19:33
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

postea la url para ver de que se trata

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #18 (permalink)  
Antiguo 05/12/2010, 19:38
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
postea la url para ver de que se trata

Saludos
http://rzkgraphics.webcindario.com/website/

Aparentemente todos mis enlaces del navbar cargan en maincont, pero no es así.
inicio, biografia, descargas y contacto(html) tienen su contenido dentro de un div llamado "rightcont" esto para que cuando haga el llamado no se situe en el "maincont", sino en el "rightcont" y me dejen libre "leftcont" donde quiero situar otro contenido, el mismo para todas las páginas mencionadas, en lo posible tratando de que no se vuelva a cargar.

Otro problema que tengo es que en mi zona "fotos" estoy usando un visor de imágenes con jquery, esto carga normal en su "foto.html", pero a la hora de hacer el llamado con su enlace para que se situe en maincont, este no carga como debe de ser a qué se debe?
  #19 (permalink)  
Antiguo 05/12/2010, 20:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

rzkgraphics:


una explicación detallada creo llevaria varios posts.
Creo que deberías replanterate la estructura que estás usando.

Voy a darte una serie de detalles para orientarte.
tienes mas de 1MB de imágenes cargando al iniciar, sobre todo la que usas como fondo de todo
http://rzkgraphics.webcindario.com/images/principal.png

otras como
http://rzkgraphics.webcindario.com/i...annerkevin.png
parecen estar corruptas (se transfirieron mal probablemente) ya que el navegador la muestra truncada.

Cuando utilizas Ajax para cargar otras páginas que usan sus propias scripts, ó css, como la galeria de imágenes, tienes que cragar tambien el el js y css correspondiente (revisa la documentación de la script que te pasé para ver como se hace, mira atentamente el uso de Syntax of loadobjs())

Empieza por buscar como corregir eso
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #20 (permalink)  
Antiguo 05/12/2010, 20:32
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
rzkgraphics:


una explicación detallada creo llevaria varios posts.
Creo que deberías replanterate la estructura que estás usando.

Voy a darte una serie de detalles para orientarte.
tienes mas de 1MB de imágenes cargando al iniciar, sobre todo la que usas como fondo de todo
[url]http://rzkgraphics.webcindario.com/images/principal.png[/url]

otras como
[url]http://rzkgraphics.webcindario.com/images/headbanner/headbannerkevin.png[/url]
parecen estar corruptas (se transfirieron mal probablemente) ya que el navegador la muestra truncada.

Cuando utilizas Ajax para cargar otras páginas que usan sus propias scripts, ó css, como la galeria de imágenes, tienes que cragar tambien el el js y css correspondiente (revisa la documentación de la script que te pasé para ver como se hace, mira atentamente el uso de Syntax of loadobjs())

Empieza por buscar como corregir eso
Saludos
OTRO LINK
http://rzkgraphics.260mb.com

Bueno lo de la imagen principal, creo que tendré que bajarle mucho más aún. Gracias por el dato. La del headbanner, la verdad que sí me di cuenta del error, pero lo dejé ahí solo quiero ver que funcione bien lo otro.

Sobre lo del ajax, te quería consultar justamente eso! (I) osea voy a tener que agregar lo del load con el css y los js que usa la galería, pero porqué las demás zonas cogen el CSS del principal? sin que los carge?

La galería usa un js de jquery, tiene un galleria.js, al ultimo tengo un script que hace un llamado a galleria.classic.js pero también tengo un galleria.classic.css, estoy que pongo lo siguiente en mi enlace:

<a href="javascript:ajaxpage('../website/fotos.html', 'maincont'); loadobjs('sgallery.js', 'galleria.js','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', 'galleria.classic.js', 'galleria.classic.css');">Fotos</a>


Estoy bien?

Última edición por rzkgraphics; 05/12/2010 a las 20:46
  #21 (permalink)  
Antiguo 05/12/2010, 21:02
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

En principio así debería ser, pero tendrias que ¡r probando para ver si funciona. A veces según como cargue el js, podria provocarte algun conflicto.

Otra posibilidad, aunque no se si tienes conocimientos de php, es crear una especie de plantilla que tenga tu header junto al menu, un pie, y que el contenido que varia se cargue a través de un include(quees una función fácil de implementar). Pero no olvides el tema de esa imagen de fondo, que insisto, a mi parecer es muy pesada

Otro detalle, que las scripts esten todas en tu server, no sé si ajax te permitirá cargar urls de otros servidor, lo digo por eso de
'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
cuando ya tienes por otra parte

<script type="text/javascript" src="jquery.js"></script>

y siempre utiliza rutas relativas a la raiz del sitio para prevenir errores

Si tu web (y tomo como ejemplo la demo actual) es
http://rzkgraphics.webcindario.com

y tus imagenes estan en
http://rzkgraphics.webcindario.com/images

utiliza src="/images/...."
si las scripts o html estan en una carpeta de url
http://rzkgraphics.webcindario.com/website/

utiliza

/website/jquery.js
ó
/website/contacto.html




Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #22 (permalink)  
Antiguo 05/12/2010, 21:23
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
En principio así debería ser, pero tendrias que ¡r probando para ver si funciona. A veces según como cargue el js, podria provocarte algun conflicto.

Otra posibilidad, aunque no se si tienes conocimientos de php, es crear una especie de plantilla que tenga tu header junto al menu, un pie, y que el contenido que varia se cargue a través de un include(quees una función fácil de implementar). Pero no olvides el tema de esa imagen de fondo, que insisto, a mi parecer es muy pesada

Otro detalle, que las scripts esten todas en tu server, no sé si ajax te permitirá cargar urls de otros servidor, lo digo por eso de
'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
cuando ya tienes por otra parte

<script type="text/javascript" src="jquery.js"></script>

y siempre utiliza rutas relativas a la raiz del sitio para prevenir errores

Si tu web (y tomo como ejemplo la demo actual) es
[url]http://rzkgraphics.webcindario.com[/url]

y tus imagenes estan en
[url]http://rzkgraphics.webcindario.com/images[/url]

utiliza src="/images/...."
si las scripts o html estan en una carpeta de url
[url]http://rzkgraphics.webcindario.com/website/[/url]

utiliza

/website/jquery.js
ó
/website/contacto.html




Saludos

De nuevo muchas gracias por las recomendaciones.
Bueno mi galería normalmente la armo así :


Código:
<style>
.content{
	color:#006d99;
	width:700px;
	font-family: Tahoma;
	font-size: 14px;
	height: 400px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 7px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
a {color:#fff;}
#galleria{height:415px; width:739px;}
</style>

<script src="jquery.min.js"></script>
<script src="galleria.js"></script>


<div class="content">
<h1>Galeria de Fotos</h1>
<div id="galleria">

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Sea-otter-morro-bay_13.jpg/800px-Sea-otter-morro-bay_13.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
<img alt="Strawberries, yum yum! Shiny red" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
</div>
</div>

    <script>
    Galleria.loadTheme('galleria.classic.js');
    $('#galleria').galleria();
    </script>
Todo eso dentro de una misma carpeta aparte de un "galleria.classic.css" que galleria.classic.js llama.


Ahora para lo que quiero he hecho lo siguiente :

<a href="javascript:ajaxpage('/website/fotos.html', 'maincont'); loadobjs('/website/sgallery.js', '/website/galleria.js','/website/jquery.min.js', '/website/galleria.classic.js', '/website/galleria.classic.css');">Fotos</a>

Donde sgallery.js es :
<script>
Galleria.loadTheme('galleria.classic.js');
$('#galleria').galleria();
</script>

Y jquery.min.js lo guardé dentro de la misma carpeta para que funcione y no me de problemas el ajaxpage.


Espero me puedas ayudar =/
  #23 (permalink)  
Antiguo 05/12/2010, 22:50
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

rzkgraphics:

estuve experimentando un poco, y cereo que la puse hacer funcionar de la siguiente manera, pero es una solucion a medias

El html de la pagina principal

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>XHTML 1.0 transitional</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="ES" />
  7. <meta http-equiv="Content-Style-Type" content="text/css" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <script type="text/javascript" src="js.js"></script>
  10. <script type="text/javascript" src="jquery.js"></script>
  11. </head>
  12.  
  13. <a href="javascript:ajaxpage('fotos.html', 'maincont');loadobjs('galleria.classic.css','galleria.js','galleria.classic.js','sgaleria.js')">Fotos</a>
  14. <hr>
  15. <div id="maincont">
  16.  
  17. </div>
  18.  
  19. </body>
  20. </html>


el html de fotos.html
Código HTML:
Ver original
  1. .content{
  2.     color:#006d99;
  3.     width:700px;
  4.     font-family: Tahoma;
  5.     font-size: 14px;
  6.     height: 400px;
  7.     margin-top: 0px;
  8.     margin-right: 5px;
  9.     margin-bottom: 0px;
  10.     margin-left: 7px;
  11.     padding-top: 0px;
  12.     padding-right: 5px;
  13.     padding-bottom: 0px;
  14.     padding-left: 5px;
  15. }
  16. a {color:#fff;}
  17. #galleria{height:415px; width:739px;}
  18. <div class="content">
  19. <h1>Galeria de Fotos</h1>
  20. <div id="galleria">
  21.  
  22. <img alt="Y se viene DON CHETA!" src="file:///C|/Users/Renato/Desktop/chezina.jpg">
  23. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Sea-otter-morro-bay_13.jpg/800px-Sea-otter-morro-bay_13.jpg">
  24. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
  25. <img alt="Strawberries, yum yum! Shiny red" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
  26. <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
  27. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
  28. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
  29. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
  30. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
  31. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
  32. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
  33. </div>
  34. </div>


fijate que no carga ningun javascript ni css, solo el que est definido con <style>
y que la ruta de la primera imagenb tiene un error porque llama a file:///C...

La hice trabajar en mi localhost, con Firefox/ Chrome y Opera....
lo malo es que no funciona en IE (al menos a mi).
En IE solo funciona si llamas a fotos.html tal cual lo tenes ahora.

Habria que investigar un poco mas, pero no se. El error que marca IE es
"Galleria" no está definido (para las scripts 'galleria.classic.js' y 'sgalleria.js) intente poner sgalleria.js como <script></script> tanto en la pagina principal como en fotos.html, pero siguio tirando error, aunque en los demas navegadores se siguio ejecutando.

Por lo visto el problema es como cargarla desde ajax

Otra cosa no se me ocurre

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #24 (permalink)  
Antiguo 05/12/2010, 22:53
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
rzkgraphics:

estuve experimentando un poco, y cereo que la puse hacer funcionar de la siguiente manera, pero es una solucion a medias

El html de la pagina principal

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>XHTML 1.0 transitional</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="ES" />
  7. <meta http-equiv="Content-Style-Type" content="text/css" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <script type="text/javascript" src="js.js"></script>
  10. <script type="text/javascript" src="jquery.js"></script>
  11. </head>
  12.  
  13. <a href="javascript:ajaxpage('fotos.html', 'maincont');loadobjs('galleria.classic.css','galleria.js','galleria.classic.js','sgaleria.js')">Fotos</a>
  14. <hr>
  15. <div id="maincont">
  16.  
  17. </div>
  18.  
  19. </body>
  20. </html>


el html de fotos.html
Código HTML:
Ver original
  1. .content{
  2.     color:#006d99;
  3.     width:700px;
  4.     font-family: Tahoma;
  5.     font-size: 14px;
  6.     height: 400px;
  7.     margin-top: 0px;
  8.     margin-right: 5px;
  9.     margin-bottom: 0px;
  10.     margin-left: 7px;
  11.     padding-top: 0px;
  12.     padding-right: 5px;
  13.     padding-bottom: 0px;
  14.     padding-left: 5px;
  15. }
  16. a {color:#fff;}
  17. #galleria{height:415px; width:739px;}
  18. <div class="content">
  19. <h1>Galeria de Fotos</h1>
  20. <div id="galleria">
  21.  
  22. <img alt="Y se viene DON CHETA!" src="file:///C|/Users/Renato/Desktop/chezina.jpg">
  23. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Sea-otter-morro-bay_13.jpg/800px-Sea-otter-morro-bay_13.jpg">
  24. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
  25. <img alt="Strawberries, yum yum! Shiny red" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
  26. <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
  27. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
  28. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
  29. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
  30. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
  31. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
  32. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
  33. </div>
  34. </div>


fijate que no carga ningun javascript ni css, solo el que est definido con <style>
y que la ruta de la primera imagenb tiene un error porque llama a file:///C...

La hice trabajar en mi localhost, con Firefox/ Chrome y Opera....
lo malo es que no funciona en IE (al menos a mi).
En IE solo funciona si llamas a fotos.html tal cual lo tenes ahora.

Habria que investigar un poco mas, pero no se. El error que marca IE es
"Galleria" no está definido (para las scripts 'galleria.classic.js' y 'sgalleria.js) intente poner sgalleria.js como <script></script> tanto en la pagina principal como en fotos.html, pero siguio tirando error, aunque en los demas navegadores se siguio ejecutando.

Por lo visto el problema es como cargarla desde ajax

Otra cosa no se me ocurre

Saludos
Dale , voy a probarlo ahora yo ;) jejeje mas bien...si me dijeras cuánto tiempo te quedarás? o algo para contactarte y no esperar angustiado que me respondas? jeje
  #25 (permalink)  
Antiguo 05/12/2010, 23:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

yo estoy todavia trabajando, pero son problemas que llevan tiempo, y no siempre se encuentra la solución. y una web no da par "angustiarse".... pero no te confies , a veces tampoco yo encuentro las soluciones... asi que andá preparando un "Plan B"....

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #26 (permalink)  
Antiguo 06/12/2010, 23:23
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
yo estoy todavia trabajando, pero son problemas que llevan tiempo, y no siempre se encuentra la solución. y una web no da par "angustiarse".... pero no te confies , a veces tampoco yo encuentro las soluciones... asi que andá preparando un "Plan B"....

Saludos
Hola otra vez emprear, jeje (: vengo a molestarte un poco más, pero esta vez con errores, la verdad es que no entiendo porqué ahora me da error en IE cuando me funcionaba normal, hasta la web que me mandaste funciona normal ( que raro ), pero bueno traté de hacer andar la galería pero no llegué a nada, es más traté de hacerlo tan igual a lo que hiciste tu, pero no llegué a nada, a ver si me das una mano otra vez, con estos problemitas.

LINK
http://www.sendspace.com/file/yi212c
  #27 (permalink)  
Antiguo 06/12/2010, 23:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

Primero, solo funciona en firefox, la diferencia entre el que yo hice y el que enviaste en prueba.rar es la siguiente

el contenido de sgaleria.js deb ser este


Código Javascript:
Ver original
  1. Galleria.loadTheme('galleria.classic.js');
  2. $('#galleria').galleria();

y vos le dejaste los <script></script>

y en fotos, hay que remover

<script src="jquery.min.js"></script>
<script src="galleria.js"></script>

ya que el primero se carga en el head del index.html y el segundo con el loadobjs() que está tambien en el index.html.

Ahora si dejas el fotos.html tal cual está SI va a funcionar en IE y Firefox, pero llamandolo directamente, no te va a funcionar utilizando el ajax de index.html

Otra solución posible es que uses un iframe en lugar del div+ajax


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #28 (permalink)  
Antiguo 07/12/2010, 10:33
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
Primero, solo funciona en firefox, la diferencia entre el que yo hice y el que enviaste en prueba.rar es la siguiente

el contenido de sgaleria.js deb ser este


Código Javascript:
Ver original
  1. Galleria.loadTheme('galleria.classic.js');
  2. $('#galleria').galleria();

y vos le dejaste los <script></script>

y en fotos, hay que remover

<script src="jquery.min.js"></script>
<script src="galleria.js"></script>

ya que el primero se carga en el head del index.html y el segundo con el loadobjs() que está tambien en el index.html.

Ahora si dejas el fotos.html tal cual está SI va a funcionar en IE y Firefox, pero llamandolo directamente, no te va a funcionar utilizando el ajax de index.html

Otra solución posible es que uses un iframe en lugar del div+ajax


Saludos
Ya está, tenias razón se me pasó lo del script. Ya está corriendo normal. Imagínate que en un comienzo todo lo estaba haciendo con iframes, mi pregunta por la que empecé esta discusión era cómo abrir estos iframes con enlaces de acuerdo a mi zona del menú jeje (: pero bueno ya estoy en esto.

Me puedes ayudar en hacer que lo primero que cargue sea el inicio? porque si te das cuenta comienza en blanco. saludos!

http://rzkgraphics.260mb.com
  #29 (permalink)  
Antiguo 07/12/2010, 11:47
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: abrir con enlace un iframe en una zona especifica

Para que cargue por defecto, pones la script dentro del div


Código HTML:
Ver original
  1. <div id="maincont">
  2. <script type="text/javascript">
  3. //<![CDATA[
  4.  
  5. ajaxpage('inicio.html','maincont');
  6.  
  7. //]]>
  8. </div>

solo la función con los parametros

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #30 (permalink)  
Antiguo 07/12/2010, 13:31
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: abrir con enlace un iframe en una zona especifica

Cita:
Iniciado por emprear Ver Mensaje
Para que cargue por defecto, pones la script dentro del div


Código HTML:
Ver original
  1. <div id="maincont">
  2. <script type="text/javascript">
  3. //<![CDATA[
  4.  
  5. ajaxpage('inicio.html','maincont');
  6.  
  7. //]]>
  8. </div>

solo la función con los parametros

Saludos

Yeee (: dale mi broder ya está quedando ;) ahora solo me falta hacerme un reproductor con playlist y si se puede con xml para poder mi música en el div leftcont :B en las zonas de inicio,biografía y descargas. Y en el caso de contactos una imagen deferente a eso x)

Etiquetas: enlace, especifica, iframe, zonas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:36.