En Prettyphoto.js o Fancybox ... Cómo agregar un enlace dentro de la leyenda

¡Ayuda! Estoy trabajando en un sitio web para un equipo de escritores.En Prettyphoto.js o Fancybox ... Cómo agregar un enlace dentro de la leyenda

Quieren mostrar ejemplos de trabajos específicos en los que han trabajado (cartera) utilizando el efecto de shadowbox.

Una vez abierta (en superposición) la imagen que en realidad es una captura de pantalla de un .doc por ejemplo, tendría un título para explicarlo aproximadamente. Lo que pasa es que quieren un enlace dentro de la leyenda para que el usuario pueda descargar los archivos (.doc, .pdf) en su escritorio o vincularlos a otro sitio en el que hayan trabajado.

He logrado hacerlo con Fancybox pero la forma en que se incluye el enlace muestra texto indeseable cuando está suspendido (la información sobre herramientas amarilla del navegador).

Aquí está el código:

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

en este caso se trata de un enlace a algún sitio.

Fuente

2011-02-02 ive

Ok para hacer esto, utilicé Prettyphoto.js (gran plugin de Montreal), y usa el atributo ALT para caption e inserta html dentro de ALT usando entidades para hipervínculos, funciona, ¡y es válido! ahora puede usar el atributo de título para el propósito correcto (la información sobre herramientas se mostrará normalmente sin corchetes y código, etc.) ya que no uso el título en absoluto, jeje. Gracias Matt y Scott a la hora. – ive

Si es como la mayoría de los plugins 'mesa de luz', yo creo que hay que hacer estas entidades el uso de caracteres, por ejemplo:

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

se convertiría en

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

poner esto en su etiqueta del título y se vinculará.

obtener una lista completa de las entidades de caracteres HTML en http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Fuente

2011-02-02 16:03:58

¿debo poner las entidades en las etiquetas externas A o en el interior? – ive

Hola Scott he insertado el html convertido ... todavía funciona. así que supongo que mi error principal sería ocultar los tooltips (ahora mismo muestra el título y todo como etiquetas html dentro del título. Lo siento si les hago perder el tiempo :( – ive

Si pones el código convertido en otro atributo (clase, por ejemplo) y búscalo desde allí, que hará el trabajo de deshacerte de tus tooltips. Tal vez agregues: 'title': this.class, a tus opciones. No es la manera en que debería funcionar, aunque . Es una cosa incorporada al navegador, la información sobre herramientas. –

Muchas gracias por este post! Me ayudó mucho, pero luego la información sobre herramientas que apareció me hizo explotar todo fuera del agua. ¡ENTONCES! Encontré una solución fácil a esa parte también. Añadir un atributo de título que contiene un espacio (debe tener un espacio) a la img dentro de la etiqueta de anclaje:

<a title="&lt;p&gt;&lt;a href=&quot;http://www.mysite.com&quot; title=&quot;&quot; target=&quot;_blank&quot;&gt;http://www.mysite.com&lt;/a&gt;&lt;/p&gt; " rel="prettyPhoto" href="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg" style=""><img alt="Interactive" **title=" "** src="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg"></a>

Wahoo! Sin información sobre herramientas y el título funciona con un enlace agregado.

Fuente

2012-10-10 16:58:35 Christina

Este tema de PrettyPhoto y la imposibilidad de agregar un enlace de descarga de fotos ha sido una discusión desde hace un par de años. Me sorprende que los autores originales de no hayan abordado esto ... hasta donde yo sé.

ahora hay varias versiones de PrettyPhoto, incluyendo algunas combinaciones de datos que se utilizan como plugins para Joomla, Wordpress, etc.

así que tomé el plugin Joomla y lo modificó. Se puede ejecutar de forma independiente, sin Joomla (ya que no utilizo Joomla). Usted puede ver mi modificación aquí: http://www.catpin.com/prettyphoto

También se incluyen dos archivos comprimidos: 1) Archivo de las jquery.prettyPhoto.js reales 2) el script PHP que hace la descarga (se abre el cuadro de diálogo de descarga del navegador).

Espero que esto ayude ... o al menos le dé una idea de que se puede hacer.

Fuente

2012-11-03 00:02:44 mlseim

En Prettyphoto.js o Fancybox ... Cómo agregar un enlace dentro de la leyenda

Respuesta

Cuestiones relacionadas