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

auto width with fixed height? #43

Open dubdesign opened 13 years ago

dubdesign commented 13 years ago

Hi, this is more of a question than an issue but wasn't sure where to put it.

Is it possible to have a fixed height for images (i wont be displaying any text so the box can be of a fixed height) and adjust the width accordingly rather than the other way round which is how the default system does it.

Just to explain what i'm trying to do i want to use this as a filmstrip across the page so i want all images to scale to 400px high for example with the width scaling to keep the correct aspect ratio for the original image. So some images might need to be 300px wide and others might need to be 900px wide maybe, both 400px high.

Hope that makes sense

Mottie commented 13 years ago

Do you want the images inside to expand as well? I'm asking because I was helping someone with a basic page of images, but they had to resize with the page and maintain aspect ratio. Check out the forum thread and the last demo.

If that doesn't work for you (it's not really a slider), ummm, I think what you are asking would be possible, but I haven't looked at the code yet so I don't know how much of a pain it might be LOL.

dubdesign commented 13 years ago

not entirely sure what you mean when you say "Do you want the images inside to expand as well?" Basically i could have 100 images all at various heights and widths which i need to display with a fixed height (400px as an example).

What i want to do is just switch from the default sizing which creates the divs with a fixed width (50% of total width) and fluid height to having a fixed height with a fluid width

Mottie commented 13 years ago

I was asking about the images expanding because that is part of this plugin. The centered/active image enlarges - it's more apparent in the second demo on the main demo page. Or I should say, the non-active images are reduced in size using the reducedSize option.

I had a busy morning so far, but I'll look into it soon.

dubdesign commented 13 years ago

ah ok yeah i got you. No i dont need it to expand, i have that option set to 1 so the current image is the same size as the rest of the images. Thanks for your help

dubdesign commented 13 years ago

ok i've been playing around a little with some of the code (i dont know javascript that well so i haven't touched that bit yet) and i can get all of the images to the correct width and height using php so thats not a problem. The problem i have now is that the

  • tag is being given a fixed width based on the display width which you set in the script but what i need is to be able to set the
  • width for each individual image and set the
      width to accomodate all of the images. Once thats done i'm sure i'll run into a problem with centering the current
    • on the screen but i'll worry about that later. For now could someone help with the javascript i'd need to use to set the
    • to the width of the contained image rather than the fixed size thats being used please?

  • Mottie commented 12 years ago

    Hiya!

    Sorry I think I saw, then forgot about your last post... darn holidays ;)

    Anyway, here is a demo I made of different sized images all forces to be the same height, but with different widths and centered.

    Is that what you were wanting?

    dubdesign commented 12 years ago

    sorry for taking so long to reply, i've had a busy week. Just had a look at the demo and unfortunately its not quite what i'm looking for as the images aren't scaling proportionally.If the height of the image is increased the witdth should be increased proportionally to keep the aspect ratio correct, this does work to some extent but the width is limited to the size of its container so the aspect ratio is then screwed up. Its possible i could use this (i think i did try something similar when i was playing around) by setting the panel width at a very large percentage to ensure the image always fits width wise, however doing this will mean that there will only ever be 1 panel shown at a time with lots of white space on smaller images. What i also tried was romoving the panel width altogether, doing this though set the width to that of the 1st image (if i remember correctly) and also meant that the panels weren't centered on the page. Basically what i need is for the panel widths to be fluid so that they expand and contract based on the width of the image but remain centered. Its got to be possible, its just how complicated its going tobe to do!

    Mottie commented 12 years ago

    Hmm, yeah, to make the panels truly have a dynamic width, I'd have to do a lot of code reworking, not to mention the pain it'll be to keep the resizing and centering of the current panel correct.

    Honestly, I'm going to be really busy for the next month or so and I won't even have time to consider looking at this. I won't guarantee that I'll start working on it immediately after I have more free time again, but I'll dig a bit deeper to see how feasible changing the code is going to be. Especially since I've had requests to make the slider height based and vertically scroll.

    If you have a situation where you need something now, try out AnythingSlider (which I also work on) which already has most of these abilities, except for resizing and centering the current panel.