Combinar Lightbox (jQuery) con datos en XML

[Mr_Raymon]

Estoy pensando en hacer una galeria de imagenes combinando Lightbox (jQuery) con datos en XML. En el fichero XML incluiria informacion como "Nombre de Empresa", "Nombre de Proyecto", "Fecha", "Tecnologia" y la ruta de la imagen. Esta informacion se veria al pulsar en la imagen y se viera la misma.

Tambien me gustaria conseguir (si es posible) que al pasar encima de cada trabajo aparezca el nombre de empresa y el nombre del proyecto en cada imagen.

Saludos y Gracias.

EDITO: Ya esta completado y solucionado este tema. Podreis seguirlo ya que he hecho algunas modificaciones para que sea mas facil de leer y ver los codigos de forma correcta.

[stock]

y cual es tu problema? que es lo que has hecho? que es lo que te falta por hacer?

saludos

[Mr_Raymon]

Todavia no he hecho gran cosa. Solamente tengo parte del fichero XML a espera de saber cuantas imagenes tendra la galeria.

Mi problema es que no tengo idea de como hacer funcionar Lightbox (jQuery) con XML. Hacer funcionar Lightbox es facil pero otra cosa es combinarlo con otro elemento, en este caso XML y me gustaria aprender porque en un futuro me puede venir muy bien.

Saludos.

[Mr_Raymon]

¿Alguna idea?

[tunait]

A ver si en el sub-foro de frameworks te pueden orientar un poco

tema movido desde HTML

[mayid]

Te paso mi manera de leer un xml con jquery / ajax:

$.ajax({
type: "POST",
url: data,
async: false,
// dataType: ($.browser.msie) ? "text" : "xml",
dataType: "text",
success: function(data) {

function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);

$(xml).find('item').each(function(){

titulo_bruto = $(this).find('titulo').text(); // aqui se seleccionan valores de un xml
descripcion = $(this).find('descripcion').text();

titulo = "<p><strong>"+titulo_bruto+"</strong>" + "<p>"+descripcion+"</p></p>";


}); // fin de each (archivo descripciones.xml)




},
error: function(objeto, quepaso, otroobj){

// alert ("algo pasa");
}
});

Y este es un xml de referencia:

<?xml version="1.0" encoding="iso-8859-1"?>

<galeria>

<item dir='bijouterie' id='PADEN136.jpg'>
<titulo>
</titulo>
<descripcion>
</descripcion>
</item>

<item dir='bijouterie' id='bracelets07a.jpg'>
<titulo>
</titulo>
<descripcion>
</descripcion>
</item>

</galeria>

[Mr_Raymon]

Gracias por responder mayid pero la verdad no entiendo muy bien el codigo y parece bastante complicado y lioso.

Para coger informacion de un XML ¿no es recomendable utilizar el metodo "get"?

Otra cosa que veo en tu codigo son las siguientes lineas:
// dataType: ($.browser.msie) ? "text" : "xml",

if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');

Estas lineas de codigo ¿son especificas para Internet Explorer?

Saludos y Gracias de nuevo.

[mayid]

Internet explorer necesita lineas especiales. Hay una que esta comentada con // porque en realidad todo me funciona sin necesidad de esa linea.

Podes no usar ajax, quizas, pero fijate que no es dificil con ajax. La estructura es:

$.ajax({

type: "POST",

url: "direccion.xml",

async: false,

dataType: "text",

success: function(data) { },

error: function(data) { }

})

En success aplicas la conversion del archivo xml en algo que puedas manejar con jquery / javascript. Eso es lo que parece lioso, que en mi ejemplo esta puesto dentro de una funcion.

data representa al archivo xml que leemos con ajax. Pero para poder usarlo necesitamos convertirlo en html. Con esta funcion, mirá:

function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);

recorda que "data" es lo que obtuvimos desde ajax. Ahora lo procesamos con una funcion, que se resuelve asi:

xml = stringToDoc(data);

A partir de ahi podes manejar el objeto xml de manera muy simple. Por ejemplo, yo leia titulo y descripcion desde un xml. Y la publicaba con un each:

