Slider Control

Budgetrahmen

< 100 EUR

Ende der Angebotsphase

Angebotsphase abgeschlossen

Notwendige Expertise

Web & Programmierung, HTML5, Javascript

Zusätzlich
notwendige Expertise

Mootools, jQuery

Kunde

Cri***

Beschreibung

Hallo Zusammen! Ich habe eine Frage die ich selber nicht lösen kann, wüsste aber gerne wie dies zu lösen ist! Ich hoffe ihr könnt mir helfen! Auf dieser Adresse habe ich mal das hochgeladen so wie ich es bis jetzt habe! Adresse: StoutLabs - MooTools Content Slider Class v. 2.0 Wie ihr sehen könnt sind dort die Navigationspunkte 1,2,3,4,5 und einmal ein Home Button den habe ich da schoin reingesetzt weil ich gerne durch eine induviduelle <ul> <li> klassen zuweißen möchte sprich Slide 1 ist <li class="home"> weil ich eine Mootools animierte Navigation habe die ich gerne mit dieser verbinden möchte! Wie kann ich also der js Datei sagen ich möchte bei klick auf <li class="home"> den 1ten Slide? und z.b. bei <li class="about"> den 2ten slide. Das hier ist der Slider Code

Code:

var SL_Slider = new Class({

	//implements
	Implements: [Options],	
	
	//variables setup
	numNav: new Array(),		    //will store number nav elements (if used)
	timer: null,					//periodical function variable holder
	isSliding: 0,					//flag for animation/click prevention
	direction: 1,					//flag for direction (forward/reverse)
	
	//options
	options: {
	slideTimer: 8000,  			    //Time between slides (1 second = 1000), a.k.a. the interval duration
	orientation: 'horizontal',      //vertical, horizontal, or none: None will create a fading in/out transition.
	fade: false,                    //if true will fade the outgoing slide - only used if orientation is != None
	isPaused: false,				//flag for paused state
	transitionTime: 1100, 		    //Transition time (1 second = 1000)
	transitionType: 'cubic:out',	//Transition type
	container: null,				//container element
	items:  null, 					//Array of elements for sliding
	itemNum: 0,						//Current item number
	numNavActive: false,			//Whether or not the number navigation will be used
	numNavHolder: true,			    //Element that holds the number navigation
	playBtn: null,					//Play (and pause) button element
	prevBtn: null,					//Previous button element
	nextBtn: null					//Next button element
	},

	//initialization
	initialize: function(options) {
		var self = this;
		
		//set options
		this.setOptions(options);
		
		//remove any scrollbar(s) on the container
		self.options.container.setStyle('overflow', "hidden");  
		
		//if there is a play/pause button, set up functionality for it
		if(self.options.playBtn != null) {
			//self.pauseIt();  
			self.options.playBtn.set('text', 'pause');
			
			self.options.playBtn.addEvents({
				'click': function() {
					self.pauseIt();
				},				
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
					
				}
			});
		}
		
		//if there is a prev & next button, set up functionality for them
		if(self.options.prevBtn && self.options.nextBtn){
			
			self.options.prevBtn.addEvents({ 
				'click' : function() {
					if(self.isSliding == 0){
						if(self.options.isPaused == false){
							$clear(self.timer);
							self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
						}
						self.direction = 0;
						self.slideIt();
					}
				},
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
				
				}
			});	
			
			this.options.nextBtn.addEvents({ 
				'click' : function() {
					if(self.isSliding == 0){
						if(self.options.isPaused == false){
							$clear(self.timer);
							self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
						}
						self.direction = 1;
						self.slideIt();
					}
				},
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				},
				'mouseleave' : function() {
					
				}
			});	
		}
		
		//setup items (a.k.a. slides) from list
		self.options.items.each(function(el, i){
			  
			//f.y.i.  el = the element, i = the index
			el.setStyle('position', "absolute");
			var itemH = el.getSize().y;
			var itemW = el.getSize().x;
			if(self.options.orientation == 'vertical'){ 
                el.setStyle('top', (-1 * itemH));
                el.setStyle('left', 0);
            }else if(self.options.orientation == 'none') {
                el.setStyle('left', 0);
                el.setStyle('top', 0);
                el.set('opacity', 0);
			}else{
                el.setStyle('left', (-1 * itemW));
            }
			// -- Number nav setup
			if(self.options.numNavActive == true){
				//create numbered navigation boxes, and insert into the 'num_nav' ul)
				var numItem = new Element('li', {id: 'num'+i});
				var numLink = new Element('a', {
					'class': 'numbtn',
					'html': (i+1)
				});
				numItem.adopt(numLink);
				self.options.numNavHolder.adopt(numItem);
				self.numNav.push(numLink);
				numLink.set('morph', {duration: 100, transition: Fx.Transitions.linear, link: 'ignore'});
				
				numLink.addEvents({
					'click' : function(){
						self.numPress(i);
					},
					'mouseenter' : function() {
						this.setStyle('cursor', 'pointer');
					}
				});
				
				//set initial number to active state
				if(i == self.options.itemNum){
					var initNum = self.numNav[i];
					initNum.addClass('active');
				}
			}
			//end if num nav 'active'
		
		 });
	
	},

	//startup method
	start: function() {
		
		var self = this;
		
		self.slideIt(self.options.itemNum);  //initialize first slide
		
		if(self.options.isPaused == false){
			self.timer = self.slideIt.periodical(self.options.slideTimer, self, null);
			if(self.options.playBtn) self.options.playBtn.set('text', 'pause');
		}
		else{
			//self.pauseIt();
			if(self.options.playBtn) self.options.playBtn.set('text', 'play');
		}
		
	},
	
	
	slideIt: function(passedID) {
		
		var self = this;
		
		//get item to slide out
		var curItem = self.options.items[self.options.itemNum]; 
		if(self.options.numNavActive == true){
			var curNumItem =  self.numNav[self.options.itemNum];
		}
		
		//check for passedID presence
		if(passedID != null) {
			if(self.options.itemNum != passedID){
				if(self.options.itemNum > passedID) { 
					self.direction = 0; 
				} else { 
					self.direction = 1;
				}
				self.options.itemNum = passedID;
			}
		}
		else{
			self.changeIndex();	
		}
		
		
		//now get item to slide in using new index
		var newItem = self.options.items[self.options.itemNum];
		if(self.direction == 0){
			var curX = self.options.container.getSize().x;
			var newX = (-1 * newItem.getSize().x);
            var curY = self.options.container.getSize().y;
            var newY = (-1 * newItem.getSize().y);
		}
		else{
			var curX = (-1 * self.options.container.getSize().x);	
			var newX = newItem.getSize().x;
            var curY = (-1 * self.options.container.getSize().y);
            var newY = newItem.getSize().y;
		}
		
		
		//add/remove active number's highlight
		if(self.options.numNavActive == true){
			var newNumItem =  self.numNav[self.options.itemNum];
			newNumItem.addClass('active');
		}
		
		
		//set up our animation stylings
		var item_in = new Fx.Morph(newItem, {
		     duration: self.options.transitionTime, 
		     transition: self.options.transitionType,
		     link: 'ignore',
		     
		     onStart: function(){
				self.isSliding = 1;  //prevents extra clicks
			},
		     
		     onComplete: function(){
				self.isSliding = 0;  //prevents extra clicks
			}
		     
		});
		
		
		
        if(self.options.orientation == 'vertical'){
            if(self.options.fade == true){item_in.start({'opacity':[0,1],'top' : [newY, 0]});}
            else{item_in.start({'top' : [newY, 0]});}
        }else if(self.options.orientation == 'none') {
            item_in.start({'opacity':[0,1]});
        }else{
            if(self.options.fade == true){item_in.start({'opacity':[0,1],'left' : [newX, 0]});}
            else{item_in.start({'left' : [newX, 0]});}
        }
        
		
		if(curItem != newItem){
			var item_out = new Fx.Morph(curItem, {
				     duration: self.options.transitionTime, 
				     transition: self.options.transitionType,
				     link: 'ignore'
			});
			
			if(self.options.numNavActive == true){
				curNumItem.removeClass('active');
			}
			
            if(self.options.orientation == 'vertical'){
                if(self.options.fade == true){item_out.start({'opacity':[0],'top' : [(curY)]});}
                else{item_out.start({'top' : [(curY)]});}
            }else if(self.options.orientation == 'none') {
                item_out.start({'opacity':[1,0]});
            }else{
                if(self.options.fade == true){item_out.start({'opacity':[0],'left' : [(curX)]});}
                else{item_out.start({'left' : [(curX)]});}
            }
		}
	},
	
	
	//--------------------------------------------------------------------------------------------------------
	//supplementary functions  (mini-functions)
	//--------------------------------------------------------------------------------------------------------
	pauseIt: function () {
		
		var self = this;
		
		//only move if not currently moving
		if(self.isSliding == 0){
			if(self.options.isPaused == false){
				self.options.isPaused = true;
				$clear(self.timer);
				self.options.playBtn.set('text', 'play');				
			}
			else{
				self.options.isPaused = false;
				self.slideIt();
				self.timer = self.slideIt.periodical(self.options.slideTimer, this, null); 
				self.options.playBtn.set('text', 'pause');
			}
			
		} //end if not sliding
		
	},
	
	changeIndex: function() {
		var self = this; 
		
		var numItems = self.options.items.length;  //get number of slider items
		
		//change index based on value of 'direction' parameter
		if(self.direction == 1){
			if(self.options.itemNum < (numItems - 1)){
				self.options.itemNum++; 
			}
			else{
				self.options.itemNum = 0;
			}
		}
		else if(self.direction == 0){
			if(self.options.itemNum > 0){
				self.options.itemNum--; 
			}
			else{
				self.options.itemNum = (numItems - 1);
			}
		}	
		
	},
	
	numPress: function (theIndex) {
		var self = this;
		
		if((self.isSliding == 0) && (self.options.itemNum != theIndex)){
			if(self.options.isPaused == false){
				$clear(self.timer);
				self.timer = self.slideIt.periodical(self.options.slideTimer, this, null);
			}
			self.slideIt(theIndex);
		}
	}
	//------------------------  end supp. functions -----------------------------------------//

});


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////// I N I T/////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function initMainResize(){
	window.addEvent('resize', onResize);
}


