zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jquery serial scroll

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.02.2009, 23:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Frage jquery serial scroll

hei,

das erste beispiel auf dieser seite möchte ich gerne erweitern:

beispiel
jQuery.SerialScroll

quelle:
Plugins | jQuery Plugins

der vorteil dieses scripts ist, dass einzelne sektionen ausgewählt werden können, die vor- und zurückfunktion davon jedoch unabhängig ausgeführt werden kann.

nun möchte ich allerdings die sektion verändern:
index, 1-10, 11-20, 21-30 usf. insgesamt sollen vom index bis 21-30 also 31 einzelne seiten auswähl sein.

leider verstehe ich nicht, wie das skript funktioniert, um es nach meinen wünschen zu verändern. wie werden konkret sektion zwei und vier übersprungen, wählt man eins, drei oder fünf?

kennt sich wohl jemand im detail mit diesem skript aus und könnte mir helfen? vielen dank!

Geändert von zeitgeisth (25.02.2009 um 23:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2009, 01:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

es dürfte auch jedes andere slider script sein, das eine navigation bietet, mit der man einen bestimmten seitenbereich aus einer anzahl von seiten wählt sowie mit einer vor- und zurückfunktion: also z.b. 40 seiten können angewählt werden (sliden), über die navigation wählt man direkt die 1., 10., 20., 30., 40. seite; die seiten dazwischen über vor und zurück.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.02.2009, 13:16
Benutzerbild von vistahr
vistahr{style:none;}
neuer user
 
Registriert seit: 23.10.2006
Ort: Hannover
Beiträge: 68
vistahr befindet sich auf einem aufstrebenden Ast
Standard

Welche Version von jQuery nutzt du?

Was hast du bisher erstellt?

Hast du hier schonmal reingeschaut?
http://demos.flesler.com/jquery/serialScroll/js/init.js
__________________
Stolpern fördert
Mit Zitat antworten
  #4 (permalink)  
Alt 26.02.2009, 14:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

bisher habe ich nur die demo versucht zu verstehen.

generell möchte ich wissen, ob es möglich ist, einen bestimmten bereich einer slide-show über die navi anzusteuern. ja?

diese variante taugt auch:
Scroll your HTML with jquery scrollable
Mit Zitat antworten
  #5 (permalink)  
Alt 26.02.2009, 21:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

ich wüßte, wie man es umsetzen könnte, jedoch nicht, wie man den code schreibt.
jedes div des sliders erhält eine id. via navigation kann dann der entsprechende div (mit inhalt) über die div aufgerufen werden.
wer könnte mir helfen, einen passenden code zu entwickeln?
Mit Zitat antworten
  #6 (permalink)  
Alt 27.02.2009, 01:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

die beispielseite habe ich auf den slider reduziert:

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=ISO-8859-1">
	<meta name="keywords" content="javascript, jquery, plugins, scroll, navigation, slideshow, news, ticker, sections, sequential, prev, next, series, scrollTo, smooth, to, animation, overflow, element, window, effect, ariel, flesler">
	<meta name="description" content="Demo of jQuery.SerialScroll. A jQuery plugin to quickly animate series of items, made by Ariel Flesler.">
	<meta name="robots" content="all">
	<meta name="author" content="Ariel Flesler, aflesler(at)gmail(dot)com">
	<meta name="copyright" content="(c) 2007-2008 Ariel Flesler">
	<title>jQuery.SerialScroll</title>
	<link rel="shortcut icon" href="http://jquery.com/favicon.ico" type="image/x-icon">
	<link href="jQuery.SerialScroll_files/base.css" type="text/css" rel="stylesheet">
	<link href="jQuery.SerialScroll_files/style.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="jQuery.SerialScroll_files/jquery_002.js"></script>
	<script type="text/javascript" src="jQuery.SerialScroll_files/jquery.js"></script>
	<script type="text/javascript" src="jQuery.SerialScroll_files/jquery_003.js"></script>
	<script type="text/javascript" src="jQuery.SerialScroll_files/init.js"></script>
	
	<!-- Timestamp: 1228960121 -->
</head><body>
	
	
		<div id="screen">
		<img class="prev" src="jQuery.SerialScroll_files/prev.gif" alt="prev" width="42" height="53">
				<div id="navigation">
			<ul>
				<li><a href="#">Index</a></li>
				<li><a href="#">1-10</a></li>
				<li><a href="#">11-20</a></li>
				<li><a href="#">21-30</a></li>
				<li><a href="#">31-40</a></li>
			</ul>
		</div>

		<div id="sections">
			<ul>
				<li><h2>Index</h2><p></p><p></p></li>

				<li><h2>1-10</h2><p></p><p></p></li>
				 
				<li><h2>11-20</h2><p></p><p></p></li>		

				<li><h2>21-30</h2><p></p><p></p></li>
				
				<li><h2>31-40</h2><p></p><p></p></li>
				
				
			</ul>

		</div>
		<img class="next" src="img/next.gif" alt="next" width="42" height="53">
	</div>

</body></html>
in der init.js sollen die menüpunkte mit den items korrespondieren:

Code:
// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){
	/**
	 * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
	 */
	
	/**
	 * The plugin binds 6 events to the container to allow external manipulation.
	 * prev, next, goto, start, stop and notify
	 * You use them like this: $(your_container).trigger('next'), $(your_container).trigger('goto', [5]) (0-based index).
	 * If for some odd reason, the element already has any of these events bound, trigger it with the namespace.
	 */		
	
	/**
	 * IMPORTANT: this call to the plugin specifies ALL the settings (plus some of jQuery.ScrollTo)
	 * This is done so you can see them. You DON'T need to specify the commented ones.
	 * A 'target' is specified, that means that #screen is the context for target, prev, next and navigation.
	 */
	$('#screen').serialScroll({
		target:'#sections',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'img.next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		navigation:'#navigation li a',
		duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		
		//queue:false,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		//stop:false,// Each click will stop any previous animations of the target. (false by default)
		//lock:true, // Ignore events if already animating (true by default)		
		//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )		
		//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
		//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
		//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
		//interval:1000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
		
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
		}
	});
	
	/**
	 * No need to have only one element in view, you can use it for slideshows or similar.
	 * In this case, clicking the images, scrolls to them.
	 * No target in this case, so the selectors are absolute.
	 */
	
	$('#slideshow').serialScroll({
		items:'li',
		prev:'#screen2 a.prev',
		next:'#screen2 a.next',
		offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:1, //as we are centering it, start at the 2nd
		duration:1200,
		force:true,
		stop:true,
		lock:false,
		cycle:false, //don't pull back once you reach the end
		easing:'easeOutQuart', //use this easing equation for a funny effect
		jump: true //click on the images to scroll to them
	});
	
	/**
	 * The call below, is just to show that you are not restricted to prev/next buttons
	 * In this case, the plugin will react to a custom event on the container
	 * You can trigger the event from the outside.
	 */
	
	var $news = $('#news-ticker');//we'll re use it a lot, so better save it to a var.
	$news.serialScroll({
		items:'div',
		duration:2000,
		force:true,
		axis:'y',
		easing:'linear',
		lazy:true,// NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
		interval:1, // yeah! I now added auto-scrolling
		step:2 // scroll 2 news each time
	});	
	
	/**
	 * The following you don't need to see, is just for the "Add 2 Items" and "Shuffle"" buttons
	 * These exemplify the use of the option 'lazy'.
	 */
	$('#add-news').click(function(){
		var 
			$items = $news.find('div'),
			num = $items.length + 1;
			
		$items.slice(-2).clone().find('h4').each(function(i){
			$(this).text( 'News ' + (num + i) );
		}).end().appendTo($news);
	});
	$('#shuffle-news').click(function(){//don't shuffle the first, don't wanna deal with css
		var shuffled = $news.find('div').get().slice(1).sort(function(){
			return Math.round(Math.random())-0.5;//just a random number between -0.5 and 0.5
		});
		$(shuffled).appendTo($news);//add them all reordered
	});
});
nur funktioniert es nicht. namen der menüeinträge korrespondieren nicht mit den h2 überschriften.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Liste wird trotz float:left im li nicht horizontal img CSS 27 23.08.2013 13:43
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 21:41
jquery scroll to mxxxx Javascript & Ajax 5 15.04.2010 22:37
Darstellungsfehler - FF & IE7 vs. IE6 mk-gfx CSS 2 29.10.2008 10:58
"Frame" mit CSS Schockwelle CSS 11 07.05.2007 11:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:01 Uhr.