Aiuto fancybox e iframe

Giulia76

Nuovo Utente
20 Mar 2016
10
0
0
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:
 
Ultima modifica di un moderatore:

Giulia76

Nuovo Utente
20 Mar 2016
10
0
0
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?
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
20 Mar 2016
10
0
0
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'?
 
Ultima modifica di un moderatore:
Discussioni simili
Autore Titolo Forum Risposte Data
F aiuto fancybox jQuery 0
P Aiuto per rendere un Bot Telegram Privato PHP 0
M Un aiuto da chi ha apple Mac e Software 0
P Richiesta di aiuto Presentati al Forum 1
A Aiuto per pagina php PHP 0
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
I Aiuto php Dependent Lookup PHP 0
R Aiuto con le query MS Access 2
M AIUTO ESERCIZIO JAVA Javascript 1
G Aiuto con htaccess e rewriterule PHP 0
T cercasi aiuto per file d1 (open-edge db) Database 0
M Aiuto con inserimento immagini WordPress 6
D aiuto schermata photoshop Photoshop 0
L Aiuto per programma web php/mySQL PHP 2
A Aiuto php colore diverso PHP 10
L Aiuto creazione menu mancante WordPress 0
C Aiuto compiuto scuola PHP/MySQL PHP 2
G Insert into select - Aiuto MySQL 0
I Aiuto bash linux Programmazione 1
F Aiuto java script Javascript 2
R Cerco aiuto Offerte e Richieste di Lavoro e/o Collaborazione 7
I Aiuto query MySQL 8
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
G Mi dite come faccio? Aiuto photoshop ? Photoshop 1
C prestashop paragamento contrassegno aiuto modulo E-Commerce 0
Michelebozzo [PHP] Rimuovere pubblicazione nome pagina ... aiuto! PHP 7
Caldus richiesta aiuto Mac e Software 0
R [Javascript] Aiuto su questo script Javascript 2
Z Gestionale in Php/mysql: Quanto farsi pagare? Aiuto! Discussioni Varie 0
Giacomo92 [HTML] AIUTO!! Regular Expression :( Offerte e Richieste di Lavoro e/o Collaborazione 15
T Aiuto per php7 e mysqli PHP 3
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
K [Java] aiuto switch case Java 1
E salve tutti spero si essere di aiuto e di trovare aiuto Presentati al Forum 2
D [MS Access] aiuto non riesco a capire MS Access 6
P [PHP] Browser game, aiuto a tempo libero. Offerte e Richieste di Lavoro e/o Collaborazione 0
wildcity9 aiuto per sbloccare account instagram bannati Social Media Marketing 0
A Aiuto per configurare il banner di Iubenda su un sito in html HTML e CSS 0
I Aiuto Firma App Sviluppo app per Android 0
C [PHP] Chiedo un aiuto, Array multidimensionale. PHP 3
H [Javascript] aiuto favore Javascript 1
T [PHP] aiuto....Fatal error: Uncaught Error:non riesco a capire PHP 1
N [PHP] Aiuto PHP 1
M [PHP] Aiuto su inner join PHP 10
S [PHP] Aiuto creazione form php per completamento modello word PHP 1
Giatenx Ho bisogno di aiuto Annunci servizi di Social Media Marketing 1
Z [HTML] aiuto per visualizzazione su tablet Offerte e Richieste di Lavoro e/o Collaborazione 6
Z sono qui in cerca di aiuto Presentati al Forum 2

Discussioni simili