function onResize(){
	updateMainNavPosition(posNav);
}

Das hier der html code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StoutLabs - MooTools Content Slider Class v. 2.0</title>

<link href="css/slider.css" rel="stylesheet" type="text/css"  media="screen"/>

<script type="text/javascript" src="js/moo_12.js"></script>
<script type="text/javascript" src="js/sl_slider.js"></script>
  <script type="text/javascript" src="bg_resize.js"></script>
<script type="text/javascript">
	
	window.addEvent('domready', function() {
		
		//slider variables for making things easier below
		var itemsHolder = $('container');
		var myItems = $$(itemsHolder.getElements('.item'));
		
		//controls for slider
		var theControls = $('controls1');
		var numNavHolder = $(theControls.getElement('ul'));
		var thePlayBtn = $(theControls.getElement('.play_btn'));
		var thePrevBtn = $(theControls.getElement('.prev_btn'));
		var theNextBtn = $(theControls.getElement('.next_btn'));
		
		
		//create instance of the slider, and start it up		
		var mySlider = new SL_Slider({
			slideTimer: 6000,
			orientation: 'horizontal',      //vertical, horizontal, or none: None will create a fading in/out transition.
			fade: false,                    //if true will fade the outgoing slide - only used if orientation is != None
			isPaused: true,
			container: itemsHolder,
			items: myItems,
			numNavActive: true,
			numNavHolder: numNavHolder,
			playBtn: thePlayBtn,
			prevBtn: thePrevBtn,
			nextBtn: theNextBtn
		});
		mySlider.start();
		
		
		//adding a little animated rollover highlight to the play and prev/next buttons
		var origBkgdColor = thePlayBtn.getStyle('background-color');
		var newBkgdColor = "#80301D";
		var btnArray = new Array(thePlayBtn, thePrevBtn, theNextBtn);
		
		btnArray.each(function(e, i){
			e.set('tween', {duration: 350, transition: 'cubic:out', link: 'cancel'});
			e.addEvents({ 
				'mouseenter' : function() {
					this.tween('background-color', newBkgdColor);
				},
				'mouseleave' : function() {
					this.tween('background-color', origBkgdColor);
				}
			});
		});
					 
	});
	
