Dynamically adjust skitter slideshow images size

Question

How to resize (scale) slide images to a different size from jquery or css or any other ways?

it always load the main images full width and height and controlling with following ways does not work.

you can download sample full working skitter sample and test it easily yourself

no help is found inside http://www.skitter-slider.net/documentation

it is possible to resize the images slider container by following sample code but if the images if larger than 530 px it will only shows some part of it.

$(document).ready(function() {
           $('.box_skitter_large').css({width: 530, height: 110}).skitter({
                theme: 'minimalist',numbers_align: 'center'                 
            });    
        });
    </script>

also setting images width and height in img tags does not help .

the following is the more specific scenario in the original question which may help.

I wrote the below code to dynamically adjust images size on window resize using skitter and jquery . but its not working pls help

<script>
$('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});

$(window).resize(function() {
   $('.box_skitter_normal').addClass("z1").skitter({label: false, numbers: false});
            $('.box_skitter_normal2').addClass("z2").skitter({label: false, numbers: false});
});
</script>

Answer 1

An easy would be to change the width of your images to 100% using css and removing/setting the width and height from .box_skitter, .container_skitter

Answer 2

I had problems with this in a similar project. I tried changing each individual picture size in CSS (some worked, but most did not) What I wound up doing is converting each photo to a PNG and resizing in either Photoshop or Paint (I used photoshop). As you may know PNG's are betteer at retaining clarity when resizing, but it does take up more space than a JPG, so it might not be the most preferable option, but it should get the trick done.

Answer 3

Adding the desired style to following class solved the problem

.box_skitter img {      width: 530px ; }

Answer 4

Hello i do this hack whit css, for make dinamyc width whit skitter galery;

.container_skitter{
    width: 100%!important;
    height: 100%!important;
}
.image_main{
    width: 100%!important;
    height: 100%!important;
}
.box_skitter_large {
    max-width: 408px !important;
    max-height: 275px !important;
}
.box_clone{    width: 100%!important;
    height: 100%!important;}
.cube{width:100% !important;}

I hope this works for you :)