함수 설정(box){
var track=box.querySelector('.pd-shots')||box.querySelector('.pd-track');
만약 (track이 아니면) null을 반환합니다.
var figs=[];
변수 i;
for(i=0;i 트랙의 자식들[i]에 태그 이름이 'FIGURE'이고, 'data-pd-clone' 속성을 가진 태그가 !인 경우, figs.push(track.children[i])를 실행합니다.
}
var n=figs.length;
if(2>n)는 null을 반환합니다.
만약 track.getAttribute('data-pd-ready')가 아니라면,
var last=figs[n-1].cloneNode(true);
var first=figs[0].cloneNode(true);
last.setAttribute('data-pd-clone','1');
first.setAttribute('data-pd-clone','1');
last.setAttribute('aria-hidden','true');
first.setAttribute('aria-hidden','true');
track.insertBefore(last, figs[0]);
track.appendChild(first);
track.setAttribute('data-pd-ready','1');
}
변수 인덱스=1;
var countEl=box.querySelector('.pd-count');
var dots=box.querySelectorAll('.pd-dots button');
var isShots=track.className.indexOf('pd-shots')!==-1;
var nav=box.querySelector('.pd-nav');
var drag=null;
함수 live(){
만약 (isShots이 아니면) true를 반환합니다.
nav가 아니면 false를 반환합니다.
return window.getComputedStyle(nav).display!=='none';
}
function width(){ return track.clientWidth||1; }
함수 logical(){
var v=index-1;
if(0>v) v=n-1;
만약(v>=n)이면 v=0;
v를 반환합니다.
}
함수 paint(animate){
track.style.transition=animate?'transform .32s ease':'none';
track.style.transform='translate3d('+(-index*width())+'px,0,0)';
}
함수 show(){
var v=logical();
if(countEl) countEl.textContent=(v+1)+' / '+n;
for(var d=0;d }
함수 모드(){
var on=live();
var kids=track.children;
변수 k;
for(k=0;k 만약(!on){
키즈[k].스타일.플렉스='';
아이들[k].style.width='';
kids[k].style.minWidth='';
만약 kids[k].getAttribute('data-pd-clone')이면 kids[k].style.display='none';
}또 다른{
키즈[k].스타일.디스플레이='';
kids[k].style.flex='0 0 100%';
키즈[k].스타일.폭='100%';
kids[k].style.minWidth='0';
kids[k].style.maxWidth='100%';
}
}
var view=track.parentNode;
if(view && view.className.indexOf('pd-viewport')!==-1){
view.style.touchAction='pan-y';
if(on) view.style.overflow='hidden';
그렇지 않고 (isShots인 경우) view.style.overflow='visible'로 설정합니다.
}
만약(!on){
트랙 스타일 변환='없음';
트랙 스타일 전환='없음';
반품;
}
트랙스타일.오버플로우='보이는';
트랙.스타일.터치액션='pan-y';
track.style.scrollSnapType='none';
페인트(false);
보여주다();
}
함수 settle(){
if(index<1){ index=n; paint(false); }
그렇지 않고 인덱스가 n보다 크면 인덱스를 1로 설정하고 페인트(false)를 지정합니다.
}
track.addEventListener('transitionend', function(e){
e.target이 track과 다르거나 e.propertyName이 'transform'이 아니면 return;
해결하다();
보여주다();
});
window.addEventListener('크기 조정', 모드);
방법();
반품 {
트랙:트랙,
시작:함수(e){
만약 live()가 1이 아니고, e.touches가 1이 아니고, e.touches의 길이가 1이 아니면, return;
해결하다();
drag={x:e.touches[0].clientX,y:e.touches[0].clientY,dx:0,dy:0,lock:''};
트랙 스타일 전환='없음';
},
이동:함수(e){
드래그가 1이 아니거나, e가 터치하지 않았거나, e의 터치 길이가 1이 아니면 반환됩니다.
drag.dx=e.touches[0].clientX-drag.x;
drag.dy=e.touches[0].clientY-drag.y;
드래그가 잠겨 있지 않다면
만약 10이 Math.abs(drag.dx)보다 크고 10이 Math.abs(drag.dy)보다 크다면, 반환하세요.
drag.lock=Math.abs(drag.dx)>Math.abs(drag.dy)?'x':'y';
}
드래그 잠금이 'x'가 아니면 반환됩니다.
e.cancelable이면 e.preventDefault();
track.style.transform='translate3d('+(-index*width()+drag.dx)+'px,0,0)';
},
끝:함수(){
드래그하지 않으면 반환됩니다.
var dx=drag.dx;
var lock=drag.lock;
드래그=null;
만약 잠금이 'x'가 아니면, 페인트(true)를 입력하고, 반환(return)을 사용하세요.
var 제한=Math.min(48, 너비()*0.18);
if(dx<=-limit) index+=1;
그렇지 않고 dx가 limit보다 크거나 같으면 인덱스가 1이 됩니다.
페인트(true);
보여주다();
루트.pdSkip=1;
window.setTimeout(function(){ root.pdSkip=0; }, 450);
},
cancel:function(){ drag=null; paint(true); },
클릭:function(e){
루트의 pdSkip 값이 0이면 루트의 pdSkip 값을 0으로 설정하고, 그 다음 값을 반환합니다.
var btn=e.target && e.target.closest ? e.target.closest('button') : null;
만약 btn이 아니거나, box.contains(btn)이 아니거나, live()가 아니면 return;
e.preventDefault();
if(btn.className.indexOf('pd-prev')!==-1) index-=1;
그렇지 않으면 btn.className.indexOf('pd-next')가 -1이 아닌 경우 index+=1이 됩니다.
그렇지 않고 btn.parentNode가 'pd-dots' 클래스의 인덱스가 -1이 아니면 {
var buttons=btn.parentNode.querySelectorAll('button');
for(var b=0;b 그렇지 않으면 반환;
페인트(true);
보여주다();
}
};
}
var controls=[];
var boxes=root.querySelectorAll('[data-pd]');
for(var n=0;n var api=setup(boxes[n]);
if(api) controls.push(api);
}
함수 소유자(e){
var 노드=e && e.target;
만약 노드가 가장 가깝지 않거나 노드의 위치가 가장 가깝지 않으면 null을 반환합니다.
var box=node.closest('[data-pd]');
만약 (box가 아닌 경우) null을 반환합니다.
for(var i=0;i null을 반환합니다.
}
var active=null;
반품 {
시작: 함수(e){ active=owner(e); if(active) active.start(e); },
이동: 함수(e){ if(활성화됨) active.move(e); },
end:function(){ if(active) active.end(); active=null; },
cancel:function(){ if(active) active.cancel(); active=null; },
click:function(e){ var item=owner(e); if(item) item.click(e); }
};
})(이것);
if(event && event.touches) this.pdApi.start(event);" ontouchmove="if(this.pdApi)this.pdApi.move(event);" ontouchend="if(this.pdApi)this.pdApi.end(event);" ontouchcancel="if(this.pdApi)this.pdApi.cancel(event);" onclick="if(!this.pdApi){this.pdApi=this.pdApi||(function(root){
함수 설정(box){
var track=box.querySelector('.pd-shots')||box.querySelector('.pd-track');
만약 (track이 아니면) null을 반환합니다.
var figs=[];
변수 i;
for(i=0;i 트랙의 자식들[i]에 태그 이름이 'FIGURE'이고, 'data-pd-clone' 속성을 가진 태그가 !인 경우, figs.push(track.children[i])를 실행합니다.
}
var n=figs.length;
if(2>n)는 null을 반환합니다.
만약 track.getAttribute('data-pd-ready')가 아니라면,
var last=figs[n-1].cloneNode(true);
var first=figs[0].cloneNode(true);
last.setAttribute('data-pd-clone','1');
first.setAttribute('data-pd-clone','1');
last.setAttribute('aria-hidden','true');
first.setAttribute('aria-hidden','true');
track.insertBefore(last, figs[0]);
track.appendChild(first);
track.setAttribute('data-pd-ready','1');
}
변수 인덱스=1;
var countEl=box.querySelector('.pd-count');
var dots=box.querySelectorAll('.pd-dots button');
var isShots=track.className.indexOf('pd-shots')!==-1;
var nav=box.querySelector('.pd-nav');
var drag=null;
함수 live(){
만약 (isShots이 아니면) true를 반환합니다.
nav가 아니면 false를 반환합니다.
return window.getComputedStyle(nav).display!=='none';
}
function width(){ return track.clientWidth||1; }
함수 logical(){
var v=index-1;
if(0>v) v=n-1;
만약(v>=n)이면 v=0;
v를 반환합니다.
}
함수 paint(animate){
track.style.transition=animate?'transform .32s ease':'none';
track.style.transform='translate3d('+(-index*width())+'px,0,0)';
}
함수 show(){
var v=logical();
if(countEl) countEl.textContent=(v+1)+' / '+n;
for(var d=0;d }
함수 모드(){
var on=live();
var kids=track.children;
변수 k;
for(k=0;k 만약(!on){
키즈[k].스타일.플렉스='';
아이들[k].style.width='';
kids[k].style.minWidth='';
만약 kids[k].getAttribute('data-pd-clone')이면 kids[k].style.display='none';
}또 다른{
키즈[k].스타일.디스플레이='';
kids[k].style.flex='0 0 100%';
키즈[k].스타일.폭='100%';
kids[k].style.minWidth='0';
kids[k].style.maxWidth='100%';
}
}
var view=track.parentNode;
if(view && view.className.indexOf('pd-viewport')!==-1){
view.style.touchAction='pan-y';
if(on) view.style.overflow='hidden';
그렇지 않고 (isShots인 경우) view.style.overflow='visible'로 설정합니다.
}
만약(!on){
트랙 스타일 변환='없음';
트랙 스타일 전환='없음';
반품;
}
트랙스타일.오버플로우='보이는';
트랙.스타일.터치액션='pan-y';
track.style.scrollSnapType='none';
페인트(false);
보여주다();
}
함수 settle(){
if(index<1){ index=n; paint(false); }
그렇지 않고 인덱스가 n보다 크면 인덱스를 1로 설정하고 페인트(false)를 지정합니다.
}
track.addEventListener('transitionend', function(e){
e.target이 track과 다르거나 e.propertyName이 'transform'이 아니면 return;
해결하다();
보여주다();
});
window.addEventListener('크기 조정', 모드);
방법();
반품 {
트랙:트랙,
시작:함수(e){
만약 live()가 1이 아니고, e.touches가 1이 아니고, e.touches의 길이가 1이 아니면, return;
해결하다();
drag={x:e.touches[0].clientX,y:e.touches[0].clientY,dx:0,dy:0,lock:''};
트랙 스타일 전환='없음';
},
이동:함수(e){
드래그가 1이 아니거나, e가 터치하지 않았거나, e의 터치 길이가 1이 아니면 반환됩니다.
drag.dx=e.touches[0].clientX-drag.x;
drag.dy=e.touches[0].clientY-drag.y;
드래그가 잠겨 있지 않다면
만약 10이 Math.abs(drag.dx)보다 크고 10이 Math.abs(drag.dy)보다 크다면, 반환하세요.
drag.lock=Math.abs(drag.dx)>Math.abs(drag.dy)?'x':'y';
}
드래그 잠금이 'x'가 아니면 반환됩니다.
e.cancelable이면 e.preventDefault();
track.style.transform='translate3d('+(-index*width()+drag.dx)+'px,0,0)';
},
끝:함수(){
드래그하지 않으면 반환됩니다.
var dx=drag.dx;
var lock=drag.lock;
드래그=null;
만약 잠금이 'x'가 아니면, 페인트(true)를 입력하고, 반환(return)을 사용하세요.
var 제한=Math.min(48, 너비()*0.18);
if(dx<=-limit) index+=1;
그렇지 않고 dx가 limit보다 크거나 같으면 인덱스가 1이 됩니다.
페인트(true);
보여주다();
루트.pdSkip=1;
window.setTimeout(function(){ root.pdSkip=0; }, 450);
},
cancel:function(){ drag=null; paint(true); },
클릭:function(e){
루트의 pdSkip 값이 0이면 루트의 pdSkip 값을 0으로 설정하고, 그 다음 값을 반환합니다.
var btn=e.target && e.target.closest ? e.target.closest('button') : null;
만약 btn이 아니거나, box.contains(btn)이 아니거나, live()가 아니면 return;
e.preventDefault();
if(btn.className.indexOf('pd-prev')!==-1) index-=1;
그렇지 않으면 btn.className.indexOf('pd-next')가 -1이 아닌 경우 index+=1이 됩니다.
그렇지 않고 btn.parentNode가 'pd-dots' 클래스의 인덱스가 -1이 아니면 {
var buttons=btn.parentNode.querySelectorAll('button');
for(var b=0;b 그렇지 않으면 반환;
페인트(true);
보여주다();
}
};
}
var controls=[];
var boxes=root.querySelectorAll('[data-pd]');
for(var n=0;n var api=setup(boxes[n]);
if(api) controls.push(api);
}
함수 소유자(e){
var 노드=e && e.target;
만약 노드가 가장 가깝지 않거나 노드의 위치가 가장 가깝지 않으면 null을 반환합니다.
var box=node.closest('[data-pd]');
만약 (box가 아닌 경우) null을 반환합니다.
for(var i=0;i null을 반환합니다.
}
var active=null;
반품 {
시작: 함수(e){ active=owner(e); if(active) active.start(e); },
이동: 함수(e){ if(활성화됨) active.move(e); },
end:function(){ if(active) active.end(); active=null; },
cancel:function(){ if(active) active.cancel(); active=null; },
click:function(e){ var item=owner(e); if(item) item.click(e); }
};
})(이것);
if(event && event.touches) this.pdApi.start(event);}if(this.pdApi &&event)this.pdApi.click(event);">
벽에
나무테 거울
액자 재질과 크기는 선택하신 옵션에 따라 결정됩니다. 방과 주변 사물은 스타일링 요소일 뿐입니다.
세부 사항
프레임의 나뭇결과 유리 가장자리
나무 액자가 유리를 감싸고 있다. 나뭇결, 액자 가장자리, 그리고 이음새가 눈에 띄는 디테일이다.
프레임의 나무결 프레임 가장자리 프레임과 유리 접합부
1/3
흑호두나무 / A등급 / 지름 25cm (9.8인치)체리나무 / A등급 / 지름 25cm (9.8인치)흑호두나무 / A등급 / 지름 30cm (11.8인치)체리나무 / A등급 / 지름 30cm (11.8인치)
1/4
옵션
제시된 옵션 중에서 선택하세요
각 사진은 한 번씩만 표시됩니다. 사진을 공유하는 옵션은 다시 표시되지 않습니다. 치수는 옵션 자체에 표시되어 있습니다.