$(xml).find('item').each(function(){

titulo_bruto = $(this).find('titulo').text(); // aqui se seleccionan valores de un xml
descripcion = $(this).find('descripcion').text();

titulo = "<p><strong>"+titulo_bruto+"</strong>" + "<p>"+descripcion+"</p></p>";

}); // fin de each (archivo descripciones.xml)

[Mr_Raymon]

Se me olvido comentar que lo quiero es que aparezcan las miniaturas con una clase que se llama imagen_hover ya que la tengo creada en CSS. Si no recuerdo mal habria que utilizar append para añadirlo al atributo img, si no me equivoco. Imagino que habria tambien que añadir la ruta de la miniatura dentro del XML, si quiero hacer esto ¿verdad?

Otra cosa que se me olvido comentar es solo puedo utilizar en el proyecto HTML y XML, nada de lenguajes de servidor como PHP y ASP.

mayid, te agradezco la ayuda que me estas dando pero necesito entender todo el codigo y para eso necesitare mucha ayuda.

Saludos y Gracias de nuevo.

[mayid]

Si no recuerdo mal habria que utilizar append para añadirlo al atributo img, si no me equivoco.

A ver si te interpreto. Queres añadir un atributo o un tag html?

Para añadir un tag, usas append. Pero para añadir un atributo, por ejemplo "class", tenes que usar otra cosa:

$("#div").attr("class","nombre");

Otra cosa que se me olvido comentar es solo puedo utilizar en el proyecto HTML y XML, nada de lenguajes de servidor como PHP y ASP.

Ok. Con esto vamos bien. Nada de lado servidor hasta ahora. Y no se necesita.

pero necesito entender todo el codigo y para eso necesitare mucha ayuda.

Me parece genial. Un simple copy + paste es un quebradero de cabeza, y no vale lo que vale entender todo.

[Mr_Raymon]

Lo que quiero hacer es lo siguiente, ya que lo tengo claro.

Tengo creado un <ul> con una clase que se llama galeria. Dentro del ul se añadiria la informacion de la siguiente manera:

Código HTML:

<ul class="galeria"> 
<li><a href="img/descargas/fondos/original/fondo1.jpg" rel="prettyPhoto[fondos]" title="<b>Fondo para Escritorio 1440x900 pixels (pantallas panoramicas 16:10)</b>"><img src="img/descargas/fondos/minis/fondo1.jpg" class="imagen_hover" alt="Fondo para Escritorio 1"/></a></li> 
<li><a href="img/descargas/fondos/original/fondo2.jpg" rel="prettyPhoto[fondos]" title="<b>Fondo para Escritorio 1440x900 pixels (pantallas panoramicas 16:10)</b>"><img src="img/descargas/fondos/minis/fondo2.jpg" class="imagen_hover" alt="Fondo para Escritorio 2"/></a></li>
</ul>
 

La idea seria meter la informacion en cada <li> con un enlace <a> a la foto original con los atributos "href" (enlace a la foto), "rel" (para que funcione prettyPhoto) y "title" (para añadir informacion). Despues tenemos una etiqueta <img> que muestra la foto en miniatura, con un clase llamada "imagen_hover" y con el atributo "alt" (para el titulo de la foto en prettyPhoto).

Entonces seria añadir tres etiquetas con append y con sus atributos con attr ¿correcto?

¿Como lo ves?

Saludos.

[mayid]

Yo haria esto:

$(".galeria").append('<li><a href="img/descargas/fondos/original/fondo1.jpg" rel="prettyPhoto[fondos]" title="<b>Fondo para Escritorio 1440x900 pixels (pantallas panoramicas 16:10)</b>"><img src="img/descargas/fondos/minis/fondo1.jpg" class="imagen_hover" alt="Fondo para Escritorio 1"/></a></li>');

Es decir, con .append() podes incluir todo el html que quieras. Lo mismo que con el metodo .html()

[Mr_Raymon]

Lo suyo seria combinarlo con XML para no tener que escribir todo eso cada vez que subas una foto o lo que sea. Simplemente con modificar la informacion del fichero XML y subirla al servidor.

Pongo parte del codigo XML para ver la estructura:

Código XML:

