Título de imagen en Slimbox

Question

Mi problema es muy parecido a este tema resuelto, excepto que estoy usando Slimbox 2:

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

Al pasar sobre una imagen, el atributo "Título" aparece. Necesito HTML en el título de mi imagen en Slimbox. Así que, por supuesto, cuando estás flotando, el atributo "Título" muestra todo el código HTML. El código funciona perfectamente cuando estás viendo la imagen en Slimbox así que no hay problemas allí. Solo necesito ocultar/modificar el atributo Título para no mostrar este código HTML.

Traté de cambiar Q.title en slimbox.js a algo más (como captionname). Luego cambió el código HTML para pedir:

<a href="images/team/large.jpg" title="Joe Smith" captionname="URL" rel="lightbox-team"><img src="images/team/small.jpg" class ="headline" border="1" hspace="2" /></a> 

muestra "Joe Smith" como el título, pero cuando ve la imagen en Slimbox, captionname no viene en absoluto y tampoco lo hace el título. Está en blanco donde debería estar.

¿Qué debo modificar en slimbox2.js para que funcione?

Answer 1

Dejo la propiedad del título solo para fines de accesibilidad, y modifico slimbox.js para leer el atributo del título inmediatamente en la carga de la página, almacenarlo en una propiedad personalizada (llamada "título" o algo), y eliminarlo programáticamente atributo de título para evitar la información sobre herramientas. Por supuesto, esto implica que el resto del código que hace referencia a la propiedad del título debe cambiarse para usar la propiedad personalizada.

Answer 2

Puede usar el parámetro linkMapper para personalizar el título que se muestra.

Si está utilizando los slimbox2.js comprimidas que tendrá el código de carga automática de allí para que pueda cambiarlo a hacer precisamente lo que Josh Stodola explicó:

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) 
jQuery(function($) { 
    $("a[rel^='lightbox']").each(function(){ 
     //Set caption and remove title attributes 
     this.caption = this.title; 
    }).slimbox({/* Put custom options here */}, function(el){ 
      //Custom linkMapper to grab the description from the caption attribute 
      return return [el.href, el.caption]; 
     }), function(el) { 
      return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
    }); 
}); 

Answer 3

usted debe utilizar la opción de hecho linkMapper de Slimbox (una función que puede pasar como parámetro opcional) para anular el comportamiento predeterminado de slimbox, que usa el atributo de título de su hipervínculo para el título del cuadro

de esta manera puede usar cualquier atributo estándar, por ejemplo 'alt ', o mejor aún una personalizada como' slimboxcaption 'para asegurarse de que ningún navegador muestre su contenido; para definir el juego atribuyen utilizar el getAttribute del nodo 'el' pasado a la función

sustituir el nombre predeterminado "jQuery (function ($)" llamada en el archivo de su Slimbox Js con este

jQuery(function($) { 
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) { 
     return [el.href, el.getAttribute("slimboxcaption")]; 
}, function(el) { 
    return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
}); 
}); 

entonces se puede usar esto para pasar cualquier contenido html en el cuadro al tiempo que oculta para el usuario se cierne sobre el enlace

<a href="/myimage.jpg" title="This is my image" slimboxcaption='<h2>Here you can enter html code for your box caption</h2>...' rel="lightbox"><img src="/myimage_small.jpg"/></a> 

Answer 4

he cambiado el Q-función en la versión miniaturizada de Slimbox2 de esto:

function (Q) { return [Q.href, Q.title] }; 

a esto:

function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] }; 

De esta manera, el título normal en el elemento de enlace es preservado y en caso de que el es un atributo llamado "data-captionname" en el enlace que se está mostrando en el modal ventana (o lightbox si así lo desea).