IE10 has now full support for CSS3D however the Flux slider does not recognize them
I just tried the IE10 Preview for Windows 7

See also:
http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3d-transforms-in-ie10.aspx

Greetings,
George

How to Choose Only One Transition?
Thiw code does't work:
window.myFlux = new flux.slider('#slider', { transitions: [ 'turn', 'bars3d' ] });

Hi, I'm extremely new to html, css, jquery etc. I have a class assignment to build a website in dreamweaver, coz we just learnt how (yay!). and I really want to impress my lecturers and classmates during my presentation, could you please help me and tell me what to do if I want to take out the transition list from the side and just use the 'bars 3d' transition whenever an image is clicked on? I should mention that my assignment is due in 2 days... any help would be appreciated 😃

I have the wp-plugin version running here: http://shandobilcommunications.com/about/ and if I click away from the page and click back, sometimes the whole window flashes black when the slideshow transitions. I'm working on pinpointing the problem, but I thought I'd post just in case this was a known issue.

Can anybody show me how to add 2 or more sliders in single page?

thanks,
Luca

The CSS styles for the helper elements (pagination, caption, next/previous links) should be moved to an external CSS file, to allow easy overriding and customization. Otherwise, we have to use the !important flag to override the inline styles set by the JS code.

The next/previous buttons don't even have a class name set, so customizing them without CSS3 selectors is very difficult.

Hi Joe, thanks for the great slider. Love it so much!
But I have some problems about the pagination. I want to make the pagination from image that can be changed when the current page is active. So the image is different between the non-active image with the current image. I've successfully change the pagination number become image but can't make it change with the image transition. How can i do that?

Big thanks!

Hi,

please wrap your code inside a closure so jQuery.noConflict works as expected.

This worked for me:

(function ($) {
//..
window.flux = flux;
} )( jQuery );

Can't open a pull request from here as I am in customers buro atm. If you want me to fork and pull that let me know.

best regards and nice work

Sebastian

Is there any way not to display it on any versions of FF < 4?

What is your usecase for this? Is is that you don't want it to run in FF<4 because it doesn't support transitions? If so then a better solution is to only show Flux when CSS transitions are supported by the browser.

To do this you can do something like

if(flux.browser.supportsTransitions) {
    window.f = new flux.slider('#slider');
}
else {
    // Do something else
}

If instead you have some genuine need to do browser sniffing then I suggest you search for regex expressions for filtering FF<4

Hope that helps?

Now that Firefox 10 has CSS 3D transforms, the Flux Slider should use them but it still complains that the browser does not support 3D transforms.

Seems to me the detection code is wrong.

Hope you can fix it Joe!

Greetings,
George Petrov

...all the other transitions work great!

Can you add this features please?

I'm not sure what an image gallery should do when I flick through images fast, but Flux Slider's implementation feels less than ideal.

Clicking any button on http://www.joelambert.co.uk/flux/transgallery.html several times results in any previous transitions being skipped, so that the one triggered by the very last click can start straightaway. To get a more smooth experience, personally, I'd rather create a chain or queue of transitions, so that transitions have to wait for previous ones to complete.

Of course, many clicks would introduce a potentially annoying delay. Perhaps transitions could be sped up or skipped when the queue size reaches a certain threshold? Just an idea.

Also, the current implementation isn't necessarily bad, so there should probably be a toggle parameter in the API.

Regardless, keep up the good work!

It it possible to set a callback that is called if the imageanimation ends? I would like to use flux as clickable slider.

 <a href="#dynamicUrlChangedByFluxl">
 <div id="slider">
     <img><img><img>
</div>
</a>

Thx.

This one would be awesome..

Unable to specify images size - requiered when they do not match.
Would be very usefull.

can I add .image1 & .image2 "background-size: cover;" to make the slider responsive?

Cool component!
is it possible to support image displayed in full screen and can resize if the browser window resized?

I'm experiencing the issue with Safari 5.1.7 on Windows 7 x64 using the latest Flux-Slider revision from github.

You can reproduce it by simply adding a form element to the demo page, for example a text input, or a select element. Click in, or just focus the form element (note that buttons won't cause the behaviour when clicked), and then start the Bars 3D transition. You should now see that the bars are flickering as if the backface visibility goes on/off/on/off/on/off in some areas.

I haven't found a workaround or fix yet, but i'll let you know in case you're not beating me to it :)

Regards
Timo

delete me i have written an error issue

Hi Joe,

Yes I know this awesome slider is all about CSS 3D, but can you make it at least look good with 2D transitions in IE?

Nivo Slider has a pretty good old browser compatibility support... so it can still look pretty in IE.

At least use the 2D transforms from IE9 and do some basic transitions for older browsers.

That will be really cool and people can still see the slider even if they have an older browser.

Thanks your work is greatly appreciated!

-George

Hi,

Sorry if this is not the place to post such a question - can you specify the number of columns that make up the Blinds3D transition?

Thanks,
Steven

Can you post an example code for how to select transitions effect with array sintax?

As soon as firefox 4, ie10 and others start supporting css animations/transitions, the code that checks only for webkit engine will start to fail.
Instead can check for the specific set of functions modernizr style and if all checks pass, let users see the flux.

I got the flux slider working generally fine. However im having problems with the way some browsers display the transitions. Im using autoplay and caption = true and bars3d transition effect.

1. Firefox and Safari work fine
2. Opera just does a normal switch from one image to the next. No transition.
3. Chrome seems to work fine. However there is a random flickering. The image appears and dissapears for a split second.
4. IE seems to not be supported at all however can flux be used for a standard image swap in this case?

http://www.brutal.yoursitedesigned.com/ - website

Any help you could give me for solving any of my issues would be really great.

Thanks

Jon

I think it would be great if there is an onTransitionEnd event so that I can manipulate the blocks when a transition occur. Thanks, Great work by the way :)

