Показать сообщение отдельно
  #1 (permalink)  
Старый 25.09.2014, 10:10
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

сабытие Onchange
Здравствуйте у меня возник вот какой вопрос. Есть такая функция:
function setOrder() {
							// call method onChange for inner callback out of script
							getObject.onChange($items.eq(itemsOrder[middleIndex]), itemsOrder[middleIndex]===0 ? length : itemsOrder[middleIndex], length);

							getObject.pagination.enable&&paginationSet(itemsOrder[middleIndex]);

							for (var j=0; j<length; j++){
								var	i = itemsOrder[j],
								 	$this = $items.eq(i),
									img = $this.find('img'),
									w = img.width(),
									h = img.height(),
									diffIndex = j - (middleIndex-1),
									diffIndexAbs = Math.abs(j - (middleIndex-1)),
									newIndex = (diffIndex % middleIndex),
									prop = getObject.cssProperty,
									coeff = 0,
									classToAdd = '',
									cssProperties = {
										'width': w,
										'height': h,
										'left' : '50%'
									};

								if (diffIndex > 0) { 
									coeff = 1;
									classToAdd = ' ' + getObject.rightSideClass.substr(1);
								}
								else if (diffIndex < 0) {
									coeff = -1;
									classToAdd = ' ' + getObject.leftSideClass.substr(1);
								}
								cssProperties[prop] = (-w*.5 + newIndex*getObject.itemOffset) + coeff*getObject.itemOffsetCenter;

								if (getObject.useCSS3Animation) {
									cssProperties['zIndex'] = (middleIndex - diffIndexAbs);
									$this
										.attr('class', getObject.transformClasses[diffIndexAbs] + classToAdd)
										.css(cssProperties);
								} else {
									$this
										.attr('class', getObject.transformClasses[diffIndexAbs] + classToAdd)
										.css({'zIndex': (middleIndex - diffIndexAbs)})
										.stop()
										.animate(cssProperties);
								}
							}
						}


а именно меня интересует вот какой момент в getObject была объявлена функция
onChange: function(element, middleIndex, length){},

далее вот она реализуется
getObject.onChange($items.eq(itemsOrder[middleIndex]), itemsOrder[middleIndex]===0 ? length : itemsOrder[middleIndex], length);

