Fotorama - Différentes légendes basées sur l'élément si l'élément a attribué

Question

J'essaie de faire une légende sur mesure Fotorama apparaît différemment selon que l'IMG dispose d'un attribut de titres de données ou non.À l'heure actuelle, il apparaît actuellement comme "indéfini", mais j'aimerais que cela omet que cela attribue tout à fait si ce n'est pas là.J'ai essayé d'utiliser des déclarations si / bien et vérifiez si l'élément IMG a cet attribut ou non, mais en vain.Je ne suis pas en mesure d'utiliser l'approche "div" fotorama parce que j'ai besoin de la galerie pour être contrainte et des images de taille en conséquence.

Voici comment mes tags img cherchent:

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

Ceci est le code que j'utilise pour créer le format de légende personnalisé:

$('.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();

Et voici comment je veux que la légende soit lue s'il n'y a pas d'attribut de titre de données sur la DIV:

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

Merci d'avance!

Answer 1

a compris une solution de contournement pour cela utilisant CSS si quelqu'un d'autre a le même problème.J'ai combattu avec la création de si ... d'autre des déclarations pour la manière dont la légende afficherait si l'attribut de titre de données de données était défini ou non, mais pour une raison quelconque, il ne semblait pas vérifier chaque cadre actif pour savoir s'il avait le titre de donnéesattribut ou pas-- Seulement le premier.Pourrait être un problème inhérent avec le plugin ou moi surplombant quelque chose.

Quoi qu'il en soit, la solution!

J'ai fait un nouvel attribut sur chaque balise IMG ("classe de données"), qui aura la valeur "work_link" ou "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">

J'ai changé la légende HTML dans le script pour lire comme-- donnant essentiellement le lien que la classe "work_link" ou "no_link" classe:

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

Et enfin, la classe "Work_Link" a des css de base CSS et la classe "no_link" ne s'affiche pas.

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

Peut-être pas le moyen le plus propre de le faire, mais fonctionne comme un charme!