2011-02-02 11 views
5

Help! Sto lavorando a un sito Web per un gruppo di scrittori.In Prettyphoto.js o Fancybox ... Come aggiungere un collegamento all'interno della didascalia

Vogliono mostrare esempi di lavori specifici su cui hanno lavorato (portfolio) utilizzando l'effetto shadowbox.

Una volta aperto (in sovrapposizione) l'immagine che in realtà è uno screenshot di un file .doc, ad esempio, avrebbe una didascalia per spiegarlo in modo approssimativo. Il fatto è che vogliono un collegamento all'interno della didascalia in modo che l'utente possa scaricare i file (.doc, .pdf) sul desktop o collegarli a un altro sito su cui hanno lavorato.

Sono riuscito a farlo con Fancybox ma il modo in cui il collegamento è incluso nel testo mostra un testo indesiderato quando si libra (il tooltip giallo del browser).

Ecco il codice:

<a class="group" rel="portfolio" 
href="../../images/pf_nat/cfcBig.png" title="Rédaction de plus de 300 articles. <a href='http://www.groupecfc.com/fr-Ca/' target='_blank'>Visiter le site</a>"><img src="../../images/pf_nat/tn_nat_cfcBig.gif" alt="" width="40" height="40"/></a> 

in questo caso si tratta di un link a qualche sito.

+0

Ok per fare questo ho usato Prettyphoto.js (ottimo plugin per il ragazzo di Montreal), e usa l'attributo ALT per la didascalia e inserisci l'html all'interno dell'ALT usando le entità per i collegamenti ipertestuali che è, funziona ed è valido! ora puoi usare l'attributo title per lo scopo giusto (i tooltip mostreranno normaly senza parentesi e codice ecc.) perché non uso affatto il titolo. Grazie Matt e Scott al tempo. – ive

risposta

10

Se è come la maggior parte dei plugin 'lightbox', credo che devi fare questo entità uso di caratteri per esempio:

<a href="test.html">hello</a>

sarebbe diventato

&lt;a href=&quot;text.html&quot;&gt;hello&lt;/a&gt;

mettere questo nella vostra titolo tag e collegherà.

ottenere una lista completa di entità carattere HTML a http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

+0

dovrei mettere le entità all'esterno dei tag A o all'interno? – ive

+0

Hey Scott ho inserito l'html convertito ... funziona ancora. quindi suppongo che il mio Bug principale sarebbe quello di nascondere i tooltips (in questo momento mostra il titolo e tutto come tag html all'interno del titolo. scusa se ti faccio perdere tempo :( – ive

+0

Se metti il ​​codice convertito in un altro attributo (classe, per esempio) e cercare da lì, che farà il lavoro di sbarazzarsi dei tuoi tooltips.Forse aggiungere: 'title': this.class, alle tue opzioni.Non è il modo in cui avrebbe dovuto funzionare, anche se È una cosa incorporata nel browser, le descrizioni dei comandi. –

4

Grazie tanto per questo post! Mi ha aiutato molto, ma poi il tooltip che appare mi ha fatto saltare fuori dall'acqua per me. POI! Ho trovato una soluzione facile anche a quella parte. Aggiungi un attributo titolo che contiene uno spazio (deve avere uno spazio) per l'img all'interno del tag di ancoraggio:

Wahoo! Nessun suggerimento e la didascalia funziona con un collegamento aggiunto.

2

Questo argomento di PrettyPhoto e l'impossibilità di aggiungere un collegamento per il download di foto è una discussione da un paio d'anni. Sono stupito che gli autori originali di non abbiano affrontato questo ... per quanto ne so.

ora ci sono diverse versioni di prettyphoto, tra cui alcuni mash-up che sono utilizzati come plugin per Joomla, WordPress, ecc

così ho preso il plugin Joomla e modificato. Può funzionare da solo, senza Joomla (dato che non utilizzo Joomla). Potete vedere la mia modifica qui: http://www.catpin.com/prettyphoto

includo anche due file compressi: 1) File le jquery.prettyPhoto.js effettivi 2) lo script PHP che fa il download (si apre la finestra di dialogo di download del browser).

Spero che questo aiuti ... o almeno ti dia l'idea che possa essere fatto.

Problemi correlati