fancybox질문입니다 [경품: 티스토리 초대장 1매^^;;;] 채택완료
1)참고 하실 링크http://daeman.tistory.com/165
http://fancyapps.com/fancybox/fancybox질문입니다 사진을 누르거나 영상을 누르면 창이 떠서 보여지게되잖아요?
바깥 테두리(margin?맞는지 모르겠내요) 두께 조절을 수정하고 싶은데
jquery.fancybox.pack.js 여기로 들어가서 margin 수정을 해봤는데 변화가 없내요^^;;;
제가 어딜 만져야 수정이 될가요? 스마트폰으로 치면 바깥테두리 베젤이 두꺼운 느낌이라 ㅋㅋㅋㅋ
얇게 만들고 싶어서요^^
2)그리고 팬시박스 유투브 연결인데요
http://daeman.tistory.com/165 보시면
Youtube
Vimeo
Metacafe
Dailymotion
Twitpic
이렇게 글을써서 유투브 영상을 띄우는게 아니라 사진이나 동영상 썸네일(?표현이 맞는지 모르겠군요)
파일을 만들어서 동영상을 띄우려면 어떻게 해야할까요^^?
제질문이 이해할수있게 잘썼는지 모르겠지만 부탁 드립니다^^;;;
p.s//메르스!!건강주의하세요 //수정할수 있게 도와주신분께는 답례가 될진모르겠지만 티스토리 초대장 드릴께요~(__)꾸벅
답변 3개
RINIX
10년 전
Copy
$('셀렉터').fancybox({padding : 5}); 펜시박스 호출시 { padding : 5} 을 추가 해주시면 됩니다.
기타 옵션들이 있다마면 뒤에 " , " 너어주셔야 합니다.
욥션값 구문자 입니다.
아래는 디폴트 옵션입니다.
호출시 붙여 넣으시고 하나씩 바꿔 가면서 확인 해보세요.
Copy
$('셀렉터').fancybox({
});
padding : 15,
margin : 20, width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
pixelRatio: 1, // Set to 2 for retina display support autoSize : true,
autoHeight : false,
autoWidth : false, autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5, scrolling : 'auto', // 'auto', 'yes' or 'no'
wrapCSS : '', arrows : true,
closeBtn : true,
closeClick : false,
nextClick : false,
mouseWheel : true,
autoPlay : false,
playSpeed : 3000,
preload : 3,
modal : false,
loop : true, ajax : {
dataType : 'html',
headers : { 'X-fancyBox': true }
},
iframe : {
scrolling : 'auto',
preload : true
},
swf : {
wmode: 'transparent',
allowfullscreen : 'true',
allowscriptaccess : 'always'
}, 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
}, direction : {
next : 'left',
prev : 'right'
}, scrollOutside : true, // Override some properties
index : 0,
type : null,
href : null,
content : null,
title : null, // HTML templates
tpl: {
wrap : '',
image : '',
iframe : '',
error : 'The requested content cannot be loaded.
Please try again later.',
closeBtn : '',
next : '',
prev : ''
}, // Properties for each animation type
// Opening fancyBox
openEffect : 'fade', // 'elastic', 'fade' or 'none'
openSpeed : 250,
openEasing : 'swing',
openOpacity : true,
openMethod : 'zoomIn', // Closing fancyBox
closeEffect : 'fade', // 'elastic', 'fade' or 'none'
closeSpeed : 250,
closeEasing : 'swing',
closeOpacity : true,
closeMethod : 'zoomOut', // Changing next gallery item
nextEffect : 'elastic', // 'elastic', 'fade' or 'none'
nextSpeed : 250,
nextEasing : 'swing',
nextMethod : 'changeIn', // Changing previous gallery item
prevEffect : 'elastic', // 'elastic', 'fade' or 'none'
prevSpeed : 250,
prevEasing : 'swing',
prevMethod : 'changeOut', // Enable default helpers
helpers : {
overlay : true,
title : true
}, // 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
}); /*
* Different effects
*/ // Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
padding : 5,
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
}); // Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none', helpers : {
title : {
type : 'over'
}
}
}); // Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true, openEffect : 'none', helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
}); // Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0, openEffect : 'elastic',
openSpeed : 150, closeEffect : 'elastic',
closeSpeed : 150, closeClick : true, helpers : {
overlay : null
}
}); /*
* Button helper. Disable animations, hide close button, change title type and content
*/ $('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none', prevEffect : 'none',
nextEffect : 'none', closeBtn : false, helpers : {
title : {
type : 'inside'
},
buttons : {}
}, afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/ $('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none', closeBtn : false,
arrows : false,
nextClick : true, helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
RINIX
10년 전
Copy
{
wrap : '',
image : '',
iframe : '',
error : 'The requested content cannot be loaded.
Please try again later.',
closeBtn : '',
next : '',
prev : ''
} 위의 값이 기본 값인듯.. 저도 안서봐서 잘은 모릅니다..^^
기본설을 을 변경하여 사용하시면 될듯...^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
10년 전
js파일은 뜯어보진 않았고 css상으로만 보면
css에 요걸 추가한번 해보세요...
element.style {
padding: 15px !important;;
}
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인