Geek Answers Handbook

Dynamically adjust image size of slider images

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

it always loads the main images of full width and height, and control using the following methods does not work.

you can download a sample of a full working example of a scripter and easily check it

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

you can resize the image slider container following the sample code, but if the images, if they are larger than 530 pixels, only some of its parts will be displayed.

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

as well as setting the width and height of images in img tags does not help.

Below is a more specific scenario in the original question that might help.

I wrote the code below to dynamically adjust image size when resizing a window using skitter and jquery. but does not work with him.

 <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>
+6
source share
4 answers

It would be easy to change the width your images to 100% with css and remove / set the width and height from .box_skitter , .container_skitter

+3
source

I had problems with this in a similar project. I tried changing every single image size in CSS (some worked, but most did not). What I did was convert each photo to PNG and resize it in Photoshop or Paint (I used Photoshop). As you may know, PNG is a betteer while maintaining clarity when resizing, but it takes up more space than JPG, so this may not be the most preferable option, but it should get the trick.

+3
source

Adding the desired style to the next class solved the problem

 .box_skitter img { width: 530px ; }
+2
source

Hi, I am doing this hack whit css, to create a 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 :)

0
source

More articles:


All Articles