October 7, 2011 6

Flux Slider v1.4 Released

By

Flux Slider Swipe transition

Version 1.4 of Flux Slider is now available for download from GitHub. There has been a lot of additions in the latest version, read on for all the details.

View Transition Gallery | Download @ GitHub

Whats new in v1.4?

Three new transitions

Brand new in v1.4 are 3 new transitions to pick from, these include:

  1. Swipe, which produces blends between two images (requires a browser that supports CSS Masks).
  2. Dissolve, which is a simple opacity fade and ironically the most requested new transition.
  3. Blocks2, this is a variable on the original Blocks transition but transitions from top-left to bottom-right rather than in a random pattern.

Be sure to try them out in the online Transition Gallery.

Images can be associated with a link

If an image is wrapped in a link, the image when presented by Flux is now clickable. For example:

<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
    <a href="anotherpage.html"><img src="img/imagewithlink.jpg" alt="" /></a>
    <img src="img/tron.jpg" alt="" />
</div>

Gracefully degrades in unsupported browsers

Flux no longer falls over with browsers that don’t support CSS transitions. By default images will just instantly switch but its possible to add you own custom fallback code, I’ll write a blog post on this in the coming weeks.

Full Changelog

  • Added support for img tags nested inside a. These images inherit the link from their parent and are clickable.
  • Flux will now run when jQuery is in compatibility mode.
  • Added basic inbuilt next/prev buttons. Pass in controls: true to the constructor.
  • Flux no longer silently fails on unsupported browsers, it builds the slider but just switches from one image to the other.
  • Refactored setup code so that it works on IE.
  • Added a lock to ensure that the finish() function of flux.transition only ever fires once per transition.
  • Added support for swipeLeft & swipeRight when used with Zepto.js.
  • Forced hardware acceleration on the slide transition so that it works better on iOS.
  • The next() & prev() functions now pass on the left/right param for supported transitions.
  • Created an abstract transition called transition_grid which can be extended to produce grid based transitions.
  • Refactored the following transitions to use transition_grid: bars, bars3d, blinds, blinds3d, blocks, tiles3d, zip. This reduces the size required to define each transition and ensures row/column rendering is done with the same code.
  • Added supportsCSSProperty function to perform feature checking on the browser.
  • Each transition can now check for browser compatibility at load time using compatibilityCheck.
  • Added the swipe, dissolve and blocks2 transitions.
  • Added support for captions. Caption text is read from the title attribute of the img elements. Captions need to be enabled by passing captions: true into the constructor.
  • Ensured that images still switch if no valid transitions are available.
  • Autoplay now uses setTimeout rather than setInterval so that the delay between transitions is started only when a transition has completed. This prevents the case where a transition might take longer to execute than the provided delay time.
  • Jean_claude

    Fabulous! Having a set of images set up as book pages, the transition TURN would be most appropriate to use for the project I am developing. Having no knowledge of javascript, I attempted to set the code so TURN would be the only transition I would use, but I failed miserably. I would be MOST grateful if you could tell me what to do. Cordially. JC

  • Ruy Jol

    Hi

    this is a nice slider but i can’t get it work!

    this is what I have: 

            $(function(){
            if(!flux.browser.supportsTransitions)
                alert("Flux Slider requires a browser that supports CSS3 transitions");
            window.f = new flux.slider('#slider', {
                pagination: true
            });
        });

    in CSS div#slider div.fluxslider { -moz-box-sizing:content-box; -webkit-box-sizing:content-box; -ms-box-sizing:content-box; box-sizing:content-box; padding:10px 0 !important; overflow:hidden }

    and then

    but, I get a slider with a cropped image, I dont know how to show it complete, what am I doing wrong?

    thanks for your work and help

  • http://www.joelambert.co.uk Joe Lambert

    Could you post a link to a working example of your above code so that I can take a look for you?

  • Ruy Jol

    I appreciate your interest, but already fixed it, it was a matter of adding two lines in my CSS style file.

  • Mark

    Any support for IE fallbacks such as a slide transition? AWESOME Slider btw..

  • http://www.joelambert.co.uk Joe Lambert

    Hi Mark, this is possible but it is not currently bundled in the release.

    I have implemented a simple fade fallback which is included in the commercial WordPress plugin version, I may create a blog post sometime soon about how you can create fallback transitions.