Aiuto fancybox e iframe

**Giulia76** · 20-03-2016, 20:26

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…

Chiedo vostro aiuto

<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>

**cavicchiandrea** · 20-03-2016, 21:10

Ciao Giuglia benvenuta.
L'esempio non usa un iframe ma una "finestra modale" dove carica i dati. Il tuo codice se lo testi in locale potrebbe avere dei problemi perché jquery richiede un webserver installato in locale (http://localhost/cartella_sito_senza_spazi/paginaindex.html)

**pietro09** · 21-03-2016, 09:15

non ho studiato quel sito (bello) ma, comunque, io mi farei una pagina server, aspx, php o quello che sia. A sinistra immagine; a destra dati.
Lato client, al click, basta passare l'id del record della tabella di database

più o meno così:

codice:

<a class="fancybox" href="iframe.aspx?id=<%#Eval("id").ToString") %>" data-fancybox-group="gallery" ><img src="<%#Eval("indirizzo").ToString %>" alt="" /></a>

codice client

codice:

$(document).ready(function ()
{

    /* Iframe (75% width and height) */
    $(".fancybox").fancybox({
        'width'                : '75%',
        'height'            : '75%',
        'autoSize'             : false,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'type'                : 'iframe'
    });



});

è scritto in fretta, da provare

Discussione: Aiuto fancybox e iframe

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto fancybox e iframe

Permessi di invio