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

Circles instead of rectangles? #96

Open currentcreative opened 11 years ago

currentcreative commented 11 years ago

I got the rectangles to become circles in the JSFiddle but the javascript scaling throws everything off so the larger center image isn't centered and the spacing between the slides is off.

http://jsfiddle.net/acV4n/298/

How could I fix this? Ideally, I would like the center image to overlap the side images and all of them be circles.

Mottie commented 11 years ago

Hi currentcreative!

Overlapping the circles might not be possible without changing the internals of the plugin. But I did end up with this demo ... basically I set the li dimensions and set the reducedSize option to 0.5. Will that work for you?

Oh and you'll notice that the last two panels don't work properly, that's because the image sizes are different from the others. And sadly you can't set the image dimensions otherwise they will be fixed as the contents of the panel are all resized based on their auto or percentage dimensions.

currentcreative commented 11 years ago

Hey, thanks so much! That definitely helps. I need to dedicate some time to this and see if I can learn something in the process. :)