묻고답하기
이미지 슬라이더 그림 크기를 고정시키고 싶어요
2016.02.14 00:55
안녕하세요? 제가 사용하는 스킨의 이미지 슬라이더는 모니터 크기에 맞게 사진이 가로로 자동조절 되고 height는 600 픽셀로 고정되어 있어요. 제가 올린 사진파일은 전부 1024 * 600 임에도 불구하고, 어떤 모니터로 보냐에 따라서 그림이 모양이 보기 안좋아지는 상태가 되네요. silder라는 쿼리 파일?? 을 메모장으로 열어보니 다음과 같이 나옵니다. 가로 세로를 1024*600으로 슬라이더를 고정시키고 싶은데 어디를 고치면 좋으라요?
/* =========================================================
// SKD Slider
// Datum: 2013-02-14
// Author: Samir Kumar Das
// Mail: cse.samir@gmail.com
// Web: http://dandywebsolution.com/skdslider
* $('#demo').xdtslider({'delay':5000, 'fadeSpeed': 2000});
*
// ========================================================= */
(function($){
$.xdtslider = function(container,options){
// settings
var config = {
'delay': 2000,
'fadeSpeed': 500,
'showNav':true,
'autoStart':true,
'showNextPrev':false,
'numericNav':false,
'showPlayButton':false
};
if ( options ){$.extend(config, options);}
// variables
var element=$(container);
element.find('ul').addClass('slides');
var slides = element.find('ul.slides li');
var targetSlide=0;
config.currentSlide=0;
config.currentState='pause';
$.xdtslider.createNav(element,slides, config);
slides.eq(targetSlide).show();
if (config.autoStart==true){
config.currentState='play';
config.interval=setTimeout(function() {
$.xdtslider.playSlide(element,slides, config);
}, config.delay);
}
};
$.xdtslider.createNav=function(element,slides,config){
var slideSet ='<ul class="slide-navs">';
for(i=0;i<slides.length;i++){
var slideContent='';
if(config.numericNav==true) slideContent=(i+1);
if(i==0)
slideSet+='<li class="current-slide slide-nav-'+i+'"><a>'+slideContent+'</a></li>';
else
slideSet+='<li class="slide-nav-'+i+'"><a>'+slideContent+'</a></li>';
}
slideSet+='</ul>';
if (config.showNav==true){
element.append(slideSet);
var nav_width=element.find('.slide-navs')[0].offsetWidth;
nav_width=parseInt((nav_width/2));
nav_width=(-1)*nav_width;
element.find('.slide-navs').css('margin-left',nav_width);
// Slide marker clicked
element.find('.slide-navs li').click(function(){
index = element.find('.slide-navs li').index(this);
targetSlide = index;
clearTimeout(config.interval);
$.xdtslider.playSlide(element,slides, config,targetSlide);
return false;
});
}
if (config.showNextPrev==true){
var nextPrevButton ='<a class="prev"></a>';
nextPrevButton +='<a class="next"></a>';
element.append(nextPrevButton);
element.find('a.prev').click(function(){
if(config.currentSlide==0)targetSlide = (slides.length-1);
else targetSlide = (config.currentSlide-1);
clearTimeout(config.interval);
$.xdtslider.playSlide(element,slides, config,targetSlide);
return true;
});
element.find('a.next').click(function(){
if((config.currentSlide+1)==slides.length)targetSlide = 0;
else targetSlide = (config.currentSlide+1);
clearTimeout(config.interval);
$.xdtslider.playSlide(element,slides, config,targetSlide);
return false;
});
}
if (config.showPlayButton==true){
var playPause =(config.currentState=='play' || config.autoStart==true)?'<a class="play-control pause"></a>':'<a class="play-control play"></a>';
element.append(playPause);
element.hover(function(){element.find('a.play-control').css('display','block');},function(){element.find('a.play-control').css('display','none');});
element.find('a.play-control').click(function(){
if(config.currentState=='play')
{
clearTimeout(config.interval);
config.currentState='pause';
$(this).addClass('play');
$(this).removeClass('pause');
}
else
{
config.currentState='play';
config.autoStart=true;
$(this).addClass('pause');
$(this).removeClass('play');
if((config.currentSlide+1)==slides.length)targetSlide = 0;
else targetSlide = (config.currentSlide+1);
clearTimeout(config.interval);
$.xdtslider.playSlide(element,slides, config,targetSlide);
}
return false;
});
}
};
$.xdtslider.playSlide=function(element,slides,config,targetSlide){
element.find('.slide-navs li').removeClass('current-slide');
slides.eq(config.currentSlide).fadeOut(config.fadeSpeed);
if(typeof (targetSlide)=='undefined'){
targetSlide = ( config.currentSlide+1 == slides.length ) ? 0 : config.currentSlide+1;
}
element.find('.slide-navs li').eq(targetSlide).addClass('current-slide');
slides.eq(targetSlide).fadeIn(config.fadeSpeed, function() {
$.xdtslider.removeIEFilter($(this)[0]);
});
config.currentSlide=targetSlide;
if (config.autoStart==true && config.currentState=='play'){
config.interval=setTimeout((function() {
$.xdtslider.playSlide(element,slides, config);
}), config.delay);
}
};
$.xdtslider.removeIEFilter=function(elm){
if(elm.style.removeAttribute){
elm.style.removeAttribute('filter');
}
}
$.fn.xdtslider = function(options){
return this.each(function(){
(new $.xdtslider(this,options));
});
};
})(jQuery);
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
김유석 | 이 API 토큰발급 어떻게 하나요? [1] | 2015.10.21 by 부산민지아빠 |
댑펑 | 댓글 글자수를 mysqladmin 상에서 한 것 같습니다. [4] | 2015.11.02 by 댑펑 |
namoo+ | 모든 기능은 정상이나 회원가입 및 정보수정이 안 됩니다. ㅜ.ㅠ [9] | 2015.11.08 by 빤뻔 |
보소보소 |
누리고 상세설명 이미지 오류
![]() | |
키스미베이베 |
메뉴 만들기좀 도와주세요
[2]
![]() | 2015.11.26 by 키스미베이베 |
smiling | 확장변수를 **별표처리 하는법 있을까요? | |
GELEE |
모바일 레이아웃에서 상단 로고 클릭시 홈으로 이동하지 않는 문제
[2]
![]() | 2015.12.09 by GELEE |
봉드레88 | [고수님들의 도움요청 ]페이지 삽입문제 [1] | 2015.12.10 by GG |
채리75 |
다중 홈페이지 뭐가 틀린건가요?
[1]
![]() | 2015.12.12 by sejin7940 |
세상의모든계산기 | (크롬&관리자 상태일 때) MathJax 로딩이 상당히 버벅입니다. [3] | 2015.12.12 by 세상의모든계산기 |
오픈퀴어 | 스크롤 따라다니는 퀵메뉴 배너 [3] | 2015.12.14 by 오픈퀴어 |
서사모 |
카카오톡보내기 할때 첨부이미지가 안되요~ 어디가 잘못된건지 ㅜㅜ
![]() | |
마루타현 | 스케치북 폼 변경 문의 [2] | 2016.01.25 by 마루타현 |
c*** | 이미지 슬라이더 그림 크기를 고정시키고 싶어요 | |
댑펑 | 세진님 추천 새로고침 없이 하는 애드온 질문드려요 [1] | 2016.02.18 by sejin7940 |
gagagaga2 | xe 갤러리게시판에 외부이미지 쓰면 원래 썸네일 안생기나요? [1] | 2016.02.19 by 휘즈 |
thdwjdtjr |
간단한 메인화면 수정 의뢰합니다
![]() | |
오늘 |
초보입니다 도와주세요!!
[4]
![]() | 2016.03.17 by 오늘 |
굳세라 | 익명관련 애드온을 사용하고 있는데 질문이 있습니다 | |
땅콩이 | 브라우져별 이동페이지레이아웃 |