[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/sisinfo/inc/js/ [ Home ]
File: jquery.divslideshow-1.1.js
(function($){	
	$.fn.divSlideShow = function(customOptions){	
		//default options
		var options = 
		{ 
			width:200, 
			height:100, 
			arrow:"begin", 			
			delay:5000, 
			loop:1,
			leftArrowClass:"",
			rightArrowClass:"",
			//leftArrowClass:"ui-icon ui-icon-circle-triangle-w",
			//rightArrowClass:"ui-icon ui-icon-circle-triangle-e",
			slideContainerClass:"", 
			controlClass:"",
			controlActiveClass:"",
			//controlClass:"ui-state-default ui-corner-all", 
			//controlActiveClass:"ui-state-hover",
			controlHoverClass:"",
			controlContainerClass:"",
			separatorClass:""
			
		};
		//override options
		if(customOptions)
			$.extend(options, customOptions);
		
		//limit loop amount
		if(options.loop > 30)
			options.loop = 30;
		return this.each(function(){
			//make slideshow
			$.divSlideShow(this, options);
		});
	};
	
	$.divSlideShow = function(slideShow, options)
	{		
		var numSlide = $(slideShow).children('.slide').length;			
		$(slideShow).css( { 'width':options.width ,  'overflow':'hidden', 'display':'block' } );		
		
		//wrap all slides with inner conatiner
		$(slideShow).children()			
			.wrap('<div class="dssSlide"></div>')			
		$(slideShow).children('.dssSlide').wrapAll('<div class="dssSlideContainer" page=0 max='+numSlide+'/>');
		$(slideShow).find('.dssSlide')
			.css( {'float':'left', 'width':options.width, 'height':options.height, 'overflow-y':'auto' } );

		//add controls		
		var leftArrow = '<div class="dssControl" direction=-1><span class="'+options.leftArrowClass+'">&lt</span></<div>';
		var rightArrow = '<div class="dssControl" direction=1><span class="'+options.rightArrowClass+'">&gt;</span></<div>';
		$(slideShow).append('<div class="dssSeparator"></div>').find('.dssSeparator').addClass(options.separatorClass);		
		
		if( options.arrow == "begin" )
		{
			$(slideShow).append(leftArrow);
			$(slideShow).append(rightArrow);
		}
		if( options.arrow == "split" )
			$(slideShow).append(leftArrow);
				
		for(var i = 0; i < numSlide; i++) //number buttons
			$(slideShow).append('<div class="dssControl" page='+i+'>'+(i+1)+'</div>');
			
		if( options.arrow == "split" )
			$(slideShow).append(rightArrow);	
		if( options.arrow == "end" )			
		{
			$(slideShow).append(leftArrow);
			$(slideShow).append(rightArrow);
		}
		
		//styles for inner container and controls
		$(slideShow).find('.dssSlideContainer').css( {'width':options.width * numSlide, 'height':options.height, 'overflow':'hidden'} ).addClass(options.slideContainerClass);
		$(slideShow).find('.dssControl')
			.addClass(options.controlClass)
			.css('float','left')
			.hover(function(){ $(this).toggleClass(options.controlHoverClass);})
			.wrapAll('<div class="dssControlContainer"/>');
		$(slideShow).find('.dssControlContainer')
			.css({'height':'100%', 'overflow':'hidden'})
			.addClass(options.controlContainerClass);
		
		//auto-slide: queue a sequence of animation with delay
		for(i = 1; i < Math.floor(numSlide*options.loop); i++)
		{
			$(slideShow).find('.dssSlideContainer').delay(options.delay);				
			$.divSlideShow.slideTo(slideShow, i % numSlide, options);
		}
		//initialize controls look
		$.divSlideShow.manageControls(slideShow, 0, options);
		
		//controls click handler
		$(slideShow).find('.dssControl').click(function(){	
			//remove auto-slide
			$(slideShow).find('.dssSlideContainer').clearQueue();
			//get max pages
			var max = $(slideShow).find('.dssSlideContainer').children().length;
			
			//get target page
			var dir = parseInt($(this).attr('direction'));
			if(dir) //left or right arrow
			{
				var currentPage = parseInt($(slideShow).find('.dssSlideContainer').attr('page'));
				var gotoPage = (currentPage + dir < max && currentPage + dir >= 0) ? currentPage + dir : currentPage;	
			}				
			else //numbers
				var gotoPage = parseInt($(this).attr('page'));
			
			//go~
			$.divSlideShow.slideTo(slideShow, gotoPage, options);
		});		
	};
	

	$.divSlideShow.slideTo = function(slideShow, gotoPage, options)
	{
		//get max pages
		var max = $(slideShow).find('.dssSlideContainer').children().length;
		
		//get width
		var width = $(slideShow).find('.dssSlideContainer .dssSlide').width();		
		
		//manage control look and store current page as attribute, to be executed just before animation
		$(slideShow).find('.dssSlideContainer').queue(function(){
			$.divSlideShow.manageControls(slideShow, gotoPage, options);
			$(this).attr('page', gotoPage);
			$(this).dequeue();
		});
		
		//animate
		$(slideShow).find('.dssSlideContainer').animate(	{'margin-left':-gotoPage*width}	);		
		
	};

	$.divSlideShow.manageControls = function(slideShow, page, options)
	{
		var max = $(slideShow).find('.dssSlideContainer').children().length;
		
		$(slideShow).find('.dssControl').each(function(){
			if( $(this).attr('direction') == '1')//right arrow
			{
				/*if( page < max - 1 )
					$(this).css('visibility','visible');
				else 
					$(this).css('visibility','hidden');*/
			}
			else if( $(this).attr('direction') == '-1')//left arrow
			{
				/*if( page > 0 )
					$(this).css('visibility','visible');
				else 
					$(this).css('visibility','hidden');*/
			}
			else//number
			{				
				if( $(this).attr('page') != page )
					$(this).toggleClass(options.controlActiveClass, false);
				else 
					$(this).toggleClass(options.controlActiveClass, true); 
			}
		});
	};

})(jQuery);