Does MovingBoxes support images of different widths?

[fgosfacdjtq]

In looking at the code, I see that the update function sets the widths of all images to be the same as the width of the first image:

# if o.panelWidth is false
base.pWidth = (o.panelWidth) ? (o.panelWidth <=2 ? o.panelWidth * base.width : o.panelWidth) : base.$panels.eq(0).width();
base.curWidth = (o.panelWidth) ? (o.panelWidth <=2 ? o.panelWidth * base.width : o.panelWidth) : base.pWidth;
base.$panels.css({ width: base.curWidth, fontSize: '1em' });

Is there any thought to adding the ability to handle different width images?

[fgosfacdjtq]

Here is the start to an implementation of my request: http://jsfiddle.net/Wb2Ra/5/ It takes images of different widths and heights (known in advance) and scales them according to o.reduceSize. All I'm doing is saving the original widths in the data() section of each panel instead of always using the first panel width.

At the current moment, it is working for a limited use case.

[Mottie]

Hi @fgosfacdjtq!

It seems that the centering of the images is still a bit off. Sadly, I don't have much free time lately to work on this enhancement, but it is on my to-do list.

[fgosfacdjtq]

I noticed that too. Either the marginLeft value in update() or the leftValue in change() is incorrectly calculated in my version. Can you give me some background on the purpose of those values and I'll try to come up with a fix?

[Mottie]

The margin left is needed to center the very first panel in the viewport because scrollLeft cannot be a negative number.

leftValue is a calculated to determine the left side of the current panel. It uses the panel position() as well as the width of the current panel to center it in the viewport. Additional subtraction is needed to center the panel in case the last current panel was to the left of the current panel because the panel width was modified by the reducedSize option (which in fact could also enlarge all non-current panels). Also realize that when the wrap option is true, a clone of the last slide is positioned on the far left that also has its size altered.

I'm sure changing the plugin from using scrollLeft to left would make it better and work with various panel sizes, but as I said I just haven't had the time to work on it.

Maybe the best solution would be to just start with AnythingSlider's code and just make it always center the panel.