Fotorama - 요소가있는 경우에 기반한 다른 캡션

Question

IMG에 데이터 타이틀 속성이 있는지 여부에 따라 사용자 정의 Fotorama 캡션을 다르게 나타나게하려고합니다.지금 당장 현재 "정의되지 않은"것으로 나타나지 만, 거기가 아니라면 그 속성을 모두 생략하고 싶습니다.i / else 문을 사용하고 IMG 요소가 해당 속성을 갖는지 여부를 확인하려고 시도했습니다.나는 그에 따라 제한되고 크기 이미지를 제한하고 크기 이미지가 필요하기 때문에 "Div"Fotorama 접근법을 사용할 수 없습니다.

내 IMG 태그가 어떻게보고 있는지입니다 :

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

.

사용자 정의 캡션 형식을 만드는 데 사용하는 코드입니다.

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

.

DIV에 데이터 제목 속성이 없으면 캡션이 읽을 수있는 방법입니다.

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

.

미리 감사드립니다!

Answer 1

다른 누군가가 동일한 문제가있는 경우 CSS를 사용하는이를위한 해결 방법을 알아 냈습니다.데이터 타이틀 속성이 정의되어 있는지 여부에 따라 캡션이 표시되는지에 대한 캡션이 표시되는지에 대한 iFSE 문을 만드는 것과 싸우고 있지만, 데이터 제목이 있는지 여부에 관계없이 각 ActiveFrame을 확인하는 것으로 보입니다.속성 또는 아닌 - 첫 번째 만.플러그인이나 저의 뭔가가 내려다 보이는 고유 한 문제가 될 수 있습니다.

어쨌든, 해결책!

"work_link"또는 "no_link"값이있는 각 IMG 태그 ( "데이터 클래스")에서 새 속성을 작성했습니다.

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

.

스크립트의 캡션 HTML을 변경하여 "work_link"또는 "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>'
);

.

, 마침내 "work_link"클래스가 기본 스타일링 CSS를 가지며 "no_link"클래스가 표시되지 않습니다.

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

.

아마도 가장 깨끗한 방법이 아니라 매력처럼 작동합니다!