Difference between revisions of "Template:Main2021"

@@ Line 2,282: / Line 2,282: @@
 		}
+		//if there is a gallery/carousels on the page
+		if(  $('.gallery').length > 0){
+			//first, get total number of gallerys on the page
+			var total_gallerys = $('.gallery').length;
+			//create an array to store them
+			var gallery_ids = [];
+			//setup
+			var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>";
+			let slide_counter=0;
+			//next get their unique ids and setup navigation controls
+			for( x=0; x< total_gallerys; x++ ){
+				//setup: add navigation buttons
+				$('.gallery:eq('+x+') > .content').prepend(navigation);
+				//setup: count number of slides to add controls buttons
+				slide_counter = $('.gallery:eq('+x+') > .content > .slide').length;
+				for( y=0; y< slide_counter; y++){
+					$('.gallery:eq('+x+') > .controls').append("<div class='button'>"+(y+1)+"</div>");
+				}
+				//add current to first slide and first button
+				$('.gallery:eq('+x+') > .content > .slide:eq(0)').addClass('current');
+				$('.gallery:eq('+x+') > .controls > .button:eq(0)').addClass('current');
+				//only add the carousels for autorotation
+				gallery_ids[x] =  $('.gallery.carousel:eq('+x+')').attr('id');
+			}
+			//activate gallery controls and rotation function
+			gallery_slides(gallery_ids);
+		}
+		////////////////////////////////////////////////////////////
+		//GALLERIES + CAROUSELS
+		function gallery_slides(gallery_ids){
+			var clicked_gallery='';
+			//if a navigation button is clicked
+			$('.gallery > .content> .navigation').click(function(){
+				//get which gallery was clicked
+				clicked_gallery = $(this).parent().parent().attr('id');
+				//make clicked element have a temp class
+				$(this).addClass('temp');
+				clicking_gallerys(clicked_gallery,gallery_ids, 'navigation');
+			});
+			//if a button is clicked
+			$('.gallery > .controls> .button').click(function(){
+				//get which gallery was clicked
+				clicked_gallery = $(this).parent().parent().attr('id');
+				//make clicked element have a temp class
+				$(this).addClass('temp');
+				clicking_gallerys(clicked_gallery,gallery_ids, 'button');
+			});
+			//automatic rotation
+			//variable to hold the class specifications for slides + buttons
+			var slide='';
+			var button=''
+			//for each gallery in the page
+			//change images every 3.5 seconds
+			window.setInterval(function(){
+				for( y=0; y < gallery_ids.length; y++ ){
+				//specific ids > classes
+				slide = '#'+gallery_ids[y]+'> .content > .slide';
+				button = '#'+gallery_ids[y]+'> .controls> .button';
+				//check if there is another sibling next
+				if( $(slide+'.current').next().length > 0  ){
+					$(slide+'.current').next().addClass('temp');
+					$(button+'.current').next().addClass('temp');
+				}
+				//if not, setup for next round to start at the beginning of the gallery
+				else{
+					$(slide).first().addClass('temp');
+					$(button).first().addClass('temp');
+				}
+				//for current slide, remove current status so its not displayed anymore
+				$(slide+'.current').removeClass('current');
+				$(button+'.current').removeClass('current');
+				//for next slide, add current status so it can be seen now
+				$(slide+'.temp').removeClass('temp').addClass('current');
+				$(button+'.temp').removeClass('temp').addClass('current');
+				}
+			}, 3500);
+		}
+		function clicking_gallerys(clicked_id, gallery_ids, type_of_click){
+			//store the current number
+			var c_number='';
+			//for a button clicked, it will base it off temp
+			if(type_of_click == 'button'){
+				$('#'+clicked_id+'> .controls > .button').html(function (i) {
+        			if($(this).hasClass('temp') ){
+						c_number= i;
+					}
+    			});
+			}
+			//for a navigation button, it will get current button and add or subtract to it
+			if(type_of_click == 'navigation'){
+				$('#'+clicked_id+'> .content > .slide').html(function (u) {
+        			if($(this).hasClass('current') ){
+						c_number= u;
+        			}
+				});
+				//is it previous or next?
+				if( $('#'+clicked_id+'> .content> .navigation.temp').hasClass('next')){
+					c_number++;
+					//if it surpases the number of siblings, return to 0
+					if(c_number >= ($('#'+clicked_id+'> .content > .slide').length) ){
+						c_number =0;
+					}
+				}
+				if( $('#'+clicked_id+'> .content> .navigation.temp').hasClass('prev')){
+					c_number--;
+				}
+			}
+			//remove and append
+			//clean temps
+			$('#'+clicked_id+'> .controls > .button.temp').removeClass('temp');
+			$('#'+clicked_id+'> .content> .navigation.temp').removeClass('temp');
+			//remove previous selection
+			$('#'+clicked_id+'> .controls >.button.current').removeClass('current');
+			$('#'+clicked_id+'> .content >  .slide.current').removeClass('current');
+			//add current selection
+			$('#'+clicked_id+'> .content > .slide:eq('+c_number+')').addClass('current');
+			$('#'+clicked_id+'> .controls > .button:eq('+c_number+')').addClass('current');
+			//remove that id from rotation
+			var index = gallery_ids.indexOf(clicked_id);
+			if (index > -1) {
+				gallery_ids.splice(index, 1);
+			}
+			return gallery_ids;
+		}
 		//function for image sliders