Problemon con efectos impresionantes.

filmixt · #1 (**permalink**) 15/10/2008, 15:07

Hola señores.
Hoy he descubierto un script, el lightview, pueden verlo aqui:

http://www.nickstakenburg.com/projects/lightview/

El caso es que el script funciona de tal forma que usando los frameworks de Prototype y Scriptaculous, le das click a una imagen y ésta aparece en plan "full-screen" adaptando la imagen al maximo del tamaño del navegador si excede de este.

A lo que voy, uso AJAX de forma que, al hacer click en un link, en la zona de contenidos se incluye el archivo que llamo:

<a href="javascript:llamarasincrono('portada_estrenos _list.php', 'contenidos');">Listar estrenos</a>

Esto incluirá portada_estrenos_list.php en la zona de contenidos sin recargar la pagina.
Esto es muy util, pero cuando introduzco el Lightview DENTRO de esta zona, NO funciona, en cambio fuera de ella SI.
¿Que puedo hacer?

Me he fijado que para delimitar el ALTO de la pagina para establecer el lightview como de alto debe establecer el full-screen, se necesita una cierta compatibilidad con el W3C, osea, este codigo antes del header xD

<!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">

Esto solo para delimitar el alto del full-screen.

En conclusión, que quiero que funcione

porque por el momento al darle a la imagen (por medio de: <a href="imagen.jpg" class="lightview" title=""><img src="imagen.jpg" alt="" width="200" height="200"></a>) NO me reconoce el script (class=lightview), simplemente me direcciona a la url de la imagen.

Es un "problema" bastante especifico, espero que no suponga un problema.
Muchisimas gracias de antemano, si me consiguen solucionar esto, estaré muy agradecido.
Un saludo

MaBoRaK · #2 (**permalink**) 15/10/2008, 17:37

loading.........

Holas, te falta esto

<a href="imagen.jpg" class="lightview" title="" rel='gallery[myset]' ><img src="imagen.jpg" alt="" width="200" height="200"></a>

connection closed.

filmixt · #3 (**permalink**) 16/10/2008, 11:02

Me temo que no va.

Resulta que hay un conflicto con este tipo de script de imagenes (lightbox, lightview...) por usar los id="", por lo que, al estar usando AJAX para que me incluya el contenido en id="contenidos", el lightview se jode, y no funciona.

¿Como arreglarlo?
Debo usar en vez de id="contenidos" para incluir mi contenido en la pagina a name="" o algo, de forma que no use los id.

He probado con getElementsByTagName, pero no tuve suerte (Se poquisimo de javascript y ajax, solo php y mysql).

Por lo tanto, aqui os dejo bien clarito lo que uso:

codigo.js

Código:

// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono (url, id_contenedor)
{
		
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try 
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versión antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        // función de respuesta
        cargarpagina (pagina_requerida, id_contenedor);
    }

    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send

    pagina_requerida.send (null);

}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
		
    if(pagina_requerida.readyState == 4){
    document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
	}
}

Por otro lado el lightview, y para incluir las paginas uso este enlace:

Código HTML:

<a  href="javascript:llamarasincrono('archivo.php', 'content');" >Enlace</a>

Dentro de archivo.php tengo la imagen para el lightview. En el index es donde tengo enlazado el script del lightview.

Saludos y gracias de antemano.

filmixt · #4 (**permalink**) 16/10/2008, 12:54

Jaja, ¡pongamosle emoción!.

Haré un ingreso bancario de 10€ a la persona que resuelva el problema

Saludos!

Makoto · #5 (**permalink**) 16/10/2008, 13:08

Probaste con EasyGallery, hace algo similar.

filmixt · #6 (**permalink**) 16/10/2008, 13:12

El codigo es el mismo me temo.

MaBoRaK · #7 (**permalink**) 16/10/2008, 13:17

loading............

Postea la URL de tu sitio

connection closed.

filmixt · #8 (**permalink**) 16/10/2008, 13:22

http://filmixt.com/problema/p2.php

El p2.php es el archivo inicial el cual debe funcionar.
demo.htm es el lugar donde está el codigo de la imagen.

Podeis ver todos los archivos (directorio) aqui:

http://filmixt.com/problema/

Saludos y gracias.

NUCKLEAR · #9 (**permalink**) 16/10/2008, 17:10

Pero estas incluyendo dos veces el doctype el head el body, el script.
Prueba en demo.htm solo con esto

<a href="2e22b0_mirros.jpg" rel="lytebox" title="Image Description">Image #1</a>

Me imagino que funcionaria, peeeero quien sabe... ñ.ñ

Saludos

filmixt · #10 (**permalink**) 17/10/2008, 02:31

Me temo que ya lo probé, y vuelvo a probar, pero no va.

#11 (**permalink**) 17/10/2008, 04:14

El problema es bastante simple.

Lo que ocurre es lo siguiente:

