Turn.js

el 14.05.2019 a las 14:35 por williamernestfleming · 2 comentarios

Tengo dos webs clonadas en un simple php, con una cascada de if y else, y en una de ellas tengo un código script que genera un libro pero no carga en una de ellas y no encuentro el error. Y en la línea 430 me dice el explorador que no está declarada esa variable.


<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>e!Volutio Pro: presentacion</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>
<style>
	body{
		background-color: #e6e6e6!important;
	}

	.homeButton{
	transition-duration: 0.5s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
    
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0.1s;

    -ms-transition-duration: 0.5s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: 0.1s;
}
.homeButton:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);

    transform: scale(1.2);
}
</style>
</head>
<body>

    <div style="z-index: 300; position: absolute; left: 10px; top: 10px; width: 100%; height: 70px; font-family: Impact Label Reversed, Verdana; font-size: 25px;"><a href="/"><img class="homeButton" src="/images/home_icon_back.png" title="Home" width="55"/></a></div>

<div id="canvas">
<div class=""></div>
<div class="magazine-viewport">
	<div class="container">
		<div class="magazine">
					<div style="background-image: url(/books/pages-presentacion/1.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/2.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/3.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/4.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/5.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/6.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/7.jpg)">
				
			</div>
					<div style="background-image: url(/books/pages-presentacion/8.jpg)">
				
			</div>
					<!-- Next button -->
			<div ignore="1" class="next-button"></div>
			<!-- Previous button -->
			<div ignore="1" class="previous-button"></div>
		</div>
	</div>
</div>

<!-- Thumbnails -->
<div class="thumbnails">

<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: 1200,
		width: 850,
		
			// 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,

			// 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[i], $(this));

				}
			}

	});

	// Zoom.js

	$('.magazine-viewport').zoom({
		flipbook: $('.magazine'),

		max: function() { 
			
			return largeMagazineWidth()/$('.magazine').width();

		}, 

		when: {

			swipeLeft: function() {

				$(this).zoom('flipbook').turn('next');

			},

			swipeRight: function() {
				
				$(this).zoom('flipbook').turn('previous');

			},

			resize: function(event, scale, page, pageElement) {

				if (scale==1)
					loadSmallPage(page, pageElement);
				else
					loadLargePage(page, pageElement);

			},

			zoomIn: function () {

				$('.thumbnails').hide();
				$('.made').hide();
				$('.magazine').removeClass('animated').addClass('zoom-in');
				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
				
				if (!window.escTip && !$.isTouch) {
					escTip = true;

					$('<div />', {'class': 'exit-message'}).
						html('<div>Press ESC to exit</div>').
							appendTo($('body')).
							delay(2000).
							animate({opacity:0}, 500, function() {
								$(this).remove();
							});
				}
			},

			zoomOut: function () {

				$('.exit-message').hide();
				$('.thumbnails').fadeIn();
				$('.made').fadeIn();
				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');

				setTimeout(function(){
					$('.magazine').addClass('animated').removeClass('zoom-in');
					resizeViewport();
				}, 0);

			}
		}
	});

	// Zoom event

	if ($.isTouch)
		$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
	else
		$('.magazine-viewport').bind('zoom.tap', zoomTo);


	// Using arrow keys to turn the page

	$(document).keydown(function(e){

		var previous = 37, next = 39, esc = 27;

		switch (e.keyCode) {
			case previous:

				// left arrow
				$('.magazine').turn('previous');
				e.preventDefault();

			break;
			case next:

				//right arrow
				$('.magazine').turn('next');
				e.preventDefault();

			break;
			case esc:
				
				$('.magazine-viewport').zoom('zoomOut');	
				e.preventDefault();

			break;
		}
	});

	//URIs - Format #/page/1 

	Hash.on('^page\/([0-9]*)$', {
		yep: function(path, parts) {
			var page = parts[1];

			if (page!==undefined) {
				if ($('.magazine').turn('is'))
					$('.magazine').turn('page', page);
			}

		},
		nop: function(path) {

			if ($('.magazine').turn('is'))
				$('.magazine').turn('page', 1);
		}
	});


	$(window).resize(function() {
		resizeViewport();
	}).bind('orientationchange', function() {
		resizeViewport();
	});

	// Events for thumbnails

	$('.thumbnails').click(function(event) {
		
		var page;

		if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
		
			$('.magazine').turn('page', page[1]);
		}
	});

	$('.thumbnails li').
		bind($.mouseEvents.over, function() {
			
			$(this).addClass('thumb-hover');

		}).bind($.mouseEvents.out, function() {
			
			$(this).removeClass('thumb-hover');

		});

	if ($.isTouch) {
	
		$('.thumbnails').
			addClass('thumbanils-touch').
			bind($.mouseEvents.move, function(event) {
				event.preventDefault();
			});

	} else {

		$('.thumbnails ul').mouseover(function() {

			$('.thumbnails').addClass('thumbnails-hover');

		}).mousedown(function() {

			return false;

		}).mouseout(function() {

			$('.thumbnails').removeClass('thumbnails-hover');

		});

	}


	// Regions

	if ($.isTouch) {
		$('.magazine').bind('touchstart', regionClick);
	} else {
		$('.magazine').click(regionClick);
	}

	// Events for the next button

	$('.next-button').bind($.mouseEvents.over, function() {
		
		$(this).addClass('next-button-hover');

	}).bind($.mouseEvents.out, function() {
		
		$(this).removeClass('next-button-hover');

	}).bind($.mouseEvents.down, function() {
		
		$(this).addClass('next-button-down');

	}).bind($.mouseEvents.up, function() {
		
		$(this).removeClass('next-button-down');

	}).click(function() {
		
		$('.magazine').turn('next');

	});

	// Events for the next button
	
	$('.previous-button').bind($.mouseEvents.over, function() {
		
		$(this).addClass('previous-button-hover');

	}).bind($.mouseEvents.out, function() {
		
		$(this).removeClass('previous-button-hover');

	}).bind($.mouseEvents.down, function() {
		
		$(this).addClass('previous-button-down');

	}).bind($.mouseEvents.up, function() {
		
		$(this).removeClass('previous-button-down');

	}).click(function() {
		
		$('.magazine').turn('previous');

	});


	resizeViewport();

	$('.magazine').addClass('animated');

}

