1 seguidor

Hola a todos;

Como veréis, os comento un problema que tengo en una web que estoy desarrollando y me esta dando algún problema que otro.

Tengo un galería de imágenes y quiero darle un efecto de flipbook, para lo cual después de haber usado programas que generan código abierto para ese tipo de visualización encontré uno con javascript use por un tiempo y me ha gustado, pero al querer aplicarlo a un nuevo proyecto este efecto no carga, las imágenes se desbordan de la caja de visualización sin aparecer en navegador y las mismas imágenes funcionan como botones para el desplazamiento pero al cargar la pagina aparecen mezcladas con el footer, al mirar desde el navegador el error por consola dice que es por el zoom pero lo he corregido y sigo sin encontrar porque no funciona .

Os muestro el código que tengo hasta el momento:

<!DOCTYPE html>

<span title="Spanish"><a lang="es" href="qa-html-language-declarations.es"></a></span>

<head>
<meta charset="utf-8">
<title>Plantilla Cero</title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

	
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/estilo_general.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/color.css" />


<link href="skins/default.css" rel="stylesheet" />



</head>

<body>
<div id="wrapper"><!-- contenido general del body -->
	<section id="content">
	<!-- start header -->
	<header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
					<img src="img/fondo/image_640x250.jpg" alt="logo" a class="navbar-brand-img flexslider" href="index.html"/>
                    <a class="navbar-brand" href="index.html"><span>L</span>ogo</a><!-- Titulo o Logo -->
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html" >Inicio</a></li><!-- Botones -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Caracteristicas<b class=" icon-angle-down"></b></a>
                            <ul class="dropdown-menu"> <!-- Menu desplegable -->
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="components.html">Components</a></li>
								<li><a href="pricingbox.html">Pricing box</a></li>
                            </ul>
                        </li>
                        <li><a href="portafolio.html">Portafolio</a></li>
						<li class="active"><a href="magazine.html" >Catalogos</a></li>
                        <li><a href="blog.html" >Blog</a></li>
                        <li><a href="contact.html" >Contactenos</a></li>
                    </ul>
                </div>
            </div>
        </div>
	</header>
	</section >
	<!-- end header -->

	<section id="inner-headline">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<ul class="breadcrumb">
					<li><a href="#"><i class="fa fa-home"></i></a><i class="icon-angle-right"></i></li>
					<li class="active">Catalogos</li>
				</ul>
			</div>
		</div>
	</div>
	</section>
	<section id="content">
			<div class="container">
				<!-- inicio catalogo -->
			
									<h2 class="nowrap">Catalogo</h2>
							
										<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>

								<!-- Thumbnails -->
			
												<div class="thumbnails">
													<div>
														<ul>
															<li class="i">
																<img src="img/pages/1-thumb.jpg" width="76" height="100" class="page-1">
																<span>1</span>
															</li>
															<li class="d">
																<img src="img/pages/2-thumb.jpg" width="76" height="100" class="page-2">
																<img src="img/pages/3-thumb.jpg" width="76" height="100" class="page-3">
																<span>2-3</span>
															</li>
															<li class="d">
																<img src="img/pages/4-thumb.jpg" width="76" height="100" class="page-4">
																<img src="img/pages/5-thumb.jpg" width="76" height="100" class="page-5">
																<span>4-5</span>
															</li>
															<li class="d">
																<img src="img/pages/6-thumb.jpg" width="76" height="100" class="page-6">
																<img src="img/pages/7-thumb.jpg" width="76" height="100" class="page-7">
																<span>6-7</span>
															</li>
															<li class="d">
																<img src="img/pages/8-thumb.jpg" width="76" height="100" class="page-8">
																<img src="img/pages/9-thumb.jpg" width="76" height="100" class="page-9">
																<span>8-9</span>
															</li>
															<li class="d">
																<img src="img/pages/10-thumb.jpg" width="76" height="100" class="page-10">
																<img src="img/pages/11-thumb.jpg" width="76" height="100" class="page-11">
																<span>10-11</span>
															</li>
															<li class="i">
																<img src="img/pages/12-thumb.jpg" width="76" height="100" class="page-12">
																<img src="img/pages/13-thumb.jpg" width="76" height="100" class="page-13">
																<span>12-13</span>
															</li>
															<li class="i">
																<img src="img/pages/14-thumb.jpg" width="76" height="100" class="page-14">
																<img src="img/pages/15-thumb.jpg" width="76" height="100" class="page-15">
																<span>14-15</span>
															</li>
															<li class="i">
																<img src="img/pages/16-thumb.jpg" width="76" height="100" class="page-16">
																<img src="img/pages/17-thumb.jpg" width="76" height="100" class="page-17">
																<span>16-17</span>
															</li>
														</ul>
													</div>	
												</div>
										</div>

							
			
	<!-- cierre catalogo -->
			</div>
	</section>
			
			
	
	<!--==============================Cierre contenido efecto catalogo================================-->

	<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: 17,

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



