kemkem

Topic: resize image 'code side'

Hey,

I want to resize dynamically images, according to image orientation (portait or landscape)

I think that the only way to do this is editing jquery.galleria.js, inserting some code around loader function.

My idea is the following :
Checking height and width, applying a css styles like in the thumbs treatment.

something like
_img.css({ height: 'auto', width: '640'});
I tried, but not working..

Can someone help me on that ?

Thanks for this fantastic gallery smile

Marc

David

Re: resize image 'code side'

why don't you just use CSS?

Code:

img {height:auto;width:640px}
David's Website

kemkem

Re: resize image 'code side'

Yes, of course, but this trick is not suitable if you have both portait and landscape images

I want 'a smart' resize, the longest side scale to 640, the other auto

ex: if landscape, apply
height: 'auto', width: '640'
if portrait,
height: '640', width: 'auto'

See what I mean ?
Thanks a lot for your answer

kemkem

Re: resize image 'code side'

..
I guess there's only 1 instance of image at a time, so I couln'd apply a specific css class to each picture, am I right ?

So, I that possible to explore dom each time [next] or [previous] are called, to apply css class according picture aspect ?
If so, witch dom object could I try to find ?
And how can I intercept [next] or [previous] events ?

Thanks a lot

kemkem

Re: resize image 'code side'

I found a partial solution, pasting this code at the end of "$$.onPageLoad = function(_src)"
I do not understand very well jquery yet (i'm working on it), I guess it's a pretty ugly code..

var width = $(_img).width();
    var height = $(_img).height();
    var _imgObject = document.getElementById('mainImg');
    if (_imgObject)
    {
        if (width > height) //landscape
        {
            _imgObject.width = 640;
            _imgObject.height = 480;
        }
        else //portrait
        {
            _imgObject.width = 480;
            _imgObject.height = 640;
        }
    }

milindpc31

Re: resize image 'code side'

Hi kemkem,
have you got any solution fot this issue further???
Please kindly can you help me out regarding

kemkem

Re: resize image 'code side'

No, but this solution works nicely
Have you tried it ?

I'm currently integrating jcarousel+galleria, it's much more complicated than this "tweak"
Especially css works (I'm planning a vertical jcarousel)

PY

Re: resize image 'code side'

I'd love to implement your solution, but i dont see how to do it.

if i paste it:

$$.onPageLoad = function(_src) {
[...]
// place the source in the galleria.current variable
$.galleria.current = _src;

HERE

}

OR HERE

it doesnt work!

any help?

enm

Re: resize image 'code side'

This worked for me.

Simply add it to the onImage:function in your html page

if ($(image).width() < $(image).height()){ //landscape
    image.css('width','394px');
    image.css('height','525px');
}
else{ //portrait
   image.css('width','700px');
   image.css('height','525px');
}