Hey and thanks for the great works , is RTL in the project roadmap ?

I'm using the 'slide' transition. It looks great sliding left with .next() but when sliding right with .prev() the image revealed during the slide is the next one rather than the previous one. When the transition is complete, the image switches to the correct (previous) one.

Any idea what's causing this? Thanks!

I am using Flux together with Zepto showing 1080p images on big television screen. Flux is used as kind of a screensaver. There is also an information box over the image. This is just some HTML. Code is the following.

var screensaver = new flux.slider("#screensaver", {
    autoplay: true,
    delay: 12000,
    pagination: false,
    transitions: ["dissolve"],
    onTransitionEnd: function(data) {
        /* Show correct information box,*/
        var index = screensaver.currentImageIndex;
        $(".box").addClass("hidden");
        var box = "#box-" + index;
        $(box).removeClass("hidden");
    }
});

However I noticed that something leaks memory. When slideshow starts Safari Web Content uses 150MB memory.

After 20 minutes it already uses around 400MB

Eventually it fill the memory and computers will grind to halt

Love the script and would like to use it.
I have a lot of images so is it possible to have a random image sequence and als load from an external data file

Thanks for your efforts.

Steve

I think that preload images is a good configuration option for new release.
Can you add it please?

Hello,
I tested http://www.joelambert.co.uk/flux/ .

I get an Error that my browser does not support css3 transitions and i get a error that the browser also isn`t able to use 3d transform!
Tested in IE 10 and 11 on windows 8.1 as operating system.

In Mozilla are the images sometimes only half shown. Briefly the images get halved!

See blog post for the request

When using automatic transitions, the timer should be reset when the user changes slides on their own. Currently, the timer keeps going, leading to unexpected behavior if a user changes slides near the automatic transition time (ie, they choose the slide, and then very shortly after, it transitions again)

Is there a plan to add some sort of graceful degradation for older browsers? As it is now it just stops working with an alert message, would be nice that it'd still work at least with a simple fade transition

how can i adjust this slider for images of size 1024x350 px??? please help me

Ok, so before anyone else says. I'm more or less a noob when it comes to certain things!

I have been able to implement the slider, however i cannot specify a transition? Am i calling it in the wrong place?

 window.f = new flux.slider('#slider',  {
            autoplay: true,
                pagination: false,
                transitions: bars3d

});

});

Hi,
I have some problem to catch link in:

Example:

  <a href="#link1"><img src="a.png" /></a>
  <a href="#link2"><img src="a.png" /></a>
  <a href="#link3"><img src="a.png" /></a>
</div>

Is link unsupported? Or I wrong something in CSS?

regards
GF

I forced the the slider's size to 800x600 during initialization:

window.myFlux = new flux.slider('#slider', {
autoplay: false,
captions: true,
controls: true,
width: 800,
height: 600
});

Each image in the slide has different size. For both Concentric and Warp transitions, the image's position is shifted before the animation start (usually about 50~100 pixels toward the top left but it varies)

Hi,
thiere is a way to use this amazing slider with a list of images with different size?

Example:

  <img src="a.png" /> <!-- 320x256 -->
  <img src="b.png" /> <!-- 640x640 -->
  <img src="c.png" /> <!-- 512x300 -->
</div>

Thanks, regard
GF

If I go to: http://www.joelambert.co.uk/flux, I get ugly:

Not Found

The requested URL /flux was not found on this server.

Try with 1024 x 768 sized images for instance.

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

I think it will be much better if we could be able to use HTML formatted text in captions. For example i want that my captions contain some heading, some small description and hyper link. But if the Flux read the caption's content from the img title attribute it is almost impossible. Of course we can use something like that : <img src="..." title="<h1>Some Heading</h1>.." but it is not really comfortable ;)

Is there a way to display, in a div like #controls, alt and/or title of current image?

thanks,
LP

Awesome slider!

Would be even cooler if there were additional options to control...

1. the direction of the transitions (e.g. to allow selection of any possible directions for each one)
2. the number of tiles/slices used in a given transition (throttling this automagically would be fantastic but probably not doable)
3. the duration of each transition (currently hardcoded to 400ms?)

And simple vertical and horizontal 3d flip (i.e. rotation about the central axis) transitions would be great too.

Hi,
First off I wanted to thank you for this very fine piece of software.
Now my request: is there a way you can use images twice as big as the slider size without cropping them?
I tried to experiment a bit with jQuery but I couldn't come up with anything.
Do you have a clue?
Thank you very much and keep up the good work.
Yannick

Similar of pagination, can you add output div to show current positions in images array like "[1-X]/X", where X is the numers of gallery images?

thanks,
LP

Hello...can u show me how to make manual navigation with this slider?
I want to make the main menu of the website that I make with this slider, just like amazon...but this time using your awesome flux slider. So I want to give 4 menu (wtih text or image), and when someone click the navigation, it will show the slider with the effect.

Thank you