pannello/scheda pop up

**panecasareccio** · 19-11-2013, 11:54

Buongiorno a tutti,

vorrei realizzare una pagina html in cui, cliccando un link, appaia un piccolo rettanglo in cui possa inserire testo e immagini. Dopodiche', cliccando un altro link in quel rettangolo, il rettangolo deve sparire.

E' possibile farlo in maniera relativamente semplice?

Grazie mille per l'aiuto,
panecasareccio

**Vincent.Zeno** · 19-11-2013, 13:50

scopo? testo e immagine vanno poi salvati?

**panecasareccio** · 19-11-2013, 13:59

Ciao,

grazie per avermi risposto.

Il testo e le immagini vanno soltanto visualizzati.

Lo scopo e' evitare di aprire una nuova finestra per visualizzare un piccolo contenuto di testo/immagini

**panecasareccio** · 19-11-2013, 14:01

Forse non ho spiegato il mio problema in maniera sufficientemente chiara.

Il piccolo rettangolo deve contenere il testo e le immagini che voglio.
(non e' l'utente a doverlo inserire...)

Spero che questo chiarisca

**Vincent.Zeno** · 19-11-2013, 15:11

capito... hai due opzioni:
usare le finestra modali (vedi fancybox, lightbox e simili) o aprire una nuova finestra ridimensionata (appunto stile popup).
fare una scelte dipende dal contesto.
se potessi scegliere opterei per le finestre modali: sono funzionali ed eleganti

**panecasareccio** · 20-11-2013, 11:09

Ciao,

Ti ringrazio per il suggerimento.

Mi sono andato a guardare fancybox, ho trovato questo link preso dal sito ufficiale:

http://fancyapps.com/fancybox/

Mi sembra di avere seguito tutte le loro istruzioni passo passo, ma non funziona bene.
In particolare, nel loro esempio dovrei cliccare una piccola immagine, e dovrebbe apparire una finestra pop-up con la stessa immagine piu' grande.
Cio' che ottengo e' l'immagine piu' grande nella stessa finestra, non in una pop-up.

Il mio file html si trova nella directory "c:\mydir"
Il codice di Fancybox e' stato scompattato e copiato nella directory "c:\mydir\fancybox"

Riporto il codice, che ho copincollato paro paro dal loro sito.

Dove sto sbagliando?

Grazie mille per l'aiuto,
Panecasareccio.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <!-- Add jQuery library -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <!-- Add mousewheel plugin (this is optional) -->
        <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

        <!-- Add fancyBox -->
        <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

        <!-- Optionally add helpers - button, thumbnail and/or media -->
        <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
        
        <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox();
            });
        </script>
    </head>
    
    <body>    
        <a class="fancybox-button" rel="fancybox-button" href="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_b.jpg" title="Tolpis barbata (mariluzpicado)">
            <img src="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_m.jpg" alt="" />
        </a>
        
        <a class="fancybox-button" rel="fancybox-button" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg" title="(dSavin)">
            <img src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" alt="" />
        </a>
        
        <a class="fancybox-button" rel="fancybox-button" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg" title="a ride in blue? (cembayir_photography)">
            <img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg" alt="" />
        </a>
        
        <a class="fancybox-button" rel="fancybox-button" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg" title="reedit... (h_di)">
            <img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg" alt="" />
        </a>
    </body>
</html>

**Vincent.Zeno** · 20-11-2013, 14:25

ho suggerito le finestre modali perché parlavi di "rettangoli", pare invece tu voglia proprio una finestra ridimensionata.
forse cerchi questo?

codice:

<a href="javascript:openWin('pagina.html','toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=600,height=425')" title="">apri</a>

e per chiuderla, dentro alla pagina metti:

codice:

<a href="javascript:onclick=window.close();" title="">Chiudi Finestra</a>

**panecasareccio** · 20-11-2013, 15:20

Ciao Vincent,

Ti ringrazio ancora per l'aiuto che mi stai dando.

Ho copincollato il tuo codice, ma non succede nulla se clicco su "apri".

Forse devo aggiungere qualcosa dentro l'header?

Grazie ancora, panecasareccio

**Vincent.Zeno** · 20-11-2013, 15:24

ce l'hai messa una "pagina.html" da aprire?

Discussione: pannello/scheda pop up

Strumenti discussione

Ricerca discussione

Visualizza

pannello/scheda pop up

Permessi di invio