fancybox에 html 콘텐츠를 표시 하시겠습니까?

아래 HTML 콘텐츠를 표시하고 이미지를 여는 방법을 알아 내려고 노력 중입니다. fancybox. 나는 주위를 검색했지만 표시 방법은 html 콘텐츠 만 열린 창 안에 표시 할 수 있습니다. 나는 정말 어떤 도움을 주셔서 감사합니다. 감사. 나는 바이올린 here fancybox에 html 콘텐츠를 표시 하시겠습니까?

<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a> 

<p> 
Place this html content below the open image 
</p>

난 후 당신 무슨 생각을 할 자신의 tips and tricks 섹션 페이지에서 예제 JSFiddles 중 하나를 수정 한

$("a#single_image").fancybox();

출처

2016-09-30 JulianJ

당신의 바이올린은 잘못된 HTML로 가득하다는 (추가 닫는 태그 및 자체 태그를 마감했다. 당신이 넣으면'/>'여는 태그의 끝에서, 당신은 종료 태그가 필요하지 않습니다 . 종료 태그가 필요한 경우에는 슬래시를 제거하십시오.) JQuery로 찾고있는 것처럼 ID가 'single_image' 인 앵커도 없습니다. – DBS

오, 그래, 사과, 나는 그걸 고칠거야. – JulianJ

http://jsfiddle.net/outcgrjj/ 또는'p' 콘텐츠를 동적으로 가져 오시겠습니까? – depperm

JQuery와했습니다.

Fancybox는 레이아웃에 이미지를로드 한 후 일부 JS를 실행할 수있는 옵션이 있습니다.이 옵션을 사용하여 선택한 html을 fancybox 요소에 추가 할 수 있습니다.

$("a#single_image").fancybox({ 
 
    afterLoad: function() { 
 
    this.outer.append("<div>" + document.getElementById("content").innerHTML + "</div>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/> 
 
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> 
 

 
<a id="single_image" href="http://fancyapps.com/fancybox/demo/1_s.jpg" width="400"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" width="100"></a> 
 
<p id="content"> 
 
    Place this html content below the open image 
 
</p>

출처

2016-09-30 15:41:41 DBS

fancybox에 html 콘텐츠를 표시 하시겠습니까?

답변

관련 문제