direction ltr and rtl don't seem to have an effect

[finnbuster]

I've been trying to configure this plugin to animate in the oposite direction and with a horizontal orientation. The orientation works but the direction doesn't seem to have an effect as the default rtf seems to still be in effect. I've also noticed that shadows also don't seem to be working with this configuration:

$( '.bb-bookblock' ).bookblock({
    orientation : 'horizontal',
    direction   : 'ltr',
    autoplay    : true,
    interval    : 3000,
    circular    : true,
    shadows     : true,
    shadowSides : 0.2,
    shadowFlip  : 0.1
});

<div class="bb-bookblock">
    <div class="bb-item"><img src="image.png"></div>
    <div class="bb-item"><img src="image.png"></div>
    <div class="bb-item"><img src="image.png"></div>
</div>

[finnbuster]

Also, what's a simple implementation of the plugin for multiple instances on the page all with the same class?

[ruddog]

For multiple instances you can give element (each slider) as parameter to function smth like:

var Page = (function(elem) {
var config = { $bookBlock : $( '.bb-bookblock',elem ), $navNext : $( '.bb-nav-next',elem ), $navPrev : $( '.bb-nav-prev',elem ), $navFirst : $( '.bb-nav-first' ,elem), $navLast : $( '.bb-nav-last' ,elem) }, ..... })();

take a look on demo https://github.com/codrops/BookBlock/blob/master/index.html , i hope you got the idea.

[finnbuster]

Am I misunderstanding the direction option? Does it not determine the direction that the animation of the pages play? I assumed that the direction would change the page motion from right to left to left to right as though you were reading a book backwards but the option doesn't seem to have any effect on that. I'm also hoping to achieve a reversed horizontal effect to achieve an effect similar to the old aeroplane schedule boards that flipped down. Help would be appreciated!

[ruddog]

Direction just change where the next page is from left or from right of current position,by default direction ltr in this project http://mag.walla.co.il/ we changed it to rtl and its work fine. Hope this helps.

[finnbuster]

I'd like to do something like this but it's not working. It performs one transtion with some weird artifacts (only half the flip is visiable and then it stops). What am I doing wrong?

$( '.bb-bookblock' ).each( function( i ) {

    var $bookBlock = $( this ),
        //$nav = $bookBlock.next().children( 'span' ),
        bb = $bookBlock.bookblock( {
            // speed : 600,
            // shadows : true,
            // shadowSides : 0.2,
            // shadowFlip  : 0.1,
            // vertical or horizontal flip
            orientation : 'horizontal',

            // ltr (left to right) or rtl (right to left)
            direction : 'ltr',

            // speed for the flip transition in ms.
            speed       : 1000,

            // easing for the flip transition.
            easing      : 'ease-in-out',

            // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
            shadows     : true,

            // opacity value for the "shadow" on both sides (when the flipping page is over it).
            // value : 0.1 - 1
            shadowSides : 1,

            // opacity value for the "shadow" on the flipping page (while it is flipping).
            // value : 0.1 - 1
            shadowFlip  :1,

            // if we should show the first item after reaching the end.
            circular    : true,

            // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
            //nextEl      : '',

            // if we want to specify a selector that triggers the prev() function.
            //prevEl      : '',

            // If true it overwrites the circular option to true!
            autoplay        : true,

            // time (ms) between page switch, if autoplay is true. 
            interval        : 3000,

            // callback after the flip transition.
            // page is the current item's index.
            // isLimit is true if the current page is the last one (or the first one).
            //onEndFlip   : function( page, isLimit ) { return false; },

            // callback before the flip transition.
            // page is the current item's index.
            //onBeforeFlip: function( page ) { return false; }
        } );

} );

[liujihaozhy]

sorry,i don`t know

At 2013-11-04 05:11:30,finnbuster [email protected] wrote:

I'd like to do something like this but it's not working. It performs one transtion with some weird artifacts (only half the flip is visiable and then it stops). What am I doing wrong?

$('.bb-bookblock').each(function(i){var$bookBlock=$(this),//$nav = $bookBlock.next().children( 'span' ),bb=$bookBlock.bookblock({// speed : 600,// shadows : true,// shadowSides : 0.2,// shadowFlip : 0.1,// vertical or horizontal fliporientation:'horizontal',// ltr (left to right) or rtl (right to left)direction:'ltr',// speed for the flip transition in ms.speed:1000,// easing for the flip transition.easing:'ease-in-out',// if set to true, both the flipping page and the sides will have an overlay to simulate shadowsshadows:true,// opacity value for the "shadow" on both sides (when the flipping page is over it).// value : 0.1 - 1shadowSides:1,// opacity value for the "shadow" on the flipping page (while it is flipping).// value : 0.1 - 1shadowFlip:1,// if we should show the first item after reaching the end.circular:true,// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.//nextEl : '',// if we want to specify a selector that triggers the prev() function.//prevEl : '',// If true it overwrites the circular option to true!autoplay:true,// time (ms) between page switch, if autoplay is true. interval:3000,// callback after the flip transition.// page is the current item's index.// isLimit is true if the current page is the last one (or the first one).//onEndFlip : function( page, isLimit ) { return false; },// callback before the flip transition.// page is the current item's index.//onBeforeFlip: function( page ) { return false; }});});

— Reply to this email directly or view it on GitHub.