Bigger images and auto-resize/scaling

[ciampo]

Is there a way to obtain a result similar to the slider of this website ?
http://www.estates-and-wines.com/

I mean, the slider always at full width and at the right height ( so it fills the page), and the images cropped and resized in the right way.

Ps Sorry for my english :)

[joelambert]

Hi,

I think what you're asking is "can I make the slider responsive"? If so then this is on the roadmap but it is difficult given the nature of some of the effects/transitions.

I'll keep you posted on my progress on this issue

Thanks

Joe

[ciampo]

Thanks a lot, i know it would be hard to obtain.
So, i'm wondering if it would be simple in case of the slide transition...

How can i change the slider size with greater images ? Only the initial size, not a responsive behavior... I've seen in the 1.4 version the "width" and "height" options but i didn't managed to make them work..

[joelambert]

The width and height properties are a bit experimental at the moment (they don't work well with the circular transitions).

Its probably worth clearing up what they do and don't do at the moment. They do affect the size of the slider thats produced but they dont cause the images to be resized, just cropped.

Here's an example: http://jsfiddle.net/7kgXw/

As you can see the images are cropped from the top left. If you need to resize the images to a certain size then you'll need to do that with some server side code. By default (when no height/width is provided) Flux will do its best to work out the correct size to create the slider, but it doesn't work well with images that are not the same size.

Hope that helps?

[ciampo]

yes, it helped a lot :) now my slider is resized to fill the right space in the window.. to achieve this behavior i wrote those lines.. is there a better way to do this ? :)

$().ready(function(){
    window.myFlux = new flux.slider('#slider', {
        autoplay: true,
        pagination: false,
        transitions: ['slide'],
        width:600,//$(window).width(),
        height:400//$(window).height()
    });
    resizeSlider();
});

$(window).resize(resizeSlider);

function resizeSlider() {
    var altezzaDiv = $(window).height() - $('header').height() -
        $('footer').height()-$('body').css('margin-top').substring(0,2) - 2; //this will be the right height for the slider

    $('#slider').height(altezzaDiv);
    $('.fluxslider').height(altezzaDiv).width($(window).width());
    $('.images').height(altezzaDiv).width($(window).width());
    $('.image1').height(altezzaDiv).width($(window).width());
    $('.image2').height(altezzaDiv).width($(window).width());


}

now, the only missing thing is the auto-resize of the images.. at the moment (like you said) the are simply cropped

[ciampo]

ok.. i wrote some additional code, making use of the css3 "background-size" property

function resizeImages() {

    var height = $(window).height() - $('header').height() -
        $('footer').height()-$('body').css('margin-top').substring(0,2) - 2; //the right height that my slider should have
    var width = $(window).width();

    var percWidth = width/1600; //the images i used are 1600*1200
    var percHeight = height/1200;
    var perc=percHeight;

    if (percWidth>percHeight)
        perc = percWidth;

    $('.image1').css('background-size', 1600*perc+'px '+1200*perc+'px');
    $('.image2').css('background-size', 1600*perc+'px '+1200*perc+'px');
}

now the images are resized, although the animation is a little "jerky" and slow.
There is a last (for the moment :) ) issue.. when a new animation starts, the divs just created don't have their background image resized.. how can i apply the resizing code i wrote at the begin of a new animation ?

Thanks in advance, really.

[joelambert]

Hi, unfortunately it isn't as easy as just using background-size as what Flux does is slice up the images and create separate divs for each block/slice.

I also don't think you can just arbitrarily resize the images in each slice as the offsets would all be wrong so the slices wouldn't tile correctly.

To use background-image I think Flux would need to have quite a bit of its core code re-written

[ciampo]

understood.. i've searched another (simpler) plug-in to obtain this effect, although this slider is really cool.. keep following your work !! thanks for the help :)

[joelambert]

Some progress has been made on making Flux responsive. Once it's more stable I'll push out a beta.

Will keep you posted on progress with this issue

[ciampo]

Thanks for the effort.. I think it would be a big improvement for this project .. Keep me updated !

[Findarato]

Has there been any progress on this issue?

[joelambert]

Auto resize of images is low priority at the moment given the related technical issues. If you use WordPress then you can use the Flux Slider WordPress plugin which does auto server side image resizing for you.

Making the slider responsive is still a priority but its hard to make it backwards compatible with other browsers, hence the delay.

[Findarato]

Yeah I fully understand. I just saw this on a google search and the last update was 5 months ago. Doing something server side is a GREAT idea. I may just have to make that happen to fix my resize issue.

[gitspice]

any updates on a responsive slider for mobile? we are using drupal - lcan the wp code be ported to drupal easily?

also, on mobile even though the images are all same size, even tried with not specifying size for the slider ...the images keep stretching past the right of the screen on a 1 column layout. on a 2 column sideways layout the images appear correctly on mobile. any ideas how to make the prior work? love the slider effects :)

[BFTrick]

+1 For responsive! :) I hope to see some progress soon so I can use it on my WP site.

[TeaMike]

💯 x pretty please with strawberries on top for responsive :)

[RajuBhosale]

+1 for responsive

[creation-it]

For me it would be great if there is a possibility to deactivate the gallery for devices with smaller displays. I mean, if the window.width is smaller than the slider.width all pictures have to be listed below each other and scale to the container.width.

[marcsan]

+1 for responsive

[eparisio]

Hi, some news on this issue?
i see a video on youtube of the author with this slider responsive but no update there.

+1 for responsive

[AshleyMedway]

Is this feature coming, I saw the YouTube video.
I need this :)

+1 for responsive

[fulgorelizz]

Hi Joel, i have been reading the posts, i got an idea for you, what you say it's true, you use many divs to build effects , but, you can evaluate first width and height image to calculate aspectratio, and then , use those values to create transitions,.. for example, var winWw = window.innerWidth; imgHh = img.heightProperty, then calculate... aspect ratio, new width of image will be the winWw, and new height will be the ratio result, based on this, you can make div transitions, or well, i can see it like that, i dont know how much usefull could it be!!... and use Temp IMG, dont use back-img, using two img with position:absolute , or divs with position absolute you can create transitions adjusting image to new sizes!!! peace! ;)

[YiyuJia]

Hi Joel,

Thank you for this great work! Is the flux responsive now? I am planning to use it. But, my case is that I will put slide in a resizable div. I tried. It looks like it can not be resized when the container div is resized.

thanks and regards,

Yiyu

[Fluchaaa]

if someone is still trying to get this responsive, i did it this way:

var maxWidth = 1920;
var maxHeight = 600;
var ratio = maxWidth/maxHeight;
var sliderid = "#some_id";

$(document).ready(function() {
	$(sliderid).hide();
	var sliderWidth = $(window).width() < maxWidth ? $(window).width() : maxWidth;
	var sliderHeight = sliderWidth/ratio;

	window.fluxslider = new flux.slider(
		sliderid,
		{
			'width': sliderWidth,
			'height': sliderHeight
		});
	responsiveSize();
	$(sliderid).show();
});
$(window).resize(function(){
	responsiveSize();
});

function responsiveSize() {
	var sliderWidth = $(window).width() < maxWidth ? $(window).width() : maxWidth;
	var sliderHeight = sliderWidth/ratio;
	
	$(sliderid+' div').css({
		'width': sliderWidth,
		'height': sliderHeight
	});
}

and in css i added this:

.images div {
	background-size: cover !important;
	background-repeat: none !important;
}