Aiuto fancybox e iframe

Giulia76 · 20 Mar 2016

Buonasera,
sono qui a scrivere, dopo presentazione, per chiedervi un aiuto su un dubbio e problema nel realizzare, con Fancybox, un iframe contenente, non solo l’immagine allargata di una foto in miniatura, ma, anche, alla sua dx, una descrizione di essa… Per far capire meglio di cosa sto parlando, linko un esempio trovato in internet.

http://www.buoncanile.it/index.php?page=sos_adozioni

Come si vede, cliccando su una foto a caso, si apre un iframe contenente ciò di cui parlavo sopra (foto a sx e descrizione a dx…) Allego il codice di ciò che sono riuscita a realizzare, ma che comunque non rispecchia ciò di cui ho bisogno…

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="prova nuovo sito/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="prova nuovo sito/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="prova nuovo sito/jquery.easing-1.3.pack.js"></script>
<link href="prova nuovo sito/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen"/> 
<script type="text/javascript">
    $(document).ready(function(){  
        $(".inline").fancybox({  
             'width' : '75%',  
             'height' : '75%',  
             'autoScale' : false,  
             'transitionIn' : 'none',  
             'transitionOut' : 'none',  
             'type' : 'iframe',  
             'hideOnOverlayClick' : false  
         });  
    });  
</script>
</head>
<body>
 <a class="inline" href="file:///C|/Users/user/Pictures/1.jpg"><img width="100" height="100" src="file:///C|/Users/user/Pictures/1.jpg" /></a>  
</body>
</html>

Chiedo vostro aiuto:crying:

criric · 21 Mar 2016

Ciao prova a guardare questo esempio

Giulia76 · 22 Mar 2016

Ho visto la pagina che mi ha segnalato ma non è proprio quello che cerco. Ho risolto comunque in questo modo:

HTML:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lightbox</title>
        <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery("#lightbox").click(function(){
					jQuery("#lightbox,#lightbox_div").fadeOut("slow");
					return false;
				});
				jQuery("#apri_lightbox").click(function(){
					jQuery("#lightbox,#lightbox_div").fadeIn("slow");
					return false;
				});
				
		});
		</script>
        <style type="text/css">
			#lightbox{display:none;opacity:0.8;position:absolute;top:0px;left:0px;min-width:100%;min-height:100%;z-index:1000;background-color:#000;cursor:pointer;}
			#lightbox_div{display:none;position:absolute;top:50%;left:50%;margin-left:-300px;margin-top:-150px;width:600px;height:300px;z-index:1001;background-color:#FFF;}
			#apri_lightbox{font-size:24px;}
			
		</style>
    </head>
    <body>
    	<a href="#" id="apri_lightbox" title="Apri Lightbox">Apri Lightbox</a>
    	<div id="lightbox" title="Chiudi Lightbox"></div>
        <div id="lightbox_div">
            <p align="center">Ciao, sono un div lightbox fatto con 2 righe di codice!</p>
        </div>
    </body>
</html>

Questa è sola una pagina di prova che ho creato, appena sarà funzionale al 100% la trasferico nella cartella del sito e la collegherò al css esternamente.

L'unica cosa è che non so come fare in modo che la finestra modale abbia i bordi rotondi e si chiuda solo con la x. Aiuti?

criric · 22 Mar 2016

Bello il codice! mi piace.
per il bordo basta che aggiungi al css

Codice:

#lightbox_div{border-radius:12px;..

per chiuderlo devi prima creare un elemento html con la X e sull'evento onclick aggiungi

Codice:

jQuery("#lightbox,#lightbox_div").fadeOut("slow");

Giulia76 · 24 Mar 2016

Grazie mille per il tuo aiuto.

Allego codice definitivo.<head>

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lightbox</title>
        <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery("#lightbox").click(function(){
				});	
				jQuery("#chiudi_lightbox").click(function(){
				jQuery("#lightbox,#lightbox_div").fadeOut("slow");	
					});
				jQuery("#apri_lightbox").click(function(){
					jQuery("#lightbox,#lightbox_div").fadeIn("slow");
					return false;
				});
				});
		</script>
        <style type="text/css">
			#lightbox{display:none;opacity:0.8;position:absolute;top:0px;left:0px;min-width:100%;min-height:100%;z-index:1000;background-color:#000;cursor:pointer;}
			#lightbox_div{border-radius:12px;display:none;position:absolute;top:50%;left:50%;margin-left:-300px;margin-top:-150px;width:600px;height:300px;z-index:1001;background-color:#FFF;}
			#apri_lightbox{font-size:24px;}
			#chiudi_lightbox{background--image: url('cancel.png');font-size:24px;font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%;  cursor:pointer;} 
		</style>
    </head>
    <body>
    	<a href="#" id="apri_lightbox" title="Apri Lightbox">Apri Lightbox</a>
    	<div id="lightbox" title="Chiudi Lightbox"></div>
        <div id="lightbox_div">
        <a href="#" id="chiudi_lightbox"><img src="prova nuovo sito/cancel.png" /></a>   
        <p align="center">Ciao, sono un div lightbox fatto con 2 righe di codice!</p>
        </div>
    </body>
</html>

Vista la tua gentilezza, posso chiederti come devo fare se volessi aggiungergli delle transizioni tipo: 'transitionIn':'elastic'; e 'transitionOut':'elastic'?

Cerca

Cerca

Aiuto fancybox e iframe

Giulia76

Nuovo Utente

criric

Super Moderatore

Giulia76

Nuovo Utente

criric

Super Moderatore

Giulia76

Nuovo Utente

Discussioni simili