Форум Сайтостроение Веб-строительство

Мне бы помощь с Turn.js или другой бесплатный аналог

xoxol4uk22
На сайте с 14.11.2017
Offline
66
xoxol4uk22
895

Есть хороший скрипт Turn.js для имитации перелистывания страниц из картинок. Хороший он тем, что бесплатный. Конечно, среди платных аналогов есть поярче.

В скрипте несколько примеров реализации перелистывания. Основной вариант – скрипт из двух изображений создает разворот книги. Второй вариант – скрипт создает разворот из одного изображения, деля изображения пополам при анимации переворачивания страницы. Это делается при помощи плагина Scissor (это ссылка на оф. документацию).

Вот мне как раз и нужно сделать, чтобы использовался этот плагин Scissor. В скрипте есть пример с использованием этого плагина, но в нем нет всех остальных функций (зум, слайдер, листание кликом или клавой). Поэтому хочу подключить к тому примеру, где эти функции есть, этот плагин, что скрипт брал за раз одно изображение в виде двух страниц, а не 2.

Понимаю, что никто особо вникать в вопрос не будет, но может кто пользовался этим скриптом или все решается не очень сложно.

Вот пример кода, куда нужно подключить Scissor (укороченный вариант):

<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, $(this));

				}
			}

	});

// Load the HTML4 version if there's not CSS transform

yepnope({
	test : Modernizr.csstransforms,
	yep: ['../../lib/turn.js'],
	nope: ['../../lib/turn.html4.min.js'],
	both: ['../../lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
	complete: loadApp
});

</script>

Далее пошел код для зума, слайдера...

Вот пример реализации с использованием Scissor: 

<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: ['../../lib/turn.min.js'],
	nope: ['../../lib/turn.html4.min.js'],
	both: ['../../lib/scissor.min.js', 'css/double-page.css'],
	complete: loadApp
});

</script>

Вот как эту строку $('.flipbook .double').scissor(); со второго примера поместить в первый, чтобы он оставался рабочим?
Или может кто знает подобный скрипт (бесплатный или до 10 у.е.) где все проще, либо он читает PDF.

S
На сайте с 30.09.2016
Offline
469
Sitealert
#1

Дык написано же

// Using scissor
$("#flipbook .double").scissor();
// Creating the flipbook
flipbook.turn({
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
xoxol4uk22
На сайте с 14.11.2017
Offline
66
xoxol4uk22
#2
Sitealert:
Дык написано же

Т.е. так?

function loadApp() {

 	$('#canvas').fadeIn(1000);

 	var flipbook = $('.magazine');
	$("#flipbook .double").scissor();

	
	// Create the flipbook

	flipbook.turn({

Не, так не работает(( так я и сам пробовал((

[Удален]
#3

Гляньте здесь. Все укр... т.е. разработано до вас.

Во всяком случае, показан пример использования turn.js вкупе с scissor.

S
На сайте с 30.09.2016
Offline
469
Sitealert
#4
xoxol4uk22:
Не, так не работает(( так я и сам пробовал((

Неправильно пробовал. Тут элемент flipbook - это $('.magazine'), а не $('#flipbook'), И там нет ещё элементов с классом double в вёрстке.

То есть надо создать в этом магазине элементы double, порезать их с помощью scissor, а потом включить turn.

Учитывается ли ПФ со CMS для сайта с Бесплатный нагон трафика на
xoxol4uk22
На сайте с 14.11.2017
Offline
66
xoxol4uk22
#5
Sitealert:
Неправильно пробовал. Тут элемент flipbook - это $('.magazine'), а не $('#flipbook'), И там нет ещё элементов с классом double в вёрстке.
То есть надо создать в этом магазине элементы double, порезать их с помощью scissor, а потом включить turn.

Спасибо большое. Да, когда пробовал я в эту сторону немного мыслил. Поэтому пробовал flipbook заменять словом magazine, прописывать double к страницам... Но ума довести до конца не хватает... Попробую сейчас еще.

---------- Добавлено 05.08.2019 в 18:40 ----------

В общем нашел я пока простенькую альтернативу: BookBlock

Этот скрипт берет одну картинку для разворота. К сожалению, анимация похуже и нет слайдера или миниатюр, а также зума. Но зум я какой-то прикручу сторонний попробую.

Помогите настроить редирект на Скрипт js сворачивающий текст Dim0n2007 / edmitry

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий