스크립트 오류 질문 채택완료

</p><p>/*</p><p> * jQuery Blueberry Slider v0.4 BETA</p><p> * <a href="<a href="http://marktyrrell.com/labs/blueberry/" target="_blank" rel="noopener noreferrer">http://marktyrrell.com/labs/blueberry/</a>"><a href="http://marktyrrell.com/labs/blueberry/" target="_blank" rel="noopener noreferrer">http://marktyrrell.com/labs/blueberry/</a></a></p><p> *</p><p> * Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com></p><p> *</p><p> * This program is free software: you can redistribute it and/or modify</p><p> * it under the terms of the GNU General Public License as published by</p><p> * the Free Software Foundation, either version 3 of the License, or</p><p> * (at your option) any later version.</p><p> *</p><p> * This program is distributed in the hope that it will be useful,</p><p> * but WITHOUT ANY WARRANTY; without even the implied warranty of</p><p> * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the</p><p> * GNU General Public License for more details.</p><p> *</p><p> * You should have received a copy of the GNU General Public License</p><p> * along with this program.  If not, see <<a href="<a href="http://www.gnu.org/licenses/>." target="_blank" rel="noopener noreferrer">http://www.gnu.org/licenses/>.</a>"><a href="http://www.gnu.org/licenses/>." target="_blank" rel="noopener noreferrer">http://www.gnu.org/licenses/>.</a></a></p><p> *</p><p> */</p><p> </p><p>(function($){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$.fn.extend({</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>blueberry: function(options) {</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>//default values for plugin options</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>var defaults = {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>interval: 4000,</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>duration: 500,</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>lineheight: 1,</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>hoverpause: false,</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>pager: true,</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>nav: true, //reserved</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>keynav: true</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>var options =  $.extend(defaults, options);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>return this.each(function() {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var o = options;</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var obj = $(this);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//store the slide and pager li</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var slides = $('.slidess li', obj);</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var pager = $('.pager li', obj);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//set initial current and next slide index values</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var current = 0;</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var next = current+1;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//get height and width of initial slide image and calculate size ratio</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var imgHeight = slides.eq(current).find('img').height();</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var imgWidth = slides.eq(current).find('img').width();</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var imgRatio = imgWidth/imgHeight;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//define vars for setsize function</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var sliderWidth = 995;</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var cropHeight = 0;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//hide all slides, fade in the first, add active class to first slide</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>slides.hide().eq(current).fadeIn(o.duration).addClass('active');</p><p><span class="Apple-tab-span" style="white-space:pre">				</span></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//build pager if it doesn't already exist and if enabled</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>if(pager.length) {</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>pager.eq(current).addClass('active');</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>} else if(o.pager){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>obj.append('<ul class="pager"></ul>');</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>slides.each(function(index) {</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>$('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>pager = $('.pager li', obj);</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>pager.eq(current).addClass('active');</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//rotate to selected slide on pager click</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>if(pager){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>$('a', pager).click(function() {</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//stop the timer</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>clearTimeout(obj.play);</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//set the slide index based on pager index</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>next = $(this).parent().index();</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//rotate the slides</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>rotate();</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>return false;</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//primary function to change slides</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var rotate = function(){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//fade out current slide and remove active class,</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//fade in next slide and add active class</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>slides.eq(current).fadeOut(o.duration).removeClass('active')</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>.end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>//add rotateTimer function to end of animation queue</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>//this prevents animation buildup caused by requestAnimationFrame</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>//rotateTimer starts a timer for the next rotate</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>rotateTimer();</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>$(this).dequeue()</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//update pager to reflect slide change</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>if(pager){</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>pager.eq(current).removeClass('active')</p><p><span class="Apple-tab-span" style="white-space:pre">							</span>.end().eq(next).addClass('active');</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//update current and next vars to reflect slide change</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>//set next as first slide if current is the last</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>current = next;</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>next = current >= slides.length-1 ? 0 : current+1;</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>};</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//create a timer to control slide rotation interval</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var rotateTimer = function(){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>obj.play = setTimeout(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//trigger slide rotate function at end of timer</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>rotate();</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>}, o.interval);</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>};</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//start the timer for the first time</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>rotateTimer();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//pause the slider on hover</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//disabled by default due to bug</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>if(o.hoverpause){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>slides.hover(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//stop the timer in mousein</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>clearTimeout(obj.play);</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>}, function(){</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>//start the timer on mouseout</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>rotateTimer();</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//calculate and set height based on image width/height ratio and specified line height</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var setsize = function(){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>sliderWidth = $('.slidess', obj).width();</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">					</span>$('.slidess', obj).css({height: cropHeight});</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>};</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>setsize();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//bind setsize function to window resize event</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$(window).resize(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>setsize();</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">				</span></p><p><span class="Apple-tab-span" style="white-space:pre">				</span></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>//Add keyboard navigation</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span>if(o.keynav){</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>$(document).keyup(function(e){</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">						</span>switch (e.which) {</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">							</span>case 39: case 32: //right arrow & space</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">								</span>clearTimeout(obj.play);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">								</span>rotate();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">								</span>break;</p><p> </p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">							</span>case 37: // left arrow</p><p><span class="Apple-tab-span" style="white-space:pre">								</span>clearTimeout(obj.play);</p><p><span class="Apple-tab-span" style="white-space:pre">								</span>next = current - 1;</p><p><span class="Apple-tab-span" style="white-space:pre">								</span>rotate();</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">								</span>break;</p><p><span class="Apple-tab-span" style="white-space:pre">						</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">					</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p> </p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p>})(jQuery);</p><div>
</div><div>