Abrir HTML en shadowbox

lfsow · #1 (**permalink**) 12/12/2011, 07:32

Hola amigos, me gustaría abrir un pequeño formulario en shadowbox al pulsar una imagen. Lo he colocado todo normal ( o eso creo yo) y al pulsar hace un engaño, se oscurece el fondo, pero no aparece nada de contenido.

Necesito ayuda! Gracias de antemano.

maycolalvarez · #2 (**permalink**) 12/12/2011, 09:11

si posteas parte del código es más fácil ayudarte ¿no te parece?, además que clase de libreria estás usando, el tema compete más a JS

lfsow · #3 (**permalink**) 12/12/2011, 11:09

tienes razón, este es el código completo de la página index.html y el formulario deve abrirse en lo que seria button_pdf. Gracias

Código HTML:

<!DOCTYPE html> 

<html lang="en"> 
<head> 

	<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
	
	<title>Francesc Calvet, el pagès que va triomfar al Barça.</title> 
	
	<!--[if !IE 6]><!--> 
	<link rel="stylesheet" href="css/master.css" /> 
	
	<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
	<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.tinycarousel.min.js" type="text/javascript"></script>
	<link rel="shortcut icon" href="http://img37.imageshack.us/img37/8999/iconhx.png">
	<script src="js/cufon.js" type="text/javascript"></script>
	<script src="js/aller.font.js" type="text/javascript"></script> 
	<script src="js/scripts.js" type="text/javascript"></script> 
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init(
			   {players: "html"
			   });
</script>

<style type="text/css">
 
#twitter {
	width: 800px; 
}
 
	#twitter h1 a {
		display: block; margin: 0 0 15px 0;
		font: 14px Arial, Sans-Serif; color: #004080;
		text-decoration: none;
	}
		#twitter h1 a:hover { color: #FFFFFF; }
 
	#twitter ul {
		list-style: none; 
		margin: 0; padding: 0;
	}
		#twitter ul li {
			margin: 0 padding: 0;
		}
			#twitter ul li a {
				font: normal 14px/30px Georgia, Times, Serif;
				color: #585858;
			}
				#twitter ul li a:hover { color: #585858 ; }
 
		#twitter ul li span {
			font: 12px/12px Helvetica, Arial, Sans-Serif; color: #000000;
		}
			#twitter ul li span a {
				font: 12px/12px Helvetica, Arial, Sans-Serif;
			}
 
 
</style>
 
	




		
	<!--<![endif]-->
	
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js" type="text/javascript"></script>
	<![endif]-->
	
</head>

