כולנו צריכים כזה דבר לפעמים
نحن جميعا بحاجة إلى شيء من هذا القبيل في بعض الأحيان
Based on Bookblock code created by Codrops. License: http://tympanus.net/codrops/licensing/
The main difference is that we view 2 pages at a time (and each has a "full-screen" link).
bootstrap.rtl.min.css is not anything official. I just filtered a bootstrap.min.css via a dumb search/replace of right<->left ["copyleft" was manually fixed :)]. This gives it that "most probably responsive" seal of quality.
You can flip pages with clicks, swipes, keyboard arrows, or the links around the title. Quite a lot to choose from ;).
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>RTL flipbook demo</title> <link rel="stylesheet" type="text/css" href="bookblock.css"> <link rel="stylesheet" type="text/css" href="thinkil.css"> <link href="bootstrap.rtl.min.css" rel="stylesheet"> <script src="modernizr.custom.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="ie10-viewport-bug-workaround.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="html5shiv.min.js"></script> <script src="respond.min.js"></script> <![endif]--> </head> <body> <div class="container" dir=rtl> <div class="page-header text-center"> <h4> <a href="#" title="להתחלה" class="firstpage"> <span class="glyphicon glyphicon-fast-forward"></span></a> <a href="#" title="לדף הקודם" class="prevpage"> <span class="glyphicon glyphicon-step-forward"></span></a> תוכניה: "<a target="_blank" href="https://www.hanochlevin.com/productions-israel/malkat-ambatia">מלכת אמבטיה</a>" <small>RTL flipbook demo</small> <a href="#" title="לדף הבא" class="nextpage"> <span class="glyphicon glyphicon-step-backward"></span></a> <a href="#" title="לסוף" class="lastpage"> <span class="glyphicon glyphicon-fast-backward"></span></a> </h4> </div> <div class="row"> <div class="col-xs-12 col-md-10 col-md-offset-1"> <div id="bb-bookblock" class="bb-bookblock"> <div class="row bb-item"><!-- pages 0-1 --> <div class="col-xs-6 col-md-6 ti-right-page"> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 1" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/1.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/1.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 2-3 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/2.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 2" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/2.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 3" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/3.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/3.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 4-5 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/4.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 4" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/4.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 5" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/5.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/5.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 6-7 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/6.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 6" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/6.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 7" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/7.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/7.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 8-9 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/8.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 8" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/8.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 9" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/9.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/9.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 10-11 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/10.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 10" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/10.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 11" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/11.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/11.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> <div class="row bb-item"><!-- pages 12-13 --> <div class="ti-fullscreen-right"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/12.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> <div class="col-xs-6 col-md-6 ti-right-page"> <a href="#" class="prevpage"><img class="img-responsive" alt="עמוד 12" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/12.jpg"></a> </div> <div class="col-xs-6 col-md-6 ti-left-page"> <a href="#" class="nextpage"><img class="img-responsive" alt="עמוד 13" src="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/13.jpg"></a> </div> <div class="ti-fullscreen-left"> <a target="_blank" title="הגדלה" href="https://www.hanochlevin.com/images/galleries/programmes/malkat_ambatya/13.jpg"> <span class="glyphicon glyphicon-fullscreen"></span> </a> </div> </div><!-- /.bb-item --> </div><!-- /.bb-bookblock --> </div> </div> </div> <!-- /container --> <script src="jquery.min.js"></script> <script src="jquerypp.custom.js"></script> <script src="jquery.bookblock.js"></script> <script> var PAGE_ASPECT = 1900./1700.; // w/h of a "typical" single page scan var Page = (function() { var config = { $bookBlock : $( '#bb-bookblock' ), $navNext : $( '.nextpage' ), $navPrev : $( '.prevpage' ), $navFirst : $( '.firstpage' ), $navLast : $( '.lastpage' ) }, init = function() { config.$bookBlock.height(config.$bookBlock.width()/(2.*PAGE_ASPECT)); $(window).resize(function() { config.$bookBlock.height(config.$bookBlock.width()); console.log([config.$bookBlock.width(),config.$bookBlock.height()]); }); config.$bookBlock.bookblock( { speed : 800, direction: 'rtl', shadowSides : 0.8, shadowFlip : 0.7, onBeforeFlip: function( page ) { $('div[class^="ti-fullscreen-"]').hide(); }, onEndFlip: function( page, isLimit ) { $('div[class^="ti-fullscreen-"]').show(); }, } ); initEvents(); }, initEvents = function() { var $slides = config.$bookBlock.children(); // add navigation events config.$navNext.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'next' ); return false; } ); config.$navPrev.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'prev' ); return false; } ); config.$navFirst.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'first' ); return false; } ); config.$navLast.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'last' ); return false; } ); // add swipe events $slides.on( { 'swipeleft' : function( event ) { config.$bookBlock.bookblock( 'prev' ); return false; }, 'swiperight' : function( event ) { config.$bookBlock.bookblock( 'next' ); return false; } } ); // add keyboard events $( document ).keydown( function(e) { var keyCode = e.keyCode || e.which, arrow = { left : 37, up : 38, right : 39, down : 40 }; switch (keyCode) { case arrow.left: config.$bookBlock.bookblock( 'next' ); break; case arrow.right: config.$bookBlock.bookblock( 'prev' ); break; } } ); }; return { init : init }; })(); </script> <script> Page.init(); </script> </body></html>