웅장 팝업 갤러리를 사용하면서 이미지 아래에 실제 웹 페이지에 캡션을 포함하려고합니다. div 및 클래스 캡션 또는 캐 러셀 캡션을 사용하면 갤러리의 이미지가 하나씩 세로로 쌓이지 않으면 그렇게 할 수 없습니다. 어떻게 할 수 있습니까?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
Node.js 바이올린 : https://jsfiddle.net/sb4btox7/
아직 논평 할 평판 포인트가 충분하지 않기 때문에 여기에 해결책을 제공하는 것 외에도 언급하고 있습니다.
댓글 : JSFiddle이 https : //에서 이미지를 제공하려고하기 때문에 JSFiddle이 http : // 이미지와 함께 작동하지 않습니다.
해결책:
절반 정도입니다. 캡션을 작동시키는 데는 두 부분이 있습니다.
이와 같이 초기화 스크립트에서 제목 소스를 지정해야합니다.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
그러면 스크립트는 자동으로 캡션을 class="mfp-title"
보너스 솔루션 : 휴대폰 사용자가 확대 할 수 있도록 새 창에서 열려면 라이트 박스 이미지가 필요했기 때문에 첫 번째 titleSrc선언 후에 다음을 추가했습니다 .
titleSrc: 'title',
titleSrc: function(item) {
return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
}
이 정보는 "이미지 유형"섹션의 http://dimsemenov.com/plugins/magnific-popup/documentation.html 문서에 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다