Dynamically adjust skitter slideshow images size - javascript

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>

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

Related

Variation of image in JS [duplicate]

This question already has an answer here:
Change image width by screen size
(1 answer)
Closed 2 years ago.
I tried to solve the problem by myself, but I don't know.
When the width of the screen decreases or expands,
how can I reduce or increase the width of the image in JS?
I had an image in a table and in order to have it adapt to the table I used this class in my css :
.img-fluid {
max-width: 100%;
height: auto;
}
It would be much easier to make the image resize with the window in css rather than js.
If your image looks something like this:
<div class="Somediv">
<img src="somesource" class="Someimage"></img>
</div>
Your css can look like this:
.Somediv {
width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}
.Someimg {
display: block;
width: 100%;
}
If you really want to do it through JS here is the official documentation on element.classList which will help you do what your trying to do.
You don't need Javascript to do this. This can be done through CSS only, You need to set image width to 100% to make it responsive on browser window resize. when you resize your browser window it will automatically takes height according to image width in same aspect ratio.
you need to write a css code like this:
img.img-responsive {
width: 100%;
}

How do I Change image size using flux slider

I want to use flux slider for the website I am building... Everything works fine except that I am not able to change Image size... I have tried the following jquery
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true,
width: 300,
height: 300,
transitions: ['bars3d']
});
});
but this crops the image to the size i specify insted of scaling.
is there any solution? please help.
Changing the height to 0 and setting your width to negative should do it.
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {
pagination: true,
width: -300,
height: 0,
transitions: ['bars3d']
});
});
There are three possible problems (not sure as you not added html/css r fiddle);
1) You are resizing image container where as you have set height and width to images as well e.g. <img src="blahblah.jgp" height="900" width="500" /> removing height/width will fix the issue.
2) Secondly, check if you some css not making js to override i.e. you areusing !important with images css (height/width) applied on images.
3) Last but not the least, try this in addition setting images container height/width through js that you are already doing, this will make images to automatically fit to their container.
img{
max-width: 100% !important;
height:auto 100% !important;
display:block 100% !important;
}
Also try adding !important with your js too. hopefully any of them will work for you.
good luck

Background-image resize after window-size

I'm pretty new to web-development and web-design, and I'm working on a website for a company right now(www.momentium.no). They want to have the background image(s) at the top recognize the browsers window-size, so that the image(s) fills the whole screen and don't show the content below before you scroll down when you load the website.
Could anyone of you check this out? Would be great to get a little bit of help!
Thanks,
Yngvar
Setting the height to 100% using CSS will work, but you'll have to revise your HTML structure in order to maintain it's flow when the window is resized.
Otherwise, you can try the following code snippets:
JS:
var $imageWrapper = $('#background-image'),
$contentSpacer = $('section#wrapper > header'),
// Some buffer value, adjust this to get the rest of the content aligned properly
buffer = 200;
// Set the div height on pageload
$(document).ready(function() {
var windowHeight = $(window).height();
$imageWrapper.height( windowHeight );
$contentSpacer.height( windowHeight );
});
// Change the div height on window resize
$(window).resize(function() {
var $this = $(this),
thisHeight = $this.height();
// Set the height of the image container to the window height
$imageWrapper.height( thisHeight );
$contentSpacer.height( thisHeight - buffer );
});
CSS:
#background-image {
background-size: cover;
// Change this to the minimum height your page will support
min-height: 600px;
}
The rest of the code you have seems correct, so adding these should fix things up. A couple of things to keep in mind here:
The JS isn't placing any limitation on the height being applied here, so the CSS will still apply even if the window is resized to 10px height. Most designs have a minimum height/width before breaking, so using a min-height on your #background-image div might be a good idea.
Check the browser support before implementing, if you need to support one of the unsupported browsers, you'll need to either write a fallback or restructure your code in such a way that it degrades gracefully. IE9+, Chrome21+ and FF26+ should be good enough though.
Looks like you're using a spacer in the main section to ensure that the page content comes in after the main slider. The structure of the page can be modified so that you don't have to modify two element heights. As I mentioned at the beginning, you can probably use the pure CSS solution if you restructure.
You can have 2 solutions :
As Pete says, you can use "background-size" css3, but it will not be compatible for older browser
You can use javascript with $(window).height() and $(window).width
The Only Way is create a repponsive design for your company..all the problem will be solved by responsive design...
Change the image size depends upon the browser window size Other wise
change the image to another one also possible
You can set the height of your "background-image" div to 100%, it will work.
Check this code:
#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}

Lightbox image max-height = user screen height

I'm building an image gallery for a photographer. You can find the site here.
What I'm trying to do is set the height of the image so that it will never fall off the screen. In other words:
lightbox img { max-height:100%; max-width:auto; }
This however, doesn't work. Since my ul parent's height is larger than the screen.
The images are all around 1000px or higher. And ofcourse we don't want to offer them falling off the screen. Does anyone have any idea how I might solve this problem?
Thanks in advance!
With pure CSS you could use media queries for example: (attention -> CSS3!)
#media screen and (max-height:700px) {
#lightbox img { max-height: 690px; }
}
With jquery its more dynamic and even simpler:
$('#lightbox img').css('max-height', $(document).height()));

Proportionally resizing a full-screen image using "supersized" jQuery plugin

I'm using a jQuery plugin called Supersized to display images in full screen.
You can see a sample here (on homepage): http://mysampleconcept.com/situs4/
If you try to shrink the screen, you will notice that the image will resize too, however it may shrink too much that the image will look bad.
The same plugin is used here as well: http://mysampleconcept.com/situs3/; however, the resizing is done differently so the image doesn't go out of proportions.
I have tried to compare the plugins settings on both sites and they both seem to be similar.
I have tried setting the image width and height to 100% !important in my css and it didn't help.
Any suggestion on how to achieve the same behavior?
The issue is from the common css that does your image all base on "max-width:100%".
Check your css reset if there is something like
img { max-width: 100%; }
The supersized official has a solution for the file "supersized.3.2.7.js":
https://github.com/buildinternet/supersized/issues/103
If you can not solve it by following the official solution, try only add this in your supersized css:
#supersized img { max-width: none; }
this tricky is by http://blog.valderama.net/node/30
When I removed
#supersized img {
width: 100% !important;
height: 100% !important;
}
it seems to work.
Although not an optimal solution, I was able to solve this by adding min-width and min-height to the supersized image

Categories

Resources