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개 / 댓글 2개
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 : '<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 } } });RINIX
10년 전
Copy
{
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>'
}
위의 값이 기본 값인듯.. 저도 안서봐서 잘은 모릅니다..^^
기본설을 을 변경하여 사용하시면 될듯...^^
답변에 대한 댓글 1개
10년 전
js파일은 뜯어보진 않았고 css상으로만 보면
css에 요걸 추가한번 해보세요...
element.style {
padding: 15px !important;;
}
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.