4DVIEW USAGE
발급받은 URL은 <iframe> 태그를 통해 보여줄 수 있고, style 속성으로 슬라이더를 보여줄 위치, 뷰의 크기를 정해줄 수 있습니다.
[ 4D Slider ]
<iframe src="[슬라이더 URL]"
id="slider"
style="border:0px;
width:[슬라이더 너비];
height:[슬라이더 높이];"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[ 4D View ]
<iframe src="[4D View URL]"
id="threed"
style="border:0px;
width:0;
height:0;
min-width:[4D View 너비];
max-width:[4D View 너비];
min-height:[4D View 높이];
max-height:[4D View 높이];"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
예를 들어 크기가 너비 400px, 높이 400px인 뷰를 글에 넣고 싶다면 다음과 같이 <iframe> 태그를 작성합니다.
[ 4D Slider ]
<iframe src="https://4dview.co.kr/rotate/link/4j79__b9pg_Z7iq7hfzyug"
id="slider"
style="border:0px;
width:400px;
height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[ 4D View ]
<iframe src="https://4dview.co.kr/link/UWlcpsb-1ijR6MK4CKebfg"
id="threed"
style="border:0px;
width:0;
height:0;
min-width:400px;
max-width:400px;
min-height:400px;
max-height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
작성한 태그를 글의 넣고 싶은 위치에 배치합니다.
[ 4D Slider ]
<h1> 글 제목 </h1>
<hr>
<div>
상단 내용
<br>
<iframe src="https://4dview.co.kr/rotate/link/4j79__b9pg_Z7iq7hfzyug"
id="slider"
style="border:0px;
width:400px;
height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
<br>
하단 내용
</div>
[ 4D View ]
<h1> 글 제목 </h1>
<hr>
<div>
상단 내용
<br>
<iframe src="https://4dview.co.kr/link/UWlcpsb-1ijR6MK4CKebfg"
id="threed"
style="border:0px;
width:0;
height:0;
min-width:400px;
max-width:400px;
min-height:400px;
max-height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
<br>
하단 내용
</div>
EXAMPLES
[EX1] 기본 뷰 배치 예시
[ 4D Slider ]
<iframe src="https://4dview.co.kr/rotate/link/4j79__b9pg_Z7iq7hfzyug"
id="slider"
style="border:0px;
width:400px;
height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[ 4D View ]
<iframe src="https://4dview.co.kr/link/UWlcpsb-1ijR6MK4CKebfg"
id="threed"
style="border:0px;
width:0;
height:0;
min-width:400px;
max-width:400px;
min-height:400px;
max-height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[EX2] 중앙 배치 예시
[ 4D Slider ]
<iframe src="https://4dview.co.kr/rotate/link/4j79__b9pg_Z7iq7hfzyug"
id="slider"
style="border:0px;
width:100%;
height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[ 4D View ]
<iframe src="https://4dview.co.kr/link/UWlcpsb-1ijR6MK4CKebfg"
id="threed"
style="border:0px;
width:0;
height:0;
min-width:100%;
max-width:100%;
min-height:400px;
max-height:400px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[EX3] 썸네일 배치 예시
[ 4D Slider ]
<iframe src="https://4dview.co.kr/rotate/thumb/4j79__b9pg_Z7iq7hfzyug"
id="slider"
style="border:1px solid #ccc;
width:200px;
height:200px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
[ 4D View ]
<iframe src="https://4dview.co.kr/full/UWlcpsb-1ijR6MK4CKebfg"
id="threed"
style="border:1px solid #ccc;
width:0;
height:0;
min-width:200px;
max-width:200px;
min-height:200px;
max-height:200px;"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