1. Se carga p2.php
2. Carga litebox.js. Al cargar, ejecuta la función initLytebox()
3. Esa función lo que hace es buscar en toda la página los enlaces que van con el atributo ese y añadirles el efecto.
4. Pulsas el enlace que carga demo.htm a través de XHR.
5. Cuando se recibe demo.htm se vuelca en el div content, pero NO se ejecuta otra vez el Litebox (esto es normal, no es que esté fallando nada).

Así que a los nuevos enlaces no se les ha añadido el efecto, porque la forma de funcionar no es que esté contínuamente comprobando si debe abrir un litebox o no, es ejecutarse una vez al cargar la página. No es que algo no funcione o que se joda. Es que es así.

Sé que en demo.htm tienes incluído otra vez el litebox.js pero eso no sirve de nada. Cuando cargas una página con XHR sólo se carga la página, no se cargan los javascripts, hojas de estilos, imagenes, etc que tenga asociados. De hecho ni siquiera se ejecuta el Javascript que lleve dentro de <script></script>.

Soluciones? Busca en el foro, que ya se ha hablado bastantes veces de "como ejecuto el javascript que viene en una página que cargo con AJAX?".
O prueba a cargar todos los enlaces de imágenes de una vez. O prueba a ejecutar el initLytebox() cada vez que recibas la respuesta en tu llamarasincrono.

filmixt · #12 (**permalink**) 17/10/2008, 05:10

Dios mio venkman, eres un maquina

Impresionante. Acabo de añadir la simple linea que me dices de initLytebox(); dentro de la función para cargar el contenido, y ¡¡funciona!!.

Muchisimas gracias, de verdad.

Aqui posteo la solución, para que no queden dudas:

Editar codigo.js añadiendo la linea indicada por venkman:

Código:

// Documento JavaScript
// Esta funciÃ³n cargarÃ¡ las paginas
function llamarasincrono (url, id_contenedor)
{
		
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try 
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versiÃ³n antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        // funciÃ³n de respuesta
        cargarpagina (pagina_requerida, id_contenedor);
    }

    pagina_requerida.open ('GET', url, true); // asignamos los mÃ©todos open y send

    pagina_requerida.send (null);

}
// todo es correcto y ha llegado el momento de poner la informaciÃ³n requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
		
    if(pagina_requerida.readyState == 4){
    document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
	} 
	initLytebox();

}

Un saludo y gracias de nuevo!!

filmixt · #13 (**permalink**) 17/10/2008, 05:57

Señores, dado que el Lytebox es bastante limitado, y dado que Lightview es mucho mas extenso en cuanto a opciones, decidí aplicar el mismo cuento con éste, y claro, esta vez no era la funcion initLytebox();

Probé buscarlo con Firebug, pero ya que está codificado el codigo, no encontré nada.

Buscando por google, encontré la función:

Lightview.updateViews();

Todo aquel que quiera usar Lightview en páginas dinamicas con ajax, deberá usar esta funcion, asi que suerte.

Saludos!

filmixt · #14 (**permalink**) 17/10/2008, 09:05

Señores me temo que queda un detalle mas...

Resulta que el lightview se centra en la pantalla si establecemos un DOCTYPE de este tipo:

<!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">

O bien estricto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Con estos funciona perfectamente el lightview, en cambio si uso cualquier otro, si la pagina tiene un alto de 1000px por ejemplo, lo tipico, pues la caratula aparece en la mitad de ésta, por lo que cuando YO bajo la página, la caratula es arrastrada, de forma que crea un bucle y sale fuera de la pagina.

Necesito un Doctype que centre el lightview, porque los DOCTYPE que os he mostrado hacen que se deforme el html, es decir, los cellspacing se joden, (los ignora)

Os he subido la web para que lo veáis.
http://filmixt.com/n1/vq2.php

Las imagenes de las caratulas no se ven, no obstante hay UNA que sí se ve, haz click en la de "Asesinato justo", y una vez que estés en la ficha haz click en la carátula. Aparecerá el efecto. Ahora baja la página y verás que crea un bucle el script infinito.

¿Alguna idea?
Saludos y muchas gracias.

GatorV · #15 (**permalink**) 17/10/2008, 09:33

Hola filmixt,

Creo lo más indicado es que preguntes eso en el foro de HTML ya que esta fuera del rango de lo que es este foro.

Saludos.

filmixt · #16 (**permalink**) 18/10/2008, 04:45

He de decir que ya lo solucioné con uno de esos Doctype.
Muchisimas gracias a todos por haber resuelto el tema, se ve que requería un cierto nivel y habéis dado la la talla sobradamente.
Un saludo!

NUCKLEAR · #17 (**permalink**) 18/10/2008, 08:56

Cita:

Iniciado por filmixt

Jaja, ¡pongamosle emoción!.

Haré un ingreso bancario de 10€ a la persona que resuelva el problema

Saludos!

Supongo que ya lo habras depositado XD

Aprendi algo hoy

filmixt · #18 (**permalink**) 18/10/2008, 10:57

Se lo ofrecí a venkman, pero lo rechazó

Saludos