</script>

</head>

<body>

<div id="wrapper">
	
	<h1>StoutLabs - Mootools Content (div) Slider Class v 2.0</h1>
	
	<p class="linkback"><a href="http://stoutlabs.com/blog/view/updated_mootools_content_slider_class_v2/">&lt; Go back to related blog post</a></p>
	
	
	
	
	<h2>Horizontal Slide - With Fade</h2>
	
	<div id="container">
		
		<div class="item">
			 <div id="bgdiv"><img id="bgimg" src="flash_bg.jpg" /></div>
		</div>
		
		<div class="item">
			<h3>Item 2 Title</h3>
			<p>Fusce aliquam blandit elit. Suspendisse lectus massa, ultricies sed, hendrerit in, tempor non, nunc.</p>
		</div>
		
		<div class="item">
			<h3>Item 3 Title</h3>
			<p>Aenean neque. Mauris elementum sem vel nisi. Quisque est turpis, gravida non, porta id, varius nec, pede. Mauris tincidunt nisl a nulla 
			condimentum commodo. Phasellus sem. Aenean enim dolor, facilisis quis, viverra ac, molestie sit amet, lectus. In porttitor laoreet massa.</p>
			<p>Proin arcu dolor, ullamcorper tristique, placerat nec, scelerisque placerat, massa. Ut enim purus.</p>
		</div>
		
		<div class="item">
			<h3>Item 4 Title</h3>
			<p>This is item four&rsquo;s text. Item text here.  Lorem ipsum dolor.</p>
			<p><img src="http://xhtmlforum.de/images/fpo_img.jpg" alt="tester image" /></p>
		</div>
		
		<div class="item">
			<h3>Item 5 Title</h3>
			<p>Annnd item 5&rsquo;s text is here. Item text here.  Lorem ipsum dolor.</p>
		</div>
		
	</div><!-- end container div -->
	
	<div id="controls1">
		<div class="prev_btn">&lt; prev</div>
		<div class="next_btn">next &gt;</div>
		<div class="num_nav">
        <ul></ul></div>
	</div>
	
	
	<div id="versions">
		<h3>Example Versions: </h3>
		<a href="index.htm" class="activenav">horizontal, with all options</a> | <a href="vert.htm">vertical, with prev / next only</a> | <a href="fade.htm">fade only, with no controls</a>
	</div>
	
