[Résolu] Aide intégratition Slicebox

alex83270 · 27-01-2014 23:29:53

Bonsoir,
J'ai trouvé ce très beau slider : http://tympanus.net/Development/Slicebox/

Que j'aimerai intégré sur fluxbb.

Comment faire ?
Je cherche depuis 3h mais sans succès sad .

Amicalement

Dernière modification par alex83270 (28-01-2014 20:30:04)

alex83270 · 28-01-2014 20:28:55

Voici la notice en anglais

Usage

In order to use Slicebox, put your images in an unordered list with the class “sb-slider”:

<ul id="sb-slider" class="sb-slider">
 
    <li>
        <a href="#" target="_blank">
            <img src="images/1.jpg" alt="image1"/>
        </a>
        <div class="sb-description">
            <h3>Creative Lifesaver</h3>
        </div>
    </li>
 
    <li>
        <img src="images/2.jpg" alt="image2"/>
        <div class="sb-description">
            <h3>...</h3>
        </div>
    </li>
 
    <li><!-- ... --></li>
     
    <!-- ... -->
     
</ul>

You can use the div with the class “sb-description” to add any kind of description for the respective image. As shown in this example, you can also add an anchor around the image.

Then you can call the plugin with

$('#sb-slider').slicebox();

Options

Slicebox comes with a set of options that you can adjust for various types of effects:

$.Slicebox.defaults = {
    // (v)ertical, (h)orizontal or (r)andom
    orientation : 'v',
 
    // perspective value
    perspective : 1200,
 
    // number of slices / cuboids
    // needs to be an odd number 15 => number > 0 (if you want the limit higher,
    // change the _validate function).
    cuboidsCount : 5,
 
    // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
    cuboidsRandom : false,
 
    // the range of possible number of cuboids if cuboidsRandom is true
    // it is strongly recommended that you do not set a very large number :)
    maxCuboidsCount : 5,
 
    // each cuboid will move x pixels left / top (depending on orientation).
    // The middle cuboid doesn't move. the middle cuboid's neighbors will
    // move disperseFactor pixels
    disperseFactor : 0,
 
    // color of the hidden sides
    colorHiddenSides : '#222',
 
    // the animation will start from left to right. The left most
    // cuboid will be the first one to rotate
    // this is the interval between each rotation in ms
    sequentialFactor : 150,
 
    // animation speed
    // this is the speed that takes "1" cuboid to rotate
    speed : 600,
 
    // transition easing
    easing : 'ease',
 
    // if true the slicebox will start the animation automatically
    autoplay : false,
 
    // time (ms) between each rotation, if autoplay is true
    interval: 3000,
 
    // the fallback will just fade out / fade in the items
    // this is the time fr the fade effect
    fallbackFadeSpeed : 300,
     
    // callbacks
    onBeforeChange : function( position ) { return false; },
    onAfterChange : function( position ) { return false; }
};

Check out each example and you will see how to create different behaviors with the options.

Hope you find it useful, feedback is welcome!

Dernière modification par alex83270 (28-01-2014 20:29:33)

FluxBB.fr

#1 27-01-2014 23:29:53