// Zoom icon

 $('.zoom-icon').bind('mouseover', function() { 
 	
 	if ($(this).hasClass('zoom-icon-in'))
 		$(this).addClass('zoom-icon-in-hover');

 	if ($(this).hasClass('zoom-icon-out'))
 		$(this).addClass('zoom-icon-out-hover');
 
 }).bind('mouseout', function() { 
 	
 	 if ($(this).hasClass('zoom-icon-in'))
 		$(this).removeClass('zoom-icon-in-hover');
 	
 	if ($(this).hasClass('zoom-icon-out'))
 		$(this).removeClass('zoom-icon-out-hover');

 }).bind('click', function() {

 	if ($(this).hasClass('zoom-icon-in'))
 		$('.magazine-viewport').zoom('zoomIn');
 	else if ($(this).hasClass('zoom-icon-out'))	
		$('.magazine-viewport').zoom('zoomOut');

 });

 $('#canvas').hide();


// 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/magazine1.js', '/css/magazine.css'],
	complete: loadApp
});

</script>

</body>
</html>

1 comentario

smalonso Mod

el 14.05.2019 a las 20:31

Uf! Eso en el sector se llama código espagueti.

No me he leído el código, pero sin indagar mucho ya se ve que tienes etiquetas HTML sin cerrar, y puede que no esté cogiendo la variable si alguna librería javascript no está bien enlazada. Utiliza herramientas de debug por Dios 😨

Por cierto, no utilizaría mucho más la librería javascript Turn.js, ya que el código hace 7 años que no se mantiene y es problable que esté obsoleta (deprecated) para usarla actualmente.

Responder
Me gusta
williamernestfleming respondió el 15.05.2019 a las 19:27 1 respuesta

Entra o únete Gratis para comentar

Seguro que tienes mucho que decir, te estamos esperando.

Iniciado por

williamernestfleming

Se unió en julio de 2017

Toledo, España

4 temas
21 comentarios

Otros temas en este foro

problemas para abrir localhost con MAMP

Hola! Estoy empeando con el wordpress y ya me encallo al iniciar el MAMP :( Se me instala perfec...

por fantzy
- 61
- 60
Ayuda con fallos en el servidor Mysql de MAMP

Hola, MAMP me funcionaba perfecto pero desde ayer sin haber hecho nada especial el servidor Mysql...

por chete
- 20
- 43
Migrar wordpress de local a remoto -Problema

Hola, Estoy migrando una web en WP local a mi servidor remoto he buscado muchos tutoriales y enco...

por chete
- 11
- 23
Visualizar los post de custom post type desde un ítem de menú en Wordpress

Hola! llevo unos días peleándome con este tema y no encuentro la solución. 1/ he creado un apart...

por Víctor Sánchez
- 7
- 9
PHP aplicado a Wordpress

Hola, actualmente me encuentro realizando bastantes proyectos en Wordpress, la cosa es que quisie...

por genz0
- 6
- 11
Recomendarme un buen curso on-line de wordpress de calidad.

Hola, necesito hacer un curso on-line de wordpress de calidad. ¿me podéis aconsejar alguno por fa...

por nuria_utrilla
- 5
- 8