</div>
<!-- end wrapper div -->


</body>
</html>

und so möchte ich gerne eigene <li> klassen drin haben und in der .js datei sagen welcher wozu passen soll!

Code:

<ul id="nav">
    
		<li class="HOME"><a href="#">HOME</a>
        	<audio id="beep-two" preload="auto">
            <source src="audio/clack.mp3"></source>
			<source src="audio/clack.m4a"></source>
			<source src="audio/clack.ogg"></source>
			</audio>
        </li>
        
        <li class="separator"></li>
        
		<li class="ABOUT"><a href="#">ABOUT</a>
         	<audio id="beep-two" preload="auto">
            <source src="audio/clack.mp3"></source>
			<source src="audio/clack.m4a" controls></source>
			<source src="audio/clack.ogg" controls></source>
			</audio>
        
        </li></ul>

Könntet ihr mir helfen und mir vllt zeigen wie man die .js Datei umbauen muss damit ich die einzelnen <li>'s jedem einzelnen Slide zuweisen kann? Ich bedanke misch schonmal für die Antworten udn für das lesen! Gruß, Crixon

Mehr Projektdetails

Projekttyp Festpreis

Vertraulichkeit Meine Projektausschreibung soll für alle Besucher von twago und in Suchmaschinen (z.B. Google) sichtbar sein.

Implementation -

Ausschreibungsdetails Die Angebote sollen lediglich für mich sichtbar sein.

Alle Fragen und Antworten 3 Personen folgen dem Projekt

Sie haben Fragen zum Projekt? Stellen Sie hier Ihre Fragen. Der Kunde antwortet hier ebenfalls, um allen die gleichen Informationen zu geben. Bitte geben Sie hier keine Kontaktdaten an. Inhalte, bei denen es nicht um Projektdetails geht, werden gelöscht. Sie möchten den Kunden direkt anschreiben? Bitte geben Sie zuerst Ihr Angebot ab. Ihr Angebot ist unverbindlich und jederzeit aktualisierbar. Anschließend können Sie mit dem Kunden persönlich kommunizieren.

Vor ca. einer Minute

Vor {0} Minute

Vor {0} Minuten

Vor {0} Stunde

Vor {0} Stunden

Vor {0} Tag

Vor {0} Tagen

Vor {0} Woche

Vor {0} Wochen

Vor {0} Monat

Vor {0} Monaten

Vor {0} Jahr