Plugin Lazy-load

[Sarken]

Buenas.

Hasta ahora nunca me había hecho falta postear, mis duda generalmente ya estaban resueltas aquí. Pero me enfrento ahora mismo a un problema cuya causa no se detectar.

Estoy utilizando este útil plugin:

http://www.appelsiini.net/projects/lazyload

El plugin me funciona bien en un contenedor, pero en cuando quiero aplicárselo a varios contenedores en una misma página ya no me funciona, solo me funciona uno, el primero.

Código:

Esta es la parte del script:

Código:

$('img.lazy').lazyload({
container: $('#slider1, #slider2'),
effect : "fadeIn"
});

Y este es el HTML:

Contenedor 1:

Código:

<div id="slider1">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
</div>

Contenedor 2:

Código:

<div id="slider1">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
</div>

////

Ambos contenedores están en la misma página, uno encima de otro, en teoría si en el script especificas a qué contenedores quieres que afecte el lazy load se aplicaría, sin embargo solo se me aplica al primero.

He probado bastantes cosas, como dar otro nombre a la clase: class="lazy" (para contenedor 1) y class="lazy2" (para el contenedor 2).

Pero no consigo hacerlo funcionar.
¿Alguien le ha ocurrido algo semejante o puede ayudarme? Muchas gracias.

[kikeking1]

No conocia el plugin, muy interesante!

Por lo que he podido ver, nos se le pueden pasar dos contenedores a la vez, asi que debes invocar a la funcion tantas veces como contenedores necesites.

Para que funcione correctamente en los dos debes añadir al selector principal el contenedor, quedaria una cosa asi:

Código:

$('#slider1 img.lazy').lazyload({container:$('#slider1),effect:"fadeIn"});
$('#slider2 img.lazy').lazyload({container:$('#slider2),effect:"fadeIn"});

Yo lo he probado y funciona correctamente asi, pruebalo y ya nos cuentas, suerte!

[Sarken]

Buenas!, gracias por responder.

Si te he entendido bien el script me quedaría algo así no?:

Código:

$('#slider1 img.lazy').lazyload({
    container: $('#slider1'),
    effect : "fadeIn"
});

$('#slider2 img.lazy').lazyload({
    container: $('#slider2'),
    effect : "fadeIn"
});

Lo he probado y sigue sin funcionarme. En este caso me funciona slider2, sin embargo el lazy load ignore slider 1.

Esa solución de invocar la función varias veces ya al probé, y no parece funcionar, al final siempre acaba tomando solo uno (generalmente el que primero escribo :S).

[kikeking1]

Yo lo he probado y funciona correctamente. Quizas sea que tanto tu contenedor 1 como tu contenedor 2 tienen el mismo id "slider1", pense que simplemente copypasteaste rapido el codigo, pero de la forma que te falla segun me comentas, empiezo a pensar que puede ser que en tu codigo lo tengas asi, revisalo, que muchas veces los fallos que mas nos traen de cabeza suelen ser errores tipograficos.

Espero que todo sea eso, y puedas seguir avanzando, suerte!

[Sarken]

Buenas de nuevo!:

No es un fallo ortográfico, en el primer post he puesto el código exactamente como lo tengo, lo he revisado ya tantas veces que casi me lo sé de memoria :(.

He hecho dos screenshots de los contenedores (en realidad son scrolls horizontales de imágenes) para que se entienda lo que ocurre con más facilidad (que sólo código es un poco abstracto):

este es <slider1> funcionando bien:

http://i.imgur.com/iscb2.jpg

y este es <slider2> funcionando mal:

http://i.imgur.com/0St5U.jpg

Ese rectángulito blanco que se ve a la derecha es el inicio de las fotos, son como 20 fotos en total, y apartir de ese blanco, todas se van en blanco. Lo extraño es que las dos primeras de <slider2> sí se vean (¿tal vez porque no les afecte el plugin?) pero las restantes no se vean.

Llevo ya casi una semana con este problema, he probado bastantes cosillas, es imposible que venga de un fallo ortográfico, en mi opinión tiene algo que ver con el script. He descartado interferencias con otros scripts quitándolos uno a uno y probando con este nuevo código que me has dado (y con el antiguo).

[Sarken]

Buenas gente.

Bumpeo porque creo que no había puesto una parte del script que también afecta al plugin del Lazy load:

Código:

$(window).load(function(){
var _width = 0;

$('#slider1 li img').each(function(index) {
    _width += $(this).outerWidth();
});

$('#slider1 ul').css('width', _width);

$('img.lazy').lazyload({
container: $('#slider1'),
effect : "fadeIn"
});
});

La parte en negrita no estaba incluida anteriormente. Sin embargo he hecho los cambios pertinentes, añadiendo el slider2, y sigue sin funcionarme.

[Sarken]

¿Nadie puede echarme una mano? :( Seguro que muchos users de por aquí usan o han usado este plugin y han tenido una situación parecida a la mía.

[kikeking1]

Ando algo ocupado estos dias, por eso estoy un poco mas off, si saco algo de tiempo esta noche intento mirartelo.

De todas forma te digo, que intentado emular tu error me percate de una cosa, cuando yo te dije que funcionaba sin problema, es porque las pruebas las hice con el contenedor con scroll vertical, y funcionaba correctamente. Al hacerlo con scroll horizontal, si consegui reproducir el mismo problema que tu comentas. (usando dos contenedores, con uno solo funciona correctamente).

Quizas sea un error del plugin o quizas que falte configurar algun tipo de parametro por nuestra parte, como te digo si tengo algo de tiempo esta noche, lo reviso, mientras tanto echale un ojo a esto que te comento (ponlo en vertical el scroll y comprueba si funciona para confirmar que efectivamente el fallo esta en el scroll horizontal y poder embarcarno de lleno en subsanar este fallo).

Suerte y espero tus impresiones.

[Sarken]

Buenas, pues he probado y efectivamente el problema reside al ser horizontal el scroll, no en el vertical.

[Sarken]

Bueno, creo que me voy a dar por vencido, esto es tan complicado que sólo lo puede arreglar un experto en jQuery abriendo el script y cambiándolo.