до этого функция была вызвана в другом участке кода вот так setOrder() но это понятно. Короче не пойму сам принцип зачем объявлять эту функцию в getObject и почему то не вижу смысл того что делают переменные в onChange, я просто не вижу каким образом они используются. Вот весь код.
(function($){
	$.fn.tm3DCircleCarousel = function(o){
		return this.each(function(){
			var $this = $(this),
				data =$this.data('tm3DCircleCarousel'),
				getObject = {
					container: 'body', // container of gallery
					transformClasses: '.scale100, .scale90, .scale80, .scale70, .scale60',
					clickableClasses: '.scale100',
					rightSideClass: '.rightSide', // class for right side items
					leftSideClass: '.leftSide',  // class for left side items
					cssProperty: 'marginLeft', // css property for changing (use marginTop, marginLeft, etc)
					itemOffset: 100, // offset of $items
					itemOffsetCenter: 0, // offset from center item 
					useCSS3Animation: true, // use css3 or jquery animation
					autoplay: {}, // autoplay parameters 
					reflections: {}, // reflections of images
					pagination: {}, // pagination for items
					next: '.nextButton', // next button selector
					prev: '.prevButton', // prev button selector
					onChange: function(element, middleIndex, length){}, // callback for on change images event 
					onInit: function(){}, // callback after initialization
					onUserActivate: function(){}, // callback: user do something (click or keyboard event)
					onShowActions: function(){}, // callback: gallery is activates
					onHideActions: function(){}, // callback: gallery is deactivates 
					constructor: function (params) {
						if ($this.length) {
							getObject.transformClasses = getObject.transformClasses.split(',');
							for (i=0;i<getObject.transformClasses.length;i++){
								getObject.transformClasses[i] = getObject.transformClasses[i].trim().substr(1);
							}
							getObject.clickableClasses = getObject.clickableClasses.split(',');
							for (i=0;i<getObject.clickableClasses.length;i++){
								getObject.clickableClasses[i] = getObject.clickableClasses[i].trim().substr(1);
							}						

							var $doc = $(document),
								$container = $this.parents(getObject.container),
								$items = $this.find('>li'), // items (li)
								$a = $items.find('>a'), // anchors of items
								length = $items.length, // length of $items
								itemsOrder = [], // order of $items
								middleIndex = Math.round(length *.5), // index of middle item, if $items 9, this index -- 5
								reflectionsDefaults = { // reflection defaults parameters
									enable: false,
									reflectionClass: '.reflection',
									startColor: 'rgba(0,0,0,1)',
									endColor: 'rgba(0,0,0,0.8)'
								},
								autoplayDefaults = { // autoplay defaults
									enable: false,
									timeout: 12000,
									id: 0
								},
								paginationDefaults = { // autoplay defaults
									enable: false,
									activeClass: '.active',
									paginationClass: '.pagination',
									$this: null,
									$li: null,
									$a: null
								},
								$prev = $(getObject.prev, $container[0]), // prevoius button
								$next = $(getObject.next, $container[0]), // next button
								galleryActive = false, // active status for gallery
								isFirstActionDone = false; // first user actions flag

					        init();
					    }

						function init(){
							// set length
							length = (length % 2 === 0) ? (length-1) : length;

							// hide last item, if length of $items is even
							($items.length > length) && ($items.eq(length).css('display','none'));

							// fill order items array
							for (var i=0;i<length;i++){
								itemsOrder.push(i);
							}

							// set reflections
							getObject.reflections = $.extend(reflectionsDefaults, o.reflections);
							getObject.reflections.enable&&createReflections();

							// set autoplay
							getObject.autoplay = $.extend(autoplayDefaults, o.autoplay);
							getObject.autoplay.enable&&stopAutoplay();

							// set order for items
							setOrder();

							// pagination 
							paginationInit();

							var autoplayEnable = getObject.autoplay.enable;
							// listeners
							$this
								.on({
									showGallery: function(e){
										if (!galleryActive){	
											getObject.onShowActions();	
											setListeners(galleryActive = true);
										}
									},
									hideGallery: function(e){
										if (galleryActive){	
											getObject.onHideActions();								
											getObject.autoPlayState = false;
											setListeners(galleryActive = false);
										}
									}})
								.trigger('showGallery')
								// .trigger('goto', '0')
								.on('firstAction', firstAction);

							// on keydown event, event always on 
							$doc.on('keydown', keyboardEvents);

							// check autoplay
							if (autoplayEnable) {
								getObject.autoplay.enable = true;
								startAutoplay();
							}
						}

						// on/off all listeners for plugin
						function setListeners(state){
							if (state) {
								$prev.on('click', clickPrev);
								$next.on('click', clickNext);
								$a.on('click', clickItem);
								$this.on({'go': go, 'goto': goTo});
								if ($.fn.swipe) {
									$this.swipe({
										swipeLeft:function(event, direction, distance, duration, fingerCount) {
											galleryActive&&clickNext();
										},
										swipeRight:function(event, direction, distance, duration, fingerCount) {
											galleryActive&&clickPrev();
										}
									});
								}
							} else {
								$prev.off('click', clickPrev);
								$next.off('click', clickNext);
								$a.off('click', clickItem);
								$this.off({'go': go, 'goto': goTo});
							}
						}

						function keyboardEvents(e){
							if (galleryActive) {
								switch (e.keyCode) {
									case 37: clickPrev(); break;	
									case 39: clickNext(); break;	
								}
							}
						}
Ответить с цитированием