Интернет |
Мне бы помощь с Turn.js или другой бесплатный аналог
Есть хороший скрипт Turn.js для имитации перелистывания страниц из картинок. Хороший он тем, что бесплатный. Конечно, среди платных аналогов есть поярче.
В скрипте несколько примеров реализации перелистывания. Основной вариант – скрипт из двух изображений создает разворот книги. Второй вариант – скрипт создает разворот из одного изображения, деля изображения пополам при анимации переворачивания страницы. Это делается при помощи плагина Scissor (это ссылка на оф. документацию).
Вот мне как раз и нужно сделать, чтобы использовался этот плагин Scissor. В скрипте есть пример с использованием этого плагина, но в нем нет всех остальных функций (зум, слайдер, листание кликом или клавой). Поэтому хочу подключить к тому примеру, где эти функции есть, этот плагин, что скрипт брал за раз одно изображение в виде двух страниц, а не 2.
Понимаю, что никто особо вникать в вопрос не будет, но может кто пользовался этим скриптом или все решается не очень сложно.
Вот пример кода, куда нужно подключить Scissor (укороченный вариант):
Далее пошел код для зума, слайдера...
Вот пример реализации с использованием Scissor:
Вот как эту строку $('.flipbook .double').scissor(); со второго примера поместить в первый, чтобы он оставался рабочим?
Или может кто знает подобный скрипт (бесплатный или до 10 у.е.) где все проще, либо он читает PDF.
В скрипте несколько примеров реализации перелистывания. Основной вариант – скрипт из двух изображений создает разворот книги. Второй вариант – скрипт создает разворот из одного изображения, деля изображения пополам при анимации переворачивания страницы. Это делается при помощи плагина Scissor (это ссылка на оф. документацию).
Вот мне как раз и нужно сделать, чтобы использовался этот плагин Scissor. В скрипте есть пример с использованием этого плагина, но в нем нет всех остальных функций (зум, слайдер, листание кликом или клавой). Поэтому хочу подключить к тому примеру, где эти функции есть, этот плагин, что скрипт брал за раз одно изображение в виде двух страниц, а не 2.
Понимаю, что никто особо вникать в вопрос не будет, но может кто пользовался этим скриптом или все решается не очень сложно.
Вот пример кода, куда нужно подключить Scissor (укороченный вариант):
PHP код:
<head>
<title>Using turn.js and the new zoom feature</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="../../lib/hash.js"></script>
</head>
<body>
<div id="canvas">
<div class="zoom-icon zoom-icon-in"></div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button -->
<div ignore="1" class="next-button"></div>
<!-- Previous button -->
<div ignore="1" class="previous-button"></div>
</div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
// Create the flipbook
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
height: 600,
// Duration in millisecond
duration: 1000,
// Hardware acceleration
acceleration: !isChrome(),
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 12,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
$('.thumbnails .page-'+currentPage).
parent().
removeClass('current');
$('.thumbnails .page-'+page).
parent().
addClass('current');
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages***91;i***93;, $(this));
}
}
});
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ***91;'../../lib/turn.js'***93;,
nope: ***91;'../../lib/turn.html4.min.js'***93;,
both: ***91;'../../lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'***93;,
complete: loadApp
});
</script>
Вот пример реализации с использованием Scissor:
PHP код:
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div class="page" style="background-image:url(pages/1.jpg)"></div>
<div class="double" style="background-image:url(pages/2.jpg)"></div>
<div class="double" style="background-image:url(pages/3.jpg)"></div>
<div class="double" style="background-image:url(pages/4.jpg)"></div>
<div class="double" style="background-image:url(pages/5.jpg)"></div>
<div class="double" style="background-image:url(pages/6.jpg)"></div>
<div class="page" style="background-image:url(pages/7.jpg)"></div>
</div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
var flipbook = $('.flipbook');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
$('.flipbook .double').scissor();
// Create the flipbook
$('.flipbook').turn({
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ***91;'../../lib/turn.min.js'***93;,
nope: ***91;'../../lib/turn.html4.min.js'***93;,
both: ***91;'../../lib/scissor.min.js', 'css/double-page.css'***93;,
complete: loadApp
});
</script>
Или может кто знает подобный скрипт (бесплатный или до 10 у.е.) где все проще, либо он читает PDF.