<datos>
<trabajos>
<web>
<proyecto>Proyecto Web 1</proyecto>
      <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
      <imagen>img/trabajos/web/original/abetal.jpg</imagen>
      <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
        <br/>
        <b>Tecnología PHP</b>
      </info>
</web>
<web>
<proyecto>Proyecto Web 2</proyecto>
      <miniatura>img/trabajos/web/minis/loquesea.jpg</miniatura>
      <imagen>img/trabajos/web/original/loquesea.jpg</imagen>
      <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
        <br/>
        <b>Tecnología PHP</b>
      </info>
</web>
<multimedia>
<proyecto>Proyecto Multimedia 1</proyecto>
      <miniatura>img/trabajos/web/minis/m1.jpg</miniatura>
      <imagen>img/trabajos/web/original/m1.jpg</imagen>
      <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
        <br/>
        <b>Tecnología PHP</b>
      </info>
</multimedia>
<multimedia>
<proyecto>Proyecto Multimedia 2</proyecto>
      <miniatura>img/trabajos/web/minis/m2.jpg</miniatura>
      <imagen>img/trabajos/web/original/m2.jpg</imagen>
      <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
        <br/>
        <b>Tecnología PHP</b>
      </info>
</multimedia>
</trabajos>
</datos>
 

La etiqueta <proyecto> seria el titulo de la foto.
La etiqueta <miniatura> seria la ruta de la foto en miniatura.
La etiqueta <imagen> seria la ruta de la foto original.
La etiqueta <info> seria la informacion incluida en cada ventana en prettyPhoto junto con un salto de linea <br/> y justo debajo un texto en negrita que indica la tecnologia utilizada.

Logicamente serviria para todas las secciones de mi proyecto (web, multimedia, dispositivos moviles, etc.).

Imagino que hacer eso seria algo parecido a esto:

Código Javascript:

$(".galeria").append('<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+"><img src="+miniatura+" class="imagen_hover" alt="+miniatura+"/></a></li>');
 

Creo que seria algo asi o incluso mas reducido, como has puesto antes en el primer ejemplo.

Saludos.

[mayid]

Bueno, retomando la lectura del xml desde aqui:

xml = stringToDoc(data);

Hay que construir tu funcion.

$(xml).find('web').each(function(){

miniatura = $(this).find('proyecto').find('miniatura').text();
imagen = $(this).find('proyecto').find('imagen').text();
info = $(this).find('proyecto').find('iinfo').html();

li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+"><img src="+miniatura+" class="imagen_hover" alt="+miniatura+"/></a></li>';

}); // fin de each

Depuremos esto.

[Mr_Raymon]

Esto parece que va por buen camino. Solo haria falta hacerlo para todos los <ul> que me interesan (o eso en teoria)

Para la seccion web <ul class="galeria_web">
Para la seccion multimedia <ul class="galeria_multimedia">
Para la seccion dispositivos moviles <ul class="galeria_movil">

Y asi sucesivamente.

¿No seria mejor pintar la "variable info" con text en vez de html? A pesar que tiene elementos HTML estaria dentro de un atributo y no creo que tenga sentido hacerlo ¿o me equivoco?

Antes de terminar ¿como haces para poner otro tipo de letra dentro de un [code]? Me sale una letra horrorosa y no se si podra cambiar.

Saludos y Gracias de nuevo mayid.

[mayid]

Esto esta muy largo y puedo cambiarse:

imagen = $(this).find('proyecto').find('imagen').text();

... por esto:

imagen = $(this).find('imagen').text();

.......................

Para la seccion web <ul class="galeria_web">
Para la seccion multimedia <ul class="galeria_multimedia">
Para la seccion dispositivos moviles <ul class="galeria_movil">

Supongo que la unica tarea seria cambiar el selector:

$(".galeria").append(li);
$(".galeria_multimedia").append(nuevo_contenido) ;
etc

............................

¿No seria mejor pintar la "variable info" con text en vez de html?

Vos en info tenias esto, que incluye html. QUe mas da?:

<info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
<br/>
<b>Tecnología PHP</b>
</info>

estaria dentro de un atributo