</script>
				
	<!--==============================Cierre contenido================================-->
	
	
	<!-- Pie de pagina -->
	<footer>
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Pongase en contacto con nosotros</h5>
					<address>
					<strong>Monster of the desing</strong><br>
					 Direccion agencia<br>
					 En algun lugar de la tierra </address>
					<p>
						<i class="icon-phone"></i> Telefono (123) 456-7890 - Celular (123) 555-7891 <br>
						<i class="icon-envelope-alt"></i> email@domainname.com
					</p>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Páginas</h5>
					<ul class="link-list">
						<li><a href="#">Press release</a></li>
						<li><a href="#">Terminos y condiciones</a></li>
						<li><a href="#">Politica de privacidad</a></li>
						<li><a href="#">Centro de proyectos</a></li>
						<li><a href="contactenos.html">Contactenos</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Ultimas Publicaciones</h5>
					<ul class="link-list">
						<li><a href="#">Enlace trabajos.</a></li>
						<li><a href="#">Enlace trabajos</a></li>
						<li><a href="#">Enlace trabajos</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Enlaces a otras paginas o redes sociales </h5>
					<div class="flickr_badge"><!-- Visualisacion recuadro pie de pagina -->
						
					</div>
					<div class="clear">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="sub-footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="copyright">
						<p>
							<span>&copy; Monster of the desing All right reserved. By </span><a href="http://bootstraptaste.com" target="_blank">Bootstraptaste</a>
						</p>
					</div>
				</div>
				<div class="col-lg-6">
					<ul class="social-network">
						<li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
						<li><a href="#" data-placement="top" title="Google plus"><i class="fa fa-google-plus"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

3 comentarios Ir al último comentario

Más antiguos

phpninja

el 03.12.2018 a las 16:08

Puedo verlo online? pega una URL please.

Responder
Me gusta
cruzpawn respondió el 07.12.2018 a las 14:38 1 respuesta
cruzpawn

el 04.12.2018 a las 21:36

Claro que si de momento lo tengo alojado en este sitio.

https://monsterofdesingandart.000webhostapp.com/magazine.html

Tengo esta versión que había hecho antes."dejo un video"

Responder
Me gusta
lauratt

el 14.12.2018 a las 10:45

En el archivo jQuery%203.3.1.js en la primera línea tienes un comentario que inicia con / * Hay un espacio en blanco entre el el / i el * de modo que no te carga el resto del archivo. Borra el espacio y prueba de nuevo.

Responder
Me gusta

Entra o crea tu cuenta para comentar

Seguro que tienes mucho que decir, te estamos esperando.

Comenta en el foro

Crea tu cuenta y aprende con profesionales creativos como tú

Regístrate con tu email

Al hacer clic en "Crear cuenta" certifico que tengo 16 años o más y acepto las Condiciones de Uso, la Política de Privacidad, la Política de Cookies y recibir novedades y promociones.

Iniciado por

cruzpawn

Se unió en noviembre de 2018

Bogotá, Colombia

1 tema
2 comentarios

Otros temas en este foro

Como simular carga de contenido al ir haciendo scroll

Hola a todos! Bueno...os pregunto algo que tengo en mente para un proyecto web nuevo al que me t...

por markosci
- 4
- 5
Javascript función return

Hi!!! gente, estoy empezando con esto de javascript, alguien me podría decir que tipo de objeto p...

por Lestat
- 0
- 4
Como mandar un Mail al destinatario de un formulario en JavasCript

Hola que tal. Necesito ayuda con un formulario para rellenar en Javascript y no tengo ni idea de ...

por mads_creativo
- 0
- 5
Problema con html que se carga en un div mediante Javascript

Hola a todos; Veréis, os comenta un problema que tengo en una web que estoy desarrollando y me e...

por Marcos Nieto
- 0
- 6
Prestashop o woocommerce

Saludos a toda la comunidad. Un cliente me pregunta si es mejor Prestashop o Woocommerce para su ...

por David Brat
- 1
- 1
CMS y Necesidades de los Clientes - ¿Hasta qué punto hace falta?

¡Hola gente de Domestika! Os escribo para consultar una duda sobre el diseño web y los CMS a la ...

por ferpalaciosd, el 17.01.2023 a las 16:36
- 1
- 0