<body>
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">


	<div class="container group">
	
		<!-- HEADER -->
		<div class="header group">
		
			<h1><a href="index.html">Francesc Calvet, el pagès que va triomfar al Barça</a></h1>

			<form method="post" action="mail.php">
				<fieldset>
					<input type="text" name="email" id="email"  onfocus="if(this.value=='Escriu el teu e-mail...')this.value='';" onblur="if(this.value=='')this.value='Escriu el teu e-mail...';" value="Escriu el teu e-mail..." />
					<input type="submit" name="subscribe" value="Subsciure" onClick="validarEmail(this.form.email.value);">
				</fieldset>
			</form>



			
			<ul class="social">
				<li><a href="http://www.facebook.com/fcalvetllibre" target="_blank" class="fb">Facebook</a></li>
				<li><a href="http://www.twitter.com/fcalvetllibre" target="_blank" class="twit">Twitter</a></li>
			</ul>
	
		</div><!-- /header -->
		
		<!-- INTRO -->
		<div class="intro group">
			
			<img src="img/book.png" alt="" class="book" />
			<h2>D'una difícil postguerra a la glòria de les cinc copes.</h2>
			<p>Aquest llibre va dedicat a Francesc Calvet, qui va ser jugador del Futbol Club Barcelona des de l'acabament de la Guerra Civil fins la gloriosa etapa de les Cinc Copes.

               Un llibre en el que trobareu un munt d'anècdotes i curiositats d'aquest emblemàtic jugador blaugrana i de la difícil època de la postguerra pel Barça.</p>

              <p> Pagès abans i després del seu periple blaugrana, va viure les penúries de l'època, les injustícies del moment (p.ex. el famós 11-1 al camp del Madrid) i la gloria amb els Basora, César, Kubala... del mític equip de les Cinc Copes.</p>

               <p>Trobareu declaracions dels seus companys (Ramallets, Basora...) i d'aquelles persones que van tenir contacte directe amb ell en aquest llibre que espero que gaudiu.</p>
               <p><b><a href="doc/info.pdf" target="_blank">Informació PDF</a></b> | <b><a href="audio/entrevista1.mp3" target="_blank">Escoltar entrevista</a></b></p>
		</div><!-- /intro -->
		
		<!-- PRICE -->
		<div class="price group">
			
			<a href="formulari.html" rel="shadowbox;width=813;height=440;"  class="button pdf">Comprar <span>20$ </span></a>
			<a href="galeria/galeria/index.html" target="_blank" class="button paper">Galeria d' imatges</a>
		</div><!-- /price -->
		
		<!-- SAMPLES -->
		<div class="samples group">
			
			<div class="carousel">
			
				<a class="buttons prev" href="#">anterior</a>
				
				<div class="viewport">
					<ul class="overview">

						<li><a href="img/1.jpg" rel="shadowbox" title="Plana mostra #1"><img src="img/1v.jpg" alt="" /></a> <a href="img/1v.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/2.jpg" rel="shadowbox" title="Plana mostra #2"><img src="img/2v.jpg" alt="" /></a> <a href="img/2v.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/3.jpg" rel="shadowbox" title="Plana mostra #3"><img src="img/3v.jpg" alt="" /></a> <a href="img/3v.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/4.jpg" rel="shadowbox" title="Plana mostra #4"><img src="img/4v.jpg" alt="" /></a> <a href="img/4v.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/5.jpg" rel="shadowbox" title="Plana mostra #5"><img src="img/5v.jpg" alt="" /></a> <a href="img/5v.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/recorte1v.jpg" rel="shadowbox" title="Retalls de premsa"><img src="img/recorte1.jpg" alt="" /></a> <a href="img/recorte1.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						<li><a href="img/sample-page.jpg" rel="shadowbox"><img src="img/sample-page.jpg" alt="" /></a> <a href="img/sample-page.jpg" class="zoom" rel="shadowbox">Zoom</a></li>
						
					</ul>
				</div>
				
				<a class="buttons next" href="#">siguiente</a>
				
			</div>
								
		</div><!-- /samples -->
		
		<!-- FINAL -->
		<div class="final group">
			<h3>Últimes notícies </h3>
			<p><div id="twitter">
 	<ul id="twitter_update_list"></ul></li>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/fcalvetllibre.json?callback=twitterCallback2&count=4" type="text/javascript"></script></p>
			
		</div><!-- /final -->
		
		<!-- TESTIMONIALS -->
		<div class="testimonials group">
			
			<div class="carousel">
			
				<a class="buttons prev" href="#">anterior</a>
				<div class="viewport">				
					<div class="slider overview group">
					
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
									
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
						
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
						
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
									
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
						
						<div class="quote">
							<blockquote><p>Sed in nulla eu est vestibulum convallis. Praesent ante magna, molestie vel porttitor vel, aliquet ut dolor. Proin molestie massa eu tellu.</p></blockquote>
							<cite><a href="#">~ John Doe, Company Owner</a></cite>
						</div><!-- /quote -->
															
					</div><!-- /slider -->
				</div>
				<a class="buttons next" href="#">siguiente</a>
				
			</div>
		
		</div><!-- /testimonials -->

		
		
		
		
	
	</div><!-- /container -->
	
	<!-- FOOTER -->
	<div class="footer group">
		<p>&copy; 2011 | Tots els drets reservats  </p>
		<p class="last"><b>Web:</b> Oscar Gómez</a> | <a href="mailto:[email protected] ?subject=Disseny fcalvetllibre">E-mail</a></p>
	</div><!-- /footer -->

<script type="text/javascript">Cufon.now();</script>	

</body>

</html>