No entendi. No creo que se haga mas lenta la lectura al traer html. Pero si solo queres texto, entonces el html se eliminaria automaticamente, creo.


......................

¿como haces para poner otro tipo de letra dentro de un [code]?

Estas hablando del foro? Yo uso citas, y letras negritas. O de que estas hablando?

[Mr_Raymon]

Tienes razon en lo del tema de pintar la variable info, aunque esto lo he cambiado hoy y ya no tiene etiquetas HTML dentro del XML. El ejemplo que te puse antes, efectivamente, tiene codigo HTML.

Código XML:

<info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
<br/>
<b>Tecnología PHP</b>
</info>
 

Por lo tanto, creo que es mejor poner las etiquetas despues en la "variable li".

Código Javascript:

li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+<br/>+empresa+<br/>+tecnologia+"><img src="+miniatura+" class="imagen_hover" alt="<strong>+proyecto+</strong>"/></a></li>';
 

Lo de [CODE] si, era una pregunta relacionada con el foro. Perdon por no especificarlo y te agradezco la ayuda, que ahora si da gusto leer los codigos con buen letra ;)

Y perdona por todo el lio que estoy organizando. La verdad este es un tema ciertamente complejo y a veces me hago un poco de lio.

Saludos y Gracias de nuevo.

[Mr_Raymon]

Aqui añado el codigo XML modificado hasta hoy y practicamente sera definitivo.

Código XML:

<datos>
 
  <web>
    <proyecto>Proyecto Web 1</proyecto>
    <empresa>Empresa 1</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </web>
  <web>
    <proyecto>Proyecto Web 2</proyecto>
    <empresa>Empresa 2</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </web>
 
  <multimedia>
    <proyecto>Proyecto Multimedia 1</proyecto>
    <empresa>Empresa 7</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </multimedia>
  <multimedia>
    <proyecto>Proyecto Multimedia 2</proyecto>
    <empresa>Empresa 8</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </multimedia>
 
  <movil>
    <proyecto>Proyecto Dispositivo Móvil 1</proyecto>
    <empresa>Empresa 13</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </movil>
  <movil>
    <proyecto>Proyecto Dispositivo Móvil 2</proyecto>
    <empresa>Empresa 14</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </movil>
 
  <erp>
    <proyecto>Proyecto Aplicación ERP 1</proyecto>
    <empresa>Empresa 19</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </erp>
  <erp>
    <proyecto>Proyecto Aplicación ERP 2</proyecto>
    <empresa>Empresa 20</empresa>
    <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
    <imagen>img/trabajos/web/original/abetal.jpg</imagen>
    <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.</info>
    <tecnologia>Tecnología PHP</tecnologia>
  </erp>
</datos>
 

Logicamente irian muchos mas elementos pero lo he puesto para ver como lo ves estructurado mayid.

[mayid]

A mi me parece bien. Simple. Yo no se mucho de xml, y en caso de dudas seria bueno que publiques en el foro de xml.

Lo que si me parece que falta es la cabecera:

<?xml version='1.0' encoding='utf-8'?>

[Mr_Raymon]

Me gustaria recapitular todo lo que estoy viendo para ver si es correcto el funcionamiento de la aplicacion.

Código Javascript:

$.ajax({
 
type: "POST",
 
url: "direccion.xml",
 
async: false,
 
dataType: "text", // ¿¿Aqui no deberia ser XML??
 
success: function(data) { },
 
error: function(data) { }
 
})
 
function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);
 
$(xml).find('web').each(function(){ 
 
miniatura = $(this).find('proyecto').find('miniatura').text(); 
imagen = $(this).find('proyecto').find('imagen').text(); 
info = $(this).find('proyecto').find('iinfo').html(); 
 
li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+<br/>+empresa+<br/>+tecnologia+"><img src="+miniatura+" class="imagen_hover" alt="<strong>+proyecto+</strong>"/></a></li>';
 
}); // fin de each
 

¿Es correcto este seguimiento?

[mayid]

nope.

Fijate que aqui planteaste una funcion vacia:

success: function(data) { },

