Fotorama: diferentes subtítulos basados en si el elemento ha atributo

Question

Estoy tratando de hacer que una leyenda de fotorama personalizada aparezca de manera diferente dependiendo de si el IMG tiene un atributo de título de datos o no.En este momento, actualmente aparece como "indefinido", pero me gustaría que solo omite ese atributo en conjunto si no está allí.Intenté usar las afirmaciones de IF / ODS y verificar si el elemento IMG tiene ese atributo o no, pero en vano.No puedo usar el enfoque de Fotorama "DIV" porque necesito que la galería esté restringida y las imágenes de tamaño en consecuencia.

Así es como mis etiquetas IMG están buscando:

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" border="0">

Este es el código que estoy usando para crear el formato de título personalizado:

$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.example_blurb');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + ' <a target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);
})
.fotorama();

y así es como quiero que el título lea si no hay un atributo de título de datos en el div:

'<p><em>' + activeFrame.caption + '</em></p><p>' + activeFrame.author + '</p>'

¡Gracias de antemano!

Answer 1

descubrió una solución para este uso de CSS si alguien más está teniendo el mismo problema.Luché con la creación de si ... más declaraciones de la forma en que se mostrará el título en función de si se definió el atributo del título de datos, pero por alguna razón no parecía verificar cada estructura activa para si tenía el título de datos.atributo o no ... solo el primero.Podría ser un problema inherente con el complemento o para mí con vista a algo.

de todos modos, la solución!

Hice un nuevo atributo en cada etiqueta IMG ("Clase de datos"), que tendrá el valor "Work_Link" o "NO_LINK":

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" data-class="work_link" border="0">
<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-class="no_link" border="0">

Cambié el título HTML en el script para leer así: esencialmente dando al enlace la clase "Work_Link" o "NO_LINK":

fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + '<a class="' + activeFrame.class + '" target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);

y finalmente hizo que la clase "Work_Link" tiene CSS de estilo básico y la clase "NO_LINK" no se muestra.

.work_link { margin-left: 12px; }
.no_link { display: none; }

¿Quizás no sea la forma más limpia de hacerlo, pero funciona como un encanto!