Prevent stretching the vertical images, but still show them

[beshur]

Hello. Here is a question, I passed by when customizing the MovingBoxes. When it is know what dimensions of images will be used, it is better not to sctretch horizontally the images inside the element container. CSS: .mb-inside img { width: auto; }

But then they are not seen as next slides. Is it possible to make the next image stick to left side and the previous one to the right side without additional classes?

Thanks. That is an extremely great plug-in :)

/* UPDATE / Possible solution: set reducedSize to 0.3 (for example). and then add in CSS .mb-inside { overflow:hidden; } .mb-inside * { max-width: none / was 100% */; } This should make vertical-oriented images to be seen when they are not active.

[Mottie]

Hi Beshur!

If you set the image size with pixel dimensions, it won't resize. The way MovingBoxes works is that is only resizes the panel, all of the contents that resize are set using a percent dimension. So try this:

.mb-inside img {
    width: 200px; /* set pixel dimension to prevent resizing */
    height: 200px;
}

[beshur]

Thank you for reply, Rob. That worked already - the code I have writter - CSS: .mb-inside img { width: auto) is OK.

My question, how to make stick the narrow (vertical-oriented) images to the edges of their boxes.

Regards, Alex Buznik (shu@buznik.net)

[Mottie]

DOH... ummm did you try text-align:left, or setting an image margin?

[beshur]

Thank you for prompt reply, Rob.

I mean that there is a main image in the middle, it is ok. and image on the left and on the right for navigation, the previous and next ones respectively. So if I make .box-inside img {text-align:left} the 'next' image is fine, but the the 'previous' one is not seen at all in case they both have vertical orientation (narrow). Do you get my point?

Kind regards, Alex Buznik (shu@buznik.net)

[Mottie]

I'm still confused. Do you mean the spacing between the panels? Maybe modify this demo so I can understand better.

[beshur]

Thank you for the fiddle ) I don't quite understand the forking, so I edited the very thing you gave me. Please click the second slide. You can see that the left (previous) image is out of sight. I cropped both 1st and 3rd images as if they had vertical orientation at once.

Is there a way around this?

Thanks.

On Tue, 20 Dec 2011 07:23:20 -0800, Rob G wrote:

I'm still confused. Do you mean the spacing between the panels? Maybe modify this demo so I can

understand better.

Regards, Alex Buznik (shu@buznik.net)

[Mottie]

Hmm, I need a link. If you hit either "Update" or "Fork" the URL will change. So if you could share that :)

[beshur]

Sure, now I understand. http://jsfiddle.net/beshur/fFqta/

[Mottie]

Hmmm, so does the image move to the center when the panel is the "current" one, then move to the right when it is left of the current? I guess we could do something with call backs and adding classes, but I'm still not 100% sure how you would like it to behave.

[beshur]

Thank you for watching, Mottie. The actual problem can be seen here: http://jsfiddle.net/beshur/fFqta/ See, when you click the second slide, you cannot see the previous one. Also there is a screenshot http://i.piccy.info/i7/a84795ce72ba1a28d132c2a1f522dfc5/1-5-2960/45155397/screen.jpg

I'm sorry for not being easy to understand, but the issue seems so clear for me.

[Mottie]

It's not ideal, but try this demo

var shiftContent = function(slider, cur) {
    slider.$panels.removeClass('left right');
    // cur is 1-based, so think of it as +1
    slider.$panels.eq(cur - 2).addClass('left'); // panel to left of center
    slider.$panels.eq(cur).addClass('right'); // panel to right of center
};

$('#slider').movingBoxes({
    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar) {
        shiftContent(slider, tar);
    },
    // callback before any animation occurs
    beforeAnimation: function(e, slider, tar) {
        // get name from title
        // var name = slider.$panels.eq(tar-1).find('h2').text().split(' ')[0];
        shiftContent(slider, tar);
    }

});

[beshur]

Thank you for idea, Mottie. I would like to make more smooth. I am not strong at jQuery, so I made it with CSS. Please see: http://jsfiddle.net/beshur/fFqta/16/

The idea is to stop stretching image:

slider img {

width: auto !important; /\* At all times this stays originally wide */
max-width: none !important

} And the panel to hide overflow: .mb-panel {overflow: hidden;}

I also changed reducedSize to 30%.

What do you think of it?

[Mottie]

Ahhh, I see you meant shrink the entire panel, not move the image. It looks much better than my version LOL.

So do you have any other concerns?

[beshur]

Thank you for all the help, Mottie. It seems that I'm satisfied now. I think it is quite an important thing for the MovingBoxes.

I will soon show my implementation if you are interested.

[Mottie]

Sure! I'd love to see it... I think I need to add a page to the wiki docs to show MovingBoxes in the wild so others can get inspiration too! :P