Is it possible ?
WHere I can put new function, like now scroll, or onmouseover ?
jCarousel Lite can triger javascript function before animation and after.
Its already built in:

$(".callback .jCarouselLite").jCarouselLite({
btnNext: ".callback .next",
btnPrev: ".callback .prev",
beforeStart: function(a) {
alert("Before animation starts:" + a);
},
afterEnd: function(a) {
alert("After animation ends:" + a);
}
});

I just dont know how to make a function which will tell Lazy Image Module to load next pictures...

Scrolling in jCarousel Lite not working here :(

Any ideas ?

Comments

benone’s picture

benone commented

I created similiar topic here http://drupal.org/node/754266 .
That could be a big improvement for the performance.

sinasalek’s picture

sinasalek commented

Lazy image loader currently does not have any API for that, i'll write something for that purpose soon. but for now...
Have you tried using this code :

      $(".content img").lazyload({
  	threshhold 	: 0,
        placeholder : "/sites/all/modules/__custom__/lazy_image_loader/images/grey.gif",
        event 		: "scroll",
        effect 		: "show",
        failurelimit	: 10
      });
benone’s picture

benone commented

Hey , thank you for your re.
Where exactly should I use this code ? In jCarouselLite module settings ?

benone’s picture

benone commented

beforeStart: function(a) {
alert("Before animation starts:" + a);
},

this is what I can do in jCarouselLite settings. I can put any function there instead.
Just need to know what Lazy Img Loader function loads visible pictures.

sinasalek’s picture

sinasalek commented

replace the code "alert("Before animation starts:" + a);" with the code i mentioned in #2

benone’s picture

benone commented

beforeStart: function(a) {
$('div.jcarousellite img.imagecache-img120').lazyload({
threshhold : 0,
placeholder : '/sites/all/modules/lazy_image_loader/images/grey.gif',
event : 'scroll',
effect : 'show',
failurelimit : 10
});
},

No sliding at all :(

sinasalek’s picture

sinasalek commented

Did you received any error?

benone’s picture

benone commented

Ok sinasalek, I think I did something which can help you find out whats wrong.
First of all I removed 'a' from function(a) and it started working, but... not always. I dont know why but not every time the pics are loaded.
Carousel works smoothly but sometimes it comes empty, without pictures.

What I did, I used both triggers:

beforeStart: function() {
$('div.jcarousellite img.imagecache-img120').lazyload({
threshhold : 0,
placeholder : '/sites/all/modules/lazy_image_loader/images/transparent.gif',
event : 'scroll',
effect : 'show',
failurelimit : 10
});
},

afterEnd: function() {
$('div.jcarousellite img.imagecache-img120').lazyload({
threshhold : 0,
placeholder : '/sites/all/modules/lazy_image_loader/images/transparent.gif',
event : 'scroll',
effect : 'show',
failurelimit : 10
});
},

After that, pics are loaded always, but... carousel works slower and is not smooth slide. It stops for a second in the end of slide and then finishes with pics loaded. Also after clicking on carousel arrow it starts sliding with a little delay.

I think it could be good to use your function only for 'afterEnd' trigger but when I do that the pictures are loading but the same - not always, there are 3 pics visible in carousel and comes only 1 visible, or 2.. Its a little bit strange.

So I need to use both triggers 'beforeStart' and 'afterEnd' to make sure that the pics will be loaded always.

Maybe you can add some delay to your function or I dont know what, just something which can let the carousel finish the slide and after that load pics.

My testing browsers are the newest firefox and ie6, both do the same. I need to tell you that I use your module and jCarouselLite , coz I found it really good working in ie6 and for me is a MUST to get it working in all IE versions.

Thanks for your co-op once again and I hope with my little help you will find out something to get it work.
Its really important to connect those 2 modules, coz jCarouselLite normally loads all the images and imagine what happens when you have a view with 100 thumbnails...

Tell me what else I can do for testing.

Ben

sinasalek’s picture

sinasalek commented

You can easily delay loading a function via setTimeout. google for more info. However it's really strange because according to your description afterEnd is not really after end!

Try changing "event : 'scroll'," to "event : 'click'," and see if it works now. You'll need to click on images to load them

benone’s picture

benone commented

event: click is not a solution, coz carousel has images which are linked to their nodes.
timeout is also nothing coz carousel will be waiting until your function will finish working so I had a bad idea about that.
what about adding one more event to LIL options ?
jacarousellite event would be good to trigger loading after clicking the arrow. or maybe afterEnd could be the event for LIL ?
what do you thing ?
where are events in your module ?

benone’s picture

benone commented

or even more simple idea: load pictures without event. how can I do that ?
I noticed when pictures slides and the pictures which are not shown are showing after i scroll a little bit a browser window.
so maybe the best will be remove event and just let afterEnd trigger load your function without event? just to show currently visible 3 pictures.
that would be the solution for this issue and we can close it.
what do you think sinasalek ?