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
js파일은 뜯어보진 않았고 css상으로만 보면
css에 요걸 추가한번 해보세요...
element.style {
padding: 15px !important;;
}
안됩니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
{
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"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>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>'
}
위의 값이 기본 값인듯.. 저도 안서봐서 잘은 모릅니다..^^
기본설을 을 변경하여 사용하시면 될듯...^^
모르겠어요 ㅠㅠㅠㅠㅠㅠ
$('셀렉터').fancybox({padding : 5});
펜시박스 호출시 { padding : 5} 을 추가 해주시면 됩니다.
기타 옵션들이 있다마면 뒤에 " , " 너어주셔야 합니다.
욥션값 구문자 입니다.
아래는 디폴트 옵션입니다.
호출시 붙여 넣으시고 하나씩 바꿔 가면서 확인 해보세요.
$('셀렉터').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 : '<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.<br/>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>'
},
// 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
}
}
});
답변을 작성하시기 전에 로그인 해주세요.
