A continuación te demuestro rápidamente como agregar una leyenda a tus imágenes usando la librería de Javascript magnific popup usando atributos que ya están definidos en la misma imagen.
Recientemente me hallé una pregunta en Stack Overflow en español en la que se planteaba el problema de no poder usando magnific popup agregar una leyenda a la imagen mostrada en pantalla completa.
Las leyendas bajo las imágenes se leen en promedio 300% más que el cuerpo del contenido mismo por lo que no usarlas o usarlas incorrectamente significa perder la oportunidad de conectar con un gran numero de lectores potenciales
Kissmetrics
Qué es Magnific Popup?
Se trata de una librería de JavaScript especializada para mostrar imágenes en ventanas modales emergentes superpuestas a una pagina web con soporte para la interactividad.
Mi solucion
A pesar de que en la documentación oficial maneja que podemos agregar selectores a magnific popup para agregar la leyenda, a mí ese enfoque no me funcionó, y por ello (spoiler alert) lo solucioné usando una función.
Primeramente agregamos una entrada image, y le agregamos el atributo titleSrc que es el que controla el título.
image: {
titleSrc: function(item) {
// insertar función acá
}
}Como deseamos obtener el atributo alt que es la descripción alternativa de la imagen y generalmente se usa para propósitos de accesibilidad y SEO; para este caso la función será:
function(item) {
return item.el.find('img') // encuentra una imagen
.attr('alt'); // y su atributo descripción alternativa
}El resultado quedará de la siguiente manera