Ahi debe estar puesto todo esto "function stringToDoc(s) { ... etc } . Fijate en mi codigo original. Es decir, lo que haremos sera una funcion anonima que recibe la data on success, y dentro de la anonima plantearemos la conversion de datos y el manejo de datos con la funcion stringToDoc()

dataType: "text", // ¿¿Aqui no deberia ser XML??

A mi me funciona asi. Lo que traes como data es texto, y no html. Creo que se refiere a eso. No a la estructura sino a los contenidos.

[Mr_Raymon]

Código Javascript:

$.ajax({
 
type: "POST",
 
url: "direccion.xml",
 
async: false,
 
dataType: "text",
 
success: function(data) {
 
function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);
 
$(xml).find('web').each(function(){ 
 
miniatura = $(this).find('proyecto').find('miniatura').text(); 
imagen = $(this).find('proyecto').find('imagen').text(); 
info = $(this).find('proyecto').find('info').html(); 
 
li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+<br/>+empresa+<br/>+tecnologia+"><img src="+miniatura+" class="imagen_hover" alt="<strong>+proyecto+</strong>"/></a></li>';
 
$(".galeria").append(li)
 
},// fin de each
 
error: function(avisoError) {
 
// FUNCION PARA AVISAR DEL ERROR
 
};
 
})
 

¿Asi seria correcto?

Editado por una coma en la linea //fin de each.

[mayid]

Ojo con esta linea:

};// fin de each

Al cerrar el success: {},

tiene que haber una coma. Con punto y coma fallaria.

Por favor chequea las llaves y correlo a ver si te da error en explorer. A partir de ahi hacemos un debug.

[Mr_Raymon]

¿Pego el codigo sin mas? Imagino que habria que crear una funcion para cargar el $.ajax.

Otra pregunta ¿que versiones de Internet Explorer funcionan con AJAX? Tengo instalado IE 8 y para las versiones anteriores utilizo un programa que se llama IETester que puede cargar IE 5.5, 6 y 7.

[mayid]

$.ajax es la funcion. Don't worry.

De todas maneras, puede estar envuelto en un document.ready

¿que versiones de Internet Explorer funcionan con AJAX?

Ajax funciona en todo navegador. Ajax es javascript para cargar informacion a una pagina que ya fue cargada en el navegador, sin irse de la pagina.

Te decia lo de IE porque ahi es muy facil depurar. Todos los errores que tenga tu codigo van a saltar en amarillo, abajo a la izquierda de tu navegador (cualquier version). Haciendo doble click ahi, te fijas en que linea esta el error. Y viendo el codigo fuente de la pagina buscas la linea y la corregimos... dale.

[Mr_Raymon]

He creado hoy una pagina de prueba para probar todo el codigo de ayer.

