0
: http://www.egrappler.com/jquery-responsive-horizontal-accordion-image-slider-raccordion/jQuery를하고 CSS 애니메이션 문제 (이미지 아코디언) 내가 약간 여기에이 스크립트를 수정하기 위해 노력하고있어
당신은 초기화되고시는 "0"슬라이드 패닝 데모에서 볼 수 있지만, 자막과 제목은 포함되지 않습니다. 캡션과 제목을 표시하는 스크립트를 얻는 유일한 방법은 다른 슬라이드로 이동하고 다시 "0"으로 슬라이드하는 것입니다. 캡션을 페이지로드에 표시하고 싶습니다.하지만 자바 스크립트에 끔찍하고 알아낼 수 없었습니다. 여기
(function ($) {
$.fn.raccordion = function (options) {
var settings = $.extend({
speed: 700,
sliderWidth: 960,
sliderHeight: 300,
autoCollapse: true,
activeSlide: 0
}, options);
return this.each(function() {
var accordionWrapper = $(this);
var width = accordionWrapper.find('.slide img:eq(0)').width();
accordionWrapper.addClass('accordion-wrapper');
var totalSlides = accordionWrapper.find('.slide').size();
var w = width;
initiliaze();
if (settings.activeSlide < totalSlides - 1) {
setTimeout(function() {
accordionWrapper.find('.slide:eq(' + settings.activeSlide + ')').click()
}, settings.speed);
}
function initiliaze() {
if (settings.sliderWidth > $(window).width()) {
width = w * (($(window).width()/settings.sliderWidth));
accordionWrapper.css("width", settings.sliderWidth * ($(window).width()/settings.sliderWidth));
accordionWrapper.find('.slide').each(function (index) {
$(this).animate({ left: (index * (accordionWrapper.width())/totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
});
} else {
width = w;
accordionWrapper.css("width", settings.sliderWidth);
accordionWrapper.find('.slide').each(function (index) {
$(this).animate({ left: (index * (accordionWrapper.width())/totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
});
}
if (settings.sliderHeight > $(window).height()) {
accordionWrapper.animate({ height: settings.sliderHeight * ($(window).height()/settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
accordionWrapper.find('.slide').animate({ height: settings.sliderHeight * ($(window).height()/settings.sliderHeight) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
else {
accordionWrapper.animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
accordionWrapper.find('.slide').animate({ height: settings.sliderHeight }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
accordionWrapper.find('.caption').css({ opacity: 0 });
}
$(window).resize(function() {
accordionWrapper.find('.slide').each(function (index) {
$(this).stop().animate({ left: (index * (accordionWrapper.width())/totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
});
animateCaption();
initiliaze();
});
function animateCaption() {
accordionWrapper.find('.caption').stop().animate({ opacity: 0, bottom: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
accordionWrapper.find('.active').find('.caption').stop().animate({ opacity: 1 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
accordionWrapper.find('.slide').click(function() {
var ratio = (((accordionWrapper.width()) - width))/(totalSlides - 1);
if (($(this).width() == $('.slide').width()) || ($(this).width() == ratio)) {
accordionWrapper.find('.slide').removeClass('active');
$(this).addClass('active');
var currentIndex = accordionWrapper.find('.slide').index(this);
accordionWrapper.find('.slide').each(function (index) {
if (index == 0) {
$(this).animate({ left: 0 }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
else if (index == currentIndex) {
$(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
else if (index < currentIndex) {
$(this).animate({ left: (index) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
else if (index > currentIndex) {
$(this).animate({ left: width + (index - 1) * ratio }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
}
});
animateCaption();
}
});
if (settings.autoCollapse) {
accordionWrapper.mouseleave(function() {
accordionWrapper.find('.slide').each(function (index) {
$(this).stop().animate({ left: (index * (accordionWrapper.width())/totalSlides) }, { queue: false, speed: settings.speed, easing: 'quadEaseOut' });
});
accordionWrapper.find('.caption').css({ opacity: 0, bottom: 0 });
});
}
});
}
})(jQuery);
jQuery.extend({
easing:
{
// ******* back
backEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
return c*(p/=1)*p*((s+1)*p - s) + firstNum;
},
backEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
return c*((p=p/1-1)*p*((s+1)*p + s) + 1) + firstNum;
},
backEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
if ((p/=0.5) < 1)
return c/2*(p*p*(((s*=(1.525))+1)*p - s)) + firstNum;
else
return c/2*((p-=2)*p*(((s*=(1.525))+1)*p + s) + 2) + firstNum;
},
// ******* bounce
bounceEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
var inv = this.bounceEaseOut (1-p, 1, 0, diff);
return c - inv + firstNum;
},
bounceEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if (p < (1/2.75))
{
return c*(7.5625*p*p) + firstNum;
}
else if (p < (2/2.75))
{
return c*(7.5625*(p-=(1.5/2.75))*p + .75) + firstNum;
}
else if (p < (2.5/2.75))
{
return c*(7.5625*(p-=(2.25/2.75))*p + .9375) + firstNum;
}
else
{
return c*(7.5625*(p-=(2.625/2.75))*p + .984375) + firstNum;
}
},
// ******* circ
circEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return -c * (Math.sqrt(1 - (p/=1)*p) - 1) + firstNum;
},
circEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c * Math.sqrt(1 - (p=p/1-1)*p) + firstNum;
},
circEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if ((p/=0.5) < 1)
return -c/2 * (Math.sqrt(1 - p*p) - 1) + firstNum;
else
return c/2 * (Math.sqrt(1 - (p-=2)*p) + 1) + firstNum;
},
// ******* cubic
cubicEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*(p/=1)*p*p + firstNum;
},
cubicEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*((p=p/1-1)*p*p + 1) + firstNum;
},
cubicEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if ((p/=0.5) < 1)
return c/2*p*p*p + firstNum;
else
return c/2*((p-=2)*p*p + 2) + firstNum;
},
// ******* elastic
elasticEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if (p==0) return firstNum;
if (p==1) return c;
var peroid = 0.25;
var s;
var amplitude = c;
if (amplitude < Math.abs(c))
{
amplitude = c;
s = peroid/4;
}
else
{
s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
}
return -(amplitude*Math.pow(2,10*(p-=1)) * Math.sin((p*1-s)*(2*Math.PI)/peroid)) + firstNum;
},
elasticEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if (p==0) return firstNum;
if (p==1) return c;
var peroid = 0.25;
var s;
var amplitude = c;
if (amplitude < Math.abs(c))
{
amplitude = c;
s = peroid/4;
}
else
{
s = peroid/(2*Math.PI) * Math.asin (c/amplitude);
}
return -(amplitude*Math.pow(2,-10*p) * Math.sin((p*1-s)*(2*Math.PI)/peroid)) + c;
},
// ******* expo
expoEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return (p==0) ? firstNum : c * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.001;
},
expoEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return (p==1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) + 1) + firstNum;
},
expoEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if (p==0) return firstNum;
if (p==1) return c;
if ((p/=0.5) < 1)
return c/2 * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.0005;
else
return c/2 * 1.0005 * (-Math.pow(2, -10 * --p) + 2) + firstNum;
},
// ******* quad
quadEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*(p/=1)*p + firstNum;
},
quadEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return -c *(p/=1)*(p-2) + firstNum;
},
quadEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if ((p/=0.5) < 1)
return c/2*p*p + firstNum;
else
return -c/2 * ((--p)*(p-2) - 1) + firstNum;
},
// ******* quart
quartEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*(p/=1)*p*p*p + firstNum;
},
quartEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return -c * ((p=p/1-1)*p*p*p - 1) + firstNum;
},
quartEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if ((p/=0.5) < 1)
return c/2*p*p*p*p + firstNum;
else
return -c/2 * ((p-=2)*p*p*p - 2) + firstNum;
},
// ******* quint
quintEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*(p/=1)*p*p*p*p + firstNum;
},
quintEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c*((p=p/1-1)*p*p*p*p + 1) + firstNum;
},
quintEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
if ((p/=0.5) < 1)
return c/2*p*p*p*p*p + firstNum;
else
return c/2*((p-=2)*p*p*p*p + 2) + firstNum;
},
// ******* sine
sineEaseIn:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return -c * Math.cos(p * (Math.PI/2)) +c + firstNum;
},
sineEaseOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return c * Math.sin(p * (Math.PI/2)) + firstNum;
},
sineEaseInOut:function(p, n, firstNum, diff) {
var c=firstNum+diff;
return -c/2 * (Math.cos(Math.PI*p) - 1) + firstNum;
}
}
});
감사합니다 많이! 믿거 나 말거나, if 문 앞에 animateCaption() 함수를 추가해 보았습니다. 정말 감사드립니다! – Jeff