search

CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

Does MovingBoxes support images of different widths? #81

Open fgosfacdjtq opened 12 years ago

fgosfacdjtq commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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.