Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

aprire popu da testo Opzioni
Luigi47
Inviato: Thursday, December 06, 2012 12:57:01 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
Forse l'oggetto non è molto chiaro, ma spero di farmi capire meglio Think
Sto costruendo un simil "Sito", nel senso che poi andrà solo masterizzato per la distribuzione ad amici e c.
Ho una pagina dello stesso che contiene del testo descrittivo e vorrei che alcune parole (5 o 6) se cliccate, o al passaggio del mouse, aprissero un popup, nella stessa pagina, con l'immagine relativa.
Che il popup si apra e chiuda in automatico o che si debba chiudere non fa differenza (anche se preferirei l'automatismo!).
Es: le annate dal 1950 al 1955 sono contenute in un Album
Vorrei che la parola Album aprisse il popup con l'immagine dell'album.
Il modo più semplice è di creare un collegamento all'immagine, apre una nuova pagina e potrebbe anche andare bene se si potesse dimensionare la stessa in modo da non coprire la pagina in primo piano.
In rete ho trovato molti esempi ma non sono riuscito (per mia ignoranza Liar ) ad adattarle alle mie necessità.
Il sito è strutturato così:
C:/Collezioni/Paese/pagina html + con tutte le immagini relative.
Per fare tutto questo ho usato JAlbum per le gallerie di immagini e Kompozer per la costruzione delle pagine.
Ci stà in html o sposto in Script?
Grazie.
Luigi
Sponsor
Inviato: Thursday, December 06, 2012 12:57:01 PM

 
lui49
Inviato: Thursday, December 06, 2012 2:13:47 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

vedi se ti va bene ....si può anche personalizzare in qualche dettaglio.
Luigi47
Inviato: Friday, December 07, 2012 11:24:24 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
a parte l'inglese Anxious
ho bisogno di qualcosa di più semplice, oppure (e qui salta fuori la mia ignoranza su css e c.) di più spegazioni su come "usare" il progetto Think
Per esempio: dova va inserita la parola Album che deve fare da generatrice dell'apertura del popup?

per utilizzare più immagini basta duplicare:
<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif"
rel="thumbnail" title="This is beautiful castle for sale!">Castle</a></p>
Castle va sostituito con Album?
o va modificato anche altro?
se l'immagine è su disco C:/Collezioni/Paese/immagine.jpg
come va modificato "http://img184 ecc.ecc?
"../Collezione/Paese/immagine.jpg....va bene??
Ancora grazie.
Ciao
lui49
Inviato: Saturday, December 08, 2012 11:11:18 AM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
E' molto semplice:

scarica i tre files:

thumbnailviewer.css
thumbnailviewer.js
loading.gif

e mettili nella cartella principale del progetto.


Copia e incolla questo codice:

Code:
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>


tra i tag <head> e </head> del codice html della tua pagina.

L'effetto popup si ottiene richiamando lo script col link da testo o da immagine.

Da testo:
<p><a href="C:/Collezioni/paese/album1.jpg" rel="thumbnail" title="Album 1950">Album 1950</a></p>

Da immagine:
<p><a href="C:/Collezioni/paese/castello_grande.jpg" rel="thumbnail" title="cast...."><img src="C:/Collezioni/paese/castello_ridotto_o_ridimensionato_con_width_e_height.jpg" /></a></p>

Luigi47
Inviato: Monday, December 10, 2012 7:07:51 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
Chiarissimo lui49,
ho fatto dei passi in avanti, ma non non sono definitivi Liar Liar

Ho messo tutti i file css, js e le immagini che interessano nella stessa cartella come logica richiede, ho inserito il codice in <head></head>
e la parte: <p><a href="C:/Collezioni/paese/album1.jpg" rel="thumbnail" title="Album 1950">Album 1950</a></p>
nel punto del testo dove deve comparire la parola da linkare.

Ho modificato il codice in: <a href="C:/Collezioni/Liechtenstein/Album.jpg" rel="thumbnail" title="Album">Album</a>
dove Album.jpg è l'immagine da visualizzare e Album è la parola che dovrebbe attivare l'aperture del popup.

La parola chiave Album diventa blu per segbnalare il link, ma quando ci clicco sopra si apre si il popup (un riquadro nero con la scritta CLOSE e relativa X di chiusura), ma all'interno compare la scritta Album e non l'immagine.

Ho modificato la scritta in Album.jpg, ma non cambia niente nel popup compare Album.jpg Think

Può essere colpa della dimensione dell'immagine? (227x400 pixel 13kb)
Nel css non ho visto niente che faccia riferimento alla grandezza del popup!!
Il js è un po più complicato e mi guardo bene di metterci le mani prima di avere un'indirizzo preciso Shame on you

Eppure è tutto nella stessa cartella!!!
È pure facile da usare perchè basta duplicare il codice :p><a href="C:/Collezioni/paese/album1.jpg" rel="thumbnail" title="Album 1950">Album 1950</a></p>
posso linkare tutte le parole che mi servono Applause
Cosa tralascio?
Grazie.
Ciao

La struttura delle cartelle è C:/Collezioni/Liechtenstein/Liechtenstein.html + tutti i file
lui49
Inviato: Monday, December 10, 2012 8:04:25 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
Commenta:

Ho messo tutti i file css, js e le immagini che interessano nella stessa cartella come logica richiede,.......



<a href="C:/Collezioni/Liechtenstein/Album.jpg" rel="thumbnail" title="Album">Album</a>

ora il file "album.jpg" dove si trova? controlla l'esatto percorso.

O mostra la struttura (cartelle) del progetto....
Luigi47
Inviato: Monday, December 10, 2012 10:38:01 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
È tutto dentro la cartella Liechtenstein:
la pagina html, le immagini che servono (compresa Album.jpg), i file css, js, tutto ciò che compone la pagina Liechtenstein.
Il tutto è dentro la cartella Collezioni in C:/
Per struttura intendi questo:
http://img405.imageshack.us/img405/3209/immaginestruttura.png


o la pagina html?
questo è il pezzo di codice che ho inserito nella pagina:
<p><a href="C:/Collezioni/Liechtenstein/Album.jpg" rel="thumbnail"
title="Album.jpg">Album</a></p>
Bolaffi "Milord"

Ciao
lui49
Inviato: Monday, December 10, 2012 11:02:41 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
prova a modificare

href="C:/Collezioni/Liechtenstein/Album.jpg"

in

href="Album.jpg"
Luigi47
Inviato: Monday, December 10, 2012 11:21:37 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
Dancing Dancing Dancing Dancing Dancing Dancing Dancing Dancing
Applause Applause Applause Applause Applause Applause Applause Applause Applause Applause
Grazie!!!
Ciao.
Luigi
lui49
Inviato: Monday, December 10, 2012 11:29:42 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
Bene....

ora vado a dormire.

Domani, se vuoi, ti dico come apportare delle piccole modifiche alle immagini popup (anche se non è un popup) Drool


Ciao

Luigi
Luigi47
Inviato: Monday, December 10, 2012 11:51:18 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
lui49 ha scritto:
Bene....

ora vado a dormire.

Domani, se vuoi, ti dico come apportare delle piccole modifiche alle immagini popup (anche se non è un popup) Drool


Ciao

Luigi


in effetti è più una pagina ridotta!!!

grazie, aspetto con ansia Dancing Dancing
Buonanotte
lui49
Inviato: Tuesday, December 11, 2012 10:43:31 AM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
Nel css il dimensionamento delle immagini è lasciato su "auto", anche perchè non avrebbe senso forzare il sovradimensionamento di una immagine piccola guastandone la definizione. Per avere un buon risultato bisogna quindi disporre di immagini relativamente grandi. Io, per esempio, uso immagini da 640x480 (per le orizzontali) e 360x480 (per le verticali).

:

p><a href="C:/Collezioni/Liechtenstein/Album.jpg" rel="thumbnail" title="Album.jpg">Album</a></p>

quello che scrivi nel tag "title" compare poi in calce al popup. Se vuoi ridimensionare il carattere e altro lo devi fare variando i parametri del
ID "#thumbBox .footerbar" del file "thumbnailviewer.css". Se non scrivi nulla, tipo (title="") in calce non compare nulla.
Il popup si chiude cliccando su qualsiasi punto dello stesso; quindi se vuoi eliminare "close X" o modificarla in "chiudi" o altro devi editare la riga
"definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface" del file "thumbnailviewer.js" cancelllando o modificando la voce in rosso.
Se vuoi l'apertura del popup senza animazione, da impostare secondo me, devi modificare, sempre nello stesso file il valore in rosso
"enableAnimation: true, //Enable fading animation?" da true in false


Luigi47
Inviato: Tuesday, December 11, 2012 12:24:13 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
lui49 ha scritto:
Nel css il dimensionamento delle immagini è lasciato su "auto", anche perchè non avrebbe senso forzare il sovradimensionamento di una immagine piccola guastandone la definizione. Per avere un buon risultato bisogna quindi disporre di immagini relativamente grandi. Io, per esempio, uso immagini da 640x480 (per le orizzontali) e 360x480 (per le verticali).

d'oh! io le avevo ridotte tutte pensando di fare bene!!!!
lui49 ha scritto:


p><a href="C:/Collezioni/Liechtenstein/Album.jpg" rel="thumbnail" title="Album.jpg">Album</a></p>

quello che scrivi nel tag "title" compare poi in calce al popup. Se vuoi ridimensionare il carattere e altro lo devi fare variando i parametri del
ID "#thumbBox .footerbar" del file "thumbnailviewer.css". Se non scrivi nulla, tipo (title="") in calce non compare nulla.
Il popup si chiude cliccando su qualsiasi punto dello stesso; quindi se vuoi eliminare "close X" o modificarla in "chiudi" o altro devi editare la riga
"definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface" del file "thumbnailviewer.js" cancelllando o modificando la voce in rosso.
Se vuoi l'apertura del popup senza animazione, da impostare secondo me, devi modificare, sempre nello stesso file il valore in rosso
"enableAnimation: true, //Enable fading animation?" da true in false



applicato tutto e mi piace moooolto di più Dancing
Ho anche cambiato colore alla cornice perchè il nero faceva tanto luttuoso!!!!!!
Mi allargo: applicare apertura e chiusura al passaggio del mouse sarebbe complicato? o questo sarebbe proprio la differenza tra popup e il nostro caso?
Comunque questa soluzione mi piace e ora mi faccio una bella cartella con tutti i file e istruzioni varie per il futuro!!!!
Ciao omonimo Angel Angel
lui49
Inviato: Tuesday, December 11, 2012 1:37:49 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
tu vorresti un effetto come questo però, come vedi dalla demo, il popup segue il puntatore lungo il link (e deve essere piccolo perchè se lo copre l'effetto "onmouseover" cessa e diventa "onmouseout" chiudendo il popup) e se questo si trova ai margini della pagina l'immagine può risultare mezza o tutta fuori dalla schermata.

Luigi47
Inviato: Wednesday, December 12, 2012 11:33:46 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
lui49 ha scritto:
tu vorresti un effetto come questo però, come vedi dalla demo, il popup segue il puntatore lungo il link (e deve essere piccolo perchè se lo copre l'effetto "onmouseover" cessa e diventa "onmouseout" chiudendo il popup) e se questo si trova ai margini della pagina l'immagine può risultare mezza o tutta fuori dalla schermata.


Ciao lui49,
bello l'effetto, ma come dici tu forse non posso usarlo in questo caso, alcune immagini sono grandi e alla destra della pagina quindi, uscirebbero dalla stessa.
Comunque me lo sono segnato....non si sa mai Whistle
Il lavoro però l'ho finito e se vai qui puoi vedere il risultato:
http://exfrancobolliluis.altervista.org/Collezioni%20in%20vendita.html
(Manca ancora il resto del progetto, quindi dalla home si vede solo il Liechtenstein Anxious .)
Ti ringrazio tanto per il prezioso aiuto che mi hai dato e ti auguro Buone Feste Applause Applause Applause
Luigi
lui49
Inviato: Thursday, December 13, 2012 1:27:26 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
Bene....un pò ne colleziono anch'io.

Io uso, come moltissimi, la risoluzione dello schermo 1280x800. Il dimensionamento della due tabelle rispettivamente a 1423 e 1416 fà uscire dallo schermo la pagina costringendo a spostarsi con la barra per visualizzarla tutta. Prova impostando entrambe a 1270px.
Attenzione: nella pagina "liechtestein.html" i riferimenti (il famoso popup) devono essere rigorosi perchè basta che una sola immagine non venga caricata perchè, pur senza messaggio di errore del titpo "file non trovato", si sballi la posizione "absolute" di apertura delle immagini stesse che diventerebbe casuale, fuori centro, fuori quadro.
Luigi47
Inviato: Friday, December 14, 2012 4:29:37 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
lui49 ha scritto:
Bene....un pò ne colleziono anch'io.

io invece sono arrivato a cercare di disfarmene perchè in famiglia non ho nessuno a cui interessi continuare Not talking Not talking


lui49 ha scritto:

Io uso, come moltissimi, la risoluzione dello schermo 1280x800. Il dimensionamento della due tabelle rispettivamente a 1423 e 1416 fà uscire dallo schermo la pagina costringendo a spostarsi con la barra per visualizzarla tutta. Prova impostando entrambe a 1270px.
Attenzione: nella pagina "liechtestein.html" i riferimenti (il famoso popup) devono essere rigorosi perchè basta che una sola immagine non venga caricata perchè, pur senza messaggio di errore del titpo "file non trovato", si sballi la posizione "absolute" di apertura delle immagini stesse che diventerebbe casuale, fuori centro, fuori quadro.


mi erano scappate un paio di Maiuscole Sick Sick
non me n'ero accorto perche da disco funzionava lo stesso Anxious Anxious
Se riesco a capire quanto spazio ho ancora libero su altervista magari ci metto anche il resto !!!
Ciao e ancora Buon Natale
Luigi47
Inviato: Friday, December 14, 2012 6:25:16 PM
Rank: AiutAmico

Iscritto dal : 12/28/2000
Posts: 40
scusami tanto lui, ma ho ancora bisogno di te:
ho fatto le modifiche per risolvere le visualizzazioni e ho aggiunto quelle due scritte, ma dopo il trasferimento della pagina non ottengo più l'effetto "popup" di prima Anxious
L' effetto su disco va benissimo, ma dopo iul trasferimebnto non funziona più Sick
Ho riletto tutta l ap agina, ma non vedo cosa possa bloccare lo script!!!
Potresti darmi un'occhiata?
Grazie.
Luigi
lui49
Inviato: Friday, December 14, 2012 6:58:20 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
funziona tutto

cambia colore alla cornice, magari blu (il verdino è poco serio)

riduci le immagini relative alla coppia di albums rossi e della scatola (troppo alte)

Prova a rinominare il file "thumbnailviewer.js" e a sostituirlo con questo
Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.