Optimization idea?

[beshur]

Hello again.

I have a question, but it is not about intended use of this plug-in, but never the less.

When images change, the plug-in inspects each element of the slider - to make all the magic with width and hiding not used elements. When there are many images, say >60, this creates a hude load on the browser, and the images don't have a smooth sliding, but jerking.

Is it possible to change only the 3-6 related images - the current, previous and last as long as we know what they will be?

[Mottie]

Well instead of having all 60 images within the slider, why not set up a JSON or some other server side feed of images and related data; then using the built-in callbacks, you could load the previous and next images dynamically.

I've been working on fixing some of the other issues with this plugin, so I haven't had time to set up a demo for you, but I hope that makes sense enough to give a general idea.

[beshur]

Thanks, Mottie. That is an idea :)

Will try to do something with this.

[beshur]

Well, I've been working all day with this thing and cannot get it to work. Could you please help me?

I don't actually know what is JSON server side feed, but plain removing excessive elements and adding new ones is ok for me. So, I want to keep the slider no more than a_numberposts*2 (64 photos now). Here is the code:

jQuery("#slider li").slice(0, a_numberposts).remove(); // remove first 32 elements
var mb = jQuery("#slider");
mb
    .append(response_html[0]) // these are the new slider elements
    .movingBoxes() // when it comes here, the ajax happens again as ```currentPanel==64```, so I make
    .movingBoxes().currentPanel(a_numberposts); // but this does no good.

So how can I add more elements, remove some and keep the slider at the virtually same position (for the uesr)?

Here are some updates: tried this:

mb
    .append(response_html[0])
    .find("li").slice(0, a_numberposts).remove();
    .getMovingBoxes().update()

But here the slider does not update, suppose cause of the second line as we go away from the mb selector. When I try to detach these events, shit happens, too

mb
    .append(response_html[0])
    .find("li").slice(0, a_numberposts).remove();
mb
    .getMovingBoxes().update()
    .movingBoxes();

[Mottie]

Hi beshur!

Try this demo. I basically did as you described, loaded in a bunch of new panels when MovingBoxes gets to a certain point.

There are a few problems with it in that you can't go backwards and if you go through the panels too fast, the animation jumps because I set the animation speed to zero until after all of the images have loaded.

I still think using a JSON feed/file would be best, but I haven't had a chance to work on that demo... I will soon!

[beshur]

Thank you for reply, Mottie. Unfortunately I had no time to work on that project further. So I did not make any kind of images limitation (no detaching after some amount) and it seems to be not critical now. Anyway, thank you for all the help :) Hope will have time to complete this feature one day.

By the way, here is the project I've working on http://masliy.com.ua/portfolio/portraits/

invisiblemx, actually I did not get how auto-sliding is connected to this issue. We were trying to make a feature to remove some images after adding too much.

[Mottie]

Wow very cool site! I really like what you did with the navigation arrows! Thank you for sharing :)

LOL as for the invisiblemx block above... it is because of the line numbers in the code that was posted. Initially the post was straight text without any formatting, which I added later, so Github assumed it was in reference to an issue number.

[dubdesign]

i'd also be interested in a JSON feed as i'm working on a similar sort of website to this