Código Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready();
$.ajax({
 
type: "POST",
 
url: "xml/trabajos.xml",
 
async: false,
 
dataType: "text",
 
success: function(data) {
 
function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);
 
$(xml).find('web').each(function(){ 
 
miniatura = $(this).find('proyecto').find('miniatura').text(); 
imagen = $(this).find('proyecto').find('imagen').text(); 
info = $(this).find('proyecto').find('info').text(); 
 
li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+<br/>+empresa+<br/>+tecnologia+"><img src="+miniatura+" class="imagen_hover" alt="<strong>+proyecto+</strong>"/></a></li>';
 
$(".galeria").append(li)
 
},// fin de each
 
error: function(avisoError) {
 
// FUNCION PARA AVISAR DEL ERROR
 
};
 
})
</script>
</head>
 
<body>
<div class="galeria"></div>
</body>
</html>
 

Y este es el error que me da Internet Explorer 8.

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Fecha: Sat, 9 Jan 2010 17:47:10 UTC


Mensaje: Se esperaba ')'
Línea: 48
Carácter: 6
Código: 0
URI: file:///C:/Documents%20and%20Settings/Casa/Escritorio/Web/prueba.html

Espero que puedas ayudarme mayid.

Saludos y Gracias

[mayid]

Bueno, te falta cerrar un parentesis. Pero tambien te falta abrir una llave en document.ready y encerrar todo el codigo entre esas llaves:

Cambia esto:

$(document).ready();

Por esto, que queda abierto (sin punto y coma en esta linea, quiero decir):

$(document).ready(function(){

En verdad, te faltaban varias llaves a mas de parentesis. Que editor usas? Te conviene una que al marcar con click sobre una llave te muestre donde empieza y donde termina...

Tema aparte: me quede pensando en lo que decias:

¿Pego el codigo sin mas? Imagino que habria que crear una funcion para cargar el $.ajax.

Esto es tremendamente cierto. Necesitas de un disparador para que se haga la llamada al Ajax. Cual es la excusa? Un click en algún botón, o algo así?



Aqui te dejo el codigo con las llaves y parentesis corregidos. Testealo en IE.

$(document).ready(function(){
$.ajax({

type: "POST",

url: "xml/trabajos.xml",

async: false,

dataType: "text",

success: function(data) {

function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);

$(xml).find('web').each(function(){

miniatura = $(this).find('proyecto').find('miniatura').text();
imagen = $(this).find('proyecto').find('imagen').text();
info = $(this).find('proyecto').find('info').text();

li = '<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+<br/>+empresa+<br/>+tecnologia+"><img src="+miniatura+" class="imagen_hover" alt="<strong>+proyecto+</strong>"/></a></li>';

$(".galeria").append(li)

}) // fin de each

},

error: function(avisoError) {

// FUNCION PARA AVISAR DEL ERROR

};

}) // fin de llamada ajax

}) // fin de llamada dom ready

[Mr_Raymon]

Si me habia dado cuenta poco despues de escribir el post de que estaba mal el $(document).ready() y lo corregi junto con los signos que faltaban siguiendo las instrucciones de Internet Explorer.

Los editores que utilizo son Dreamweaver CS4 y el bloc de notas :P. Aunque en realidad lo he hecho todo practicamente con el bloc de notas ya que en el PC viejo es donde tengo Internet y puedo hacer las consultas.

En cuanto a la llamada de la funcion, simplemente cuando cargue la pagina que muestre toda la informacion sin necesidad de pulsar un boton (o por lo menos esa es la idea).

Funciona la carga de XML aunque no como deberia. Aparece los elementos en pantalla pero no se muestran correctamente.

Una captura para que veas lo que digo.



Otra "problema" que tengo es que he puesto un alert() en caso de que falle. Funciona perfecto exceptuando que aparece dos veces el mensaje ¿es posible que salga solo una vez?

Saludos ;)

[mayid]

el bloc de notas :P. Aunque en realidad lo he hecho todo practicamente con el bloc de notas ya que en el PC viejo

En ese caso, bajate el Notepad ++ . Es un editor mas que recomendado, y es liviano.

En cuanto a la llamada de la funcion...

Que cargue en dom . ready. Estamos bien con esto.

Respecto al error que mostras en la imagen, lo que esta pasando es un problema con la dirección de las fotos. Chequea que el src sea correcto.

Otra cosa: por que pones html en el atributo alt?

Otra "problema" que tengo es que he puesto un alert() en caso de que falle.

De esto , ni idea. Por que fallaría la consulta? Lo haces apuntar a un xml inexistente para hacer la prueba?

[Mr_Raymon]

Probe el Notepad++, no esta mal aunque no me convence demasiado por lo menos es mejor que el bloc de notas.

El problema no son los enlaces. Es como si no existieran para la funcion $.ajax las etiquetas XML que hay dentro de la etiqueta principal <web> que serian proyecto, empresa, miniatura, imagen, info y tecnologia. De hecho no pinta la informacion de los XML pero si pinta las veces que aparece la etiqueta principal <web>. Ademas lo he comprobado con Firefox con el plugin Firebug. De todas formas intentare hacer una captura para que veas como sale.

Pongo codigo HTML dentro de "alt" para que luego al pulsar en la imagen con prettyPhoto aparezca el titulo de la imagen. Igual que pongo codigo HTML en "title" para que aparezca la informacion de la misma manera.

En cuanto a la prueba de alert(), efectivamente cambie la ruta y asi es como lo probe. De todas formas probare otra cosa en vez del alert(), a ver que ocurre.

Saludos.