javascript - Dynamically adjust skitter slideshow images size - Stack Overflow

admin管理员组

文章数量:1289623

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

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>

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/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>

• javascript
• jquery
• html
• css
• skitter-slider

Share Improve this question Follow edited Apr 20, 2014 at 8:34 Iman 19k77 gold badges8686 silver badges9393 bronze badges asked Mar 22, 2013 at 17:50 PramodPramod 12911 silver badge1212 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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.

Adding the desired style to following class solved the problem

.box_skitter img {      width: 530px ; }

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 :)

本文标签： javascriptDynamically adjust skitter slideshow images sizeStack Overflow