fancybox질문입니다 [경품: 티스토리 초대장 1매^^;;;] 채택완료
하늘제사장
10년 전
조회 4,432
1)참고 하실 링크 http://daeman.tistory.com/165" style="font-family: 'Nanum Gothic', serif; font-size: medium; line-height: normal; color: rgb(0, 0, 0);">http://daeman.tistory.com/165
http://fancyapps.com/fancybox/" style="color: rgb(0, 0, 0);">http://fancyapps.com/fancybox/fancybox질문입니다 사진을 누르거나 영상을 누르면 창이 떠서 보여지게되잖아요?
바깥 테두리(margin?맞는지 모르겠내요) 두께 조절을 수정하고 싶은데
jquery.fancybox.pack.js 여기로 들어가서 margin 수정을 해봤는데 변화가 없내요^^;;;
제가 어딜 만져야 수정이 될가요? 스마트폰으로 치면 바깥테두리 베젤이 두꺼운 느낌이라 ㅋㅋㅋㅋ
얇게 만들고 싶어서요^^
2)그리고 팬시박스 유투브 연결인데요
http://daeman.tistory.com/165" style="color: rgb(0, 0, 0);">http://daeman.tistory.com/165 보시면
Youtube
Vimeo
Metacafe
Dailymotion
Twitpic
이렇게 글을써서 유투브 영상을 띄우는게 아니라 사진이나 동영상 썸네일(?표현이 맞는지 모르겠군요)
파일을 만들어서 동영상을 띄우려면 어떻게 해야할까요^^?
제질문이 이해할수있게 잘썼는지 모르겠지만 부탁 드립니다^^;;;
p.s//메르스!!건강주의하세요 //수정할수 있게 도와주신분께는 답례가 될진모르겠지만 티스토리 초대장 드릴께요~(__)꾸벅
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
10년 전
</p><p> </p><p>$('셀렉터').fancybox({padding : 5});</p><p> </p><p>
펜시박스 호출시 { padding : 5} 을 추가 해주시면 됩니다.
기타 옵션들이 있다마면 뒤에 " , " 너어주셔야 합니다.
욥션값 구문자 입니다.
아래는 디폴트 옵션입니다.
호출시 붙여 넣으시고 하나씩 바꿔 가면서 확인 해보세요.
</p><p> </p><p>$('셀렉터').fancybox({
});
padding : 15,
margin : 20,</p><p> width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
pixelRatio: 1, // Set to 2 for retina display support</p><p> autoSize : true,
autoHeight : false,
autoWidth : false,</p><p> autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,</p><p> scrolling : 'auto', // 'auto', 'yes' or 'no'
wrapCSS : '',</p><p> arrows : true,
closeBtn : true,
closeClick : false,
nextClick : false,
mouseWheel : true,
autoPlay : false,
playSpeed : 3000,
preload : 3,
modal : false,
loop : true,</p><p> ajax : {
dataType : 'html',
headers : { 'X-fancyBox': true }
},
iframe : {
scrolling : 'auto',
preload : true
},
swf : {
wmode: 'transparent',
allowfullscreen : 'true',
allowscriptaccess : 'always'
},</p><p> keys : {
next : {
13 : 'left', // enter
34 : 'up', // page down
39 : 'left', // right arrow
40 : 'up' // down arrow
},
prev : {
8 : 'right', // backspace
33 : 'down', // page up
37 : 'right', // left arrow
38 : 'down' // up arrow
},
close : [27], // escape key
play : [32], // space - start/stop slideshow
toggle : [70] // letter "f" - toggle fullscreen
},</p><p> direction : {
next : 'left',
prev : 'right'
},</p><p> scrollOutside : true,</p><p> // Override some properties
index : 0,
type : null,
href : null,
content : null,
title : null,</p><p> // HTML templates
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.
Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
},</p><p> // Properties for each animation type
// Opening fancyBox
openEffect : 'fade', // 'elastic', 'fade' or 'none'
openSpeed : 250,
openEasing : 'swing',
openOpacity : true,
openMethod : 'zoomIn',</p><p> // Closing fancyBox
closeEffect : 'fade', // 'elastic', 'fade' or 'none'
closeSpeed : 250,
closeEasing : 'swing',
closeOpacity : true,
closeMethod : 'zoomOut',</p><p> // Changing next gallery item
nextEffect : 'elastic', // 'elastic', 'fade' or 'none'
nextSpeed : 250,
nextEasing : 'swing',
nextMethod : 'changeIn',</p><p> // Changing previous gallery item
prevEffect : 'elastic', // 'elastic', 'fade' or 'none'
prevSpeed : 250,
prevEasing : 'swing',
prevMethod : 'changeOut',</p><p> // Enable default helpers
helpers : {
overlay : true,
title : true
},</p><p> // Callbacks
onCancel : $.noop, // If canceling
beforeLoad : $.noop, // Before loading
afterLoad : $.noop, // After loading
beforeShow : $.noop, // Before changing in current item
afterShow : $.noop, // After opening
beforeChange : $.noop, // Before changing gallery item
beforeClose : $.noop, // Before closing
afterClose : $.noop // After closing
});</p><p> /*
* Different effects
*/</p><p> // Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
padding : 5,
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});</p><p> // Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',</p><p> helpers : {
title : {
type : 'over'
}
}
});</p><p> // Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,</p><p> openEffect : 'none',</p><p> helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});</p><p> // Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,</p><p> openEffect : 'elastic',
openSpeed : 150,</p><p> closeEffect : 'elastic',
closeSpeed : 150,</p><p> closeClick : true,</p><p> helpers : {
overlay : null
}
});</p><p> /*
* Button helper. Disable animations, hide close button, change title type and content
*/</p><p> $('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',</p><p> prevEffect : 'none',
nextEffect : 'none',</p><p> closeBtn : false,</p><p> helpers : {
title : {
type : 'inside'
},
buttons : {}
},</p><p> afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});</p><p>
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/</p><p> $('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',</p><p> closeBtn : false,
arrows : false,
nextClick : true,</p><p> helpers : {
thumbs : {
width : 50,
height : 50
}
}
});</p><p> </p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
10년 전
</p><p> </p><p><span class="pun">{</span><span class="pln">
</span></p><p><span class="pln">wrap </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'</span><span class="pun">,</span><span class="pln">
</span></p><p><span class="pln">image </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<img class="fancybox-image" src="{href}" alt="" />'</span><span class="pun">,</span><span class="pln">
</span></p><p><span class="pln">iframe </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">browser</span><span class="pun">.</span><span class="pln">msie </span><span class="pun">?</span><span class="pln"> </span><span class="str">' allowtransparency="true"'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">'></iframe>'</span><span class="pun">,</span><span class="pln">
</span></p><p><span class="pln"> error </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<p class="fancybox-error">The requested content cannot be loaded.
Please try again later.</p>'</span><span class="pun">,</span><span class="pln">
closeBtn </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'</span><span class="pun">,</span><span class="pln">
</span></p><p><span class="kwd">next</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>'</span><span class="pun">,</span><span class="pln">
</span></p><p><span class="pln">prev </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'</span><span class="pln">
</span></p><p><span class="pln"></span><span class="pun">}</span></p><p><span class="pun"> </span></p><p>
위의 값이 기본 값인듯.. 저도 안서봐서 잘은 모릅니다..^^
기본설을 을 변경하여 사용하시면 될듯...^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
하늘제사장
10년 전
모르겠어요 ㅠㅠㅠㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인