some more improvements

headline changer
tabs use number if you want or no panel-title is given
tabs are better positioned .. real size not first * count

Author: Austin Strange

Diff for: css/app.css

@@ -2,3 +2,8 @@
 
 
 h1.site_title { font-family: 'Righteous', cursive; font-weight: normal; font-size: 42px; color: #666; text-shadow: 1px 1px 1px #000;}
+
+
+#da_slider_head { padding: 10px 0; background: #333; color: #666; text-align: center; margin: 0 40px 20px; text-shadow: 1px 1px 1px #000;}
+
+.samplecode { margin: 10px 0; padding: 20px 50px; display:block; background: #fff;}

Diff for: index.html

@@ -22,8 +22,16 @@
 	<script type="text/javascript">
 			$().ready(function() {
 				$('#magic-slider-1').magicSlider();
-				$('#magic-slider-2').magicSlider({ autoHeight: true, carousel: true, slideDirection: "vertical" });
-				$('#magic-slider-3').magicSlider({ autoHeight: false, carousel: false, slideDirection: "vertical" });
+				
+				$('#magic-slider-2').magicSlider({ 
+													autoHeight: true, 
+													carousel: true, 
+													slideDirection: "vertical",
+													changeSliderHeadline: true,
+													sliderHeadlineSelector: "#da_slider_head"
+													
+				});
+				$('#magic-slider-3').magicSlider({ autoHeight: false, dynamicTabsPosition: "count", slideDirection: "vertical" });
 				$('#magic-slider-4').magicSlider({ autoHeight: false, carousel: true, slideDirection: "horizontal" });
 			});
 	</script>
@@ -40,73 +48,84 @@ <h1 class="site_title">magic-slider</h1>
 	<hr/>
 	<p>
 		<strong>default</strong> Settings &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-		<a class="xtrig" href="#1" rel="magic-slider-1">external Link 1</a> &nbsp;|&nbsp; 
-		<a class="xtrig" href="#3" rel="magic-slider-1">external Link 3</a>
+		<a class="xtrig" href="#2" rel="magic-slider-1">external Link [2]</a> &nbsp;|&nbsp; 
+		<a class="xtrig" href="#3" rel="magic-slider-1">external Link [3]</a>
 	</p>
 
 
 	<div class="magic-slider-wrapper">
 		<div class="magic-slider preload" id="magic-slider-1">
 			<div class="panel">
 				<div class="panel-wrapper">
-					<h2 class="title">Panel 1</h2>
+					<h2 class="title hidden">magic-slider</h2>
+					<p>jQuery-Content-Slider based on Coda-Slider and moutardeSlider.</p>
+					<p><strong>improvements:</strong></p>
+					<ul>
+						<li><strong>vertical sliding</strong> ... wanna go up and down? .. magic-slider goes vertical or horizontal with or without autoHeight, your choice</li>
+						<li><strong>carousel-mode</strong> (invinite-sliding) ... no scroll-back to beginning if you don't want</li>
+						<li><strong>headline changer</strong> (for external Titles) ... need an outside Title for youre Slider, here you are! .. ( panelTitle needed! )</li>
+						<li><strong>numbered tabs</strong> ... use just numbers or panel-title for the tabs</li>
+						<li><strong>no panel-title needed</strong> ... if no panel-title is provided, panel-count is used for tabs</li>
+					</ul>
 					<p>
-						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
-						Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
-						pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
-						vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+						magic-slider chould be fully compatible with coda-slider .. just include the js, change 'coda' to 'magic' in your 
+						HTML and CSS. Now everything chould work like before and you are ready to include the new features!
 					</p>
 				</div>
 			</div>
 			<div class="panel">
 				<div class="panel-wrapper">
-					<h2 class="title">Panel 2</h2>
-					<p>
-						Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, 
-						es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales 
-						Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu 
-						ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, 
-						die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude 
-						nach sich zieht?
-					</p>
+					<h2 class="title hidden">code-sample</h2>
+					<code class="samplecode">
+						$().ready(function() {<br/>
+						&nbsp;&nbsp;&nbsp;$('#magic-slider-2').magicSlider({<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoHeight: true, <br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;carousel: true, <br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slideDirection: "vertical", <br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeSliderHeadline: true, <br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sliderHeadlineSelector: "#da_slider_head" <br/>
+						&nbsp;&nbsp;&nbsp;}); <br/>
+						});
+					</code>
+					<p>This is the code for the slider below.</p>
 				</div>
 			</div>
 			<div class="panel">
 				<div class="panel-wrapper">
-					<h2 class="title">Panel 3</h2>
+					<h2 class="title hidden">html-sample</h2>
+					<code class="samplecode">
+						&lt;div class="magic-slider-wrapper"&gt;<br/>
+						&nbsp;&nbsp;&lt;div class="magic-slider" id="magic-slider-1"&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="panel"&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="panel-wrapper"&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class="title hidden"&gt;Panel 1&lt;/h2&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Your-Content.&lt;/p&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
+						&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br/>
+						&nbsp;&nbsp;&lt;/div&gt;<br/>
+						&lt;/div&gt;<br/>
+					</code>
 					<p>
-						Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. 
-						Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. 
-						Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. 
-						Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. 
-						Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches 
-						Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, 
-						hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, 
-						wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.
-					</p>
-				</div>
-			</div>
-			<div class="panel">
-				<div class="panel-wrapper">
-					<h2 class="title">Panel 4</h2>
-					<p>
-						Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht 
-						nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke 
-						erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein 
-						paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, 
-						mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller 
-						zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.
+						Sample with 1 Panel and hidden Panel-Titel .. this title isn't needed, but usefull if you want 
+						tab-links with text are change the slider-headline like below.
 					</p>
 				</div>
 			</div>
+			
 		</div>	<!-- end of:  magic-slider  -->
 	</div>		<!-- end of:  magic-slider-wrapper  -->
 
 
 
 
 	<hr/>
-	<p>autoHeight: <strong>true</strong>, carousel: <strong>true</strong>, slideDirection: <strong>"vertical"</strong></p>
+	<p>
+		autoHeight: <strong>true</strong>, carousel: <strong>true</strong>, slideDirection: <strong>"vertical"</strong>, changeSliderHeadline: <strong>true</strong>
+		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+		<a class="xtrig" href="#2" rel="magic-slider-2">external Link [2]</a> &nbsp;|&nbsp; 
+		<a class="xtrig" href="#3" rel="magic-slider-2">external Link [3]</a>
+	</p>
+	<h2 id="da_slider_head">I should be changed be js!</h2>
 
 	<div class="magic-slider-wrapper">
 		<div class="magic-slider preload" id="magic-slider-2">
@@ -170,10 +189,10 @@ <h2 class="title">Panel 4</h2>
 
 	<hr/>
 	<p>
-		autoHeight: <strong>false</strong>, carousel: <strong>false</strong>, slideDirection: <strong>"vertical"</strong>
+		autoHeight: <strong>false</strong>, dynamicTabsPosition: <strong>count</strong>, slideDirection: <strong>"vertical"</strong>
 		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-		<a class="xtrig" href="#1" rel="magic-slider-3">external Link 1</a> &nbsp;|&nbsp; 
-		<a class="xtrig" href="#3" rel="magic-slider-3">external Link 3</a>
+		<a class="xtrig" href="#2" rel="magic-slider-3">external Link [2]</a> &nbsp;|&nbsp; 
+		<a class="xtrig" href="#3" rel="magic-slider-3">external Link [3]</a>
 	</p>
 
 	<div class="magic-slider-wrapper">

Diff for: js/magic-slider.js

@@ -30,13 +30,16 @@ $.fn.magicSlider = function(settings) {
 		dynamicTabs: true,
 		dynamicTabsAlign: "center",
 		dynamicTabsPosition: "top",
+		dynamicTabsPosition: "title",		// "title" / "count"
 		externalTriggerSelector: "a.xtrig",
 		firstPanelToLoad: 1,
 		panelTitleSelector: "h2.title",
 		slideEaseDuration: 1000,
 		slideEaseFunction: "swing",
 		slideDirection: "horizontal", // "horizontal" / "vertical"
-		carousel: false
+		carousel: false,
+		changeSliderHeadline: false,
+		sliderHeadlineSelector: "#magic_slider_head" 		// Selector for headline
 	}, settings);
 
 	return this.each(function(){
@@ -57,18 +60,39 @@ $.fn.magicSlider = function(settings) {
 				last = false; 		// Used in carousel mode
 				clon = ''; 			// Used in carousel mode => 'first' / 'last'
 
+
+		// If Headlineanimation wanted
+		if ( settings.changeSliderHeadline == true ){ var panelHeadlines = new Array(); };
+
+
 		// Special vars depend on Slider-Type
 		if (settings.slideDirection == "horizontal"){
 			var panelContainerWidth = (settings.carousel) ? panelWidth*( panelCount+1 ) : panelWidth*panelCount
 			slider.css('height', 'auto');
 			slider.find('.panel').css('height', 'auto');
+			if ( settings.changeSliderHeadline == true ){
+				slider.find(".panel").each(function(index) {
+					if ( $(this).find(settings.panelTitleSelector).length > 0 ){
+						panelHeadlines[index] = $(this).find(settings.panelTitleSelector).html(); 
+					} else {
+						panelHeadlines[index] = index;
+					};
+				});
+			};
 		} else {
 			var panelHeight = slider.find(".panel").height();
 			var panelContainerWidth = panelWidth;
 			var panelContaineroffset = new Array();
 			var panelsHeights = new Array();
 			var daHeight = 0;
 			slider.find(".panel").each(function(index) {
+				if ( settings.changeSliderHeadline == true ){
+					if ( $(this).find(settings.panelTitleSelector).length > 0 ){
+						panelHeadlines[ index ] = $(this).find(settings.panelTitleSelector).html(); 
+					} else {
+						panelHeadlines[ index ] = index;
+					};
+				};
 				panelContaineroffset[ index ] =  daHeight;
 				daHeight = daHeight + $(this).height();
 				panelsHeights[ index ] = $(this).height();
@@ -166,19 +190,22 @@ $.fn.magicSlider = function(settings) {
 					break;
 			};
 			ul = $('#magic-nav-' + sliderCount + ' ul');
+			var dynamicListWidth = 0;
+			
 			// Create the nav items
 			$('.panel', slider).each(function(n) {
-				if ( $(this).find(settings.panelTitleSelector).length > 0 ) {
+				if ( $(this).find(settings.panelTitleSelector).length > 0 && settings.dynamicTabsPosition == "title" ) {
 					ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');
 				} else {
 					ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + (n+1) + '</a></li>');
-				}
+				};
+				dynamicListWidth = dynamicListWidth + ul.find( 'li.tab' + (n+1) ).width() + 2;
 			});
 			navContainerWidth = slider.width() + slider.siblings('.magic-nav-left').width() + slider.siblings('.magic-nav-right').width();
 			ul.parent().css({ width: navContainerWidth });
 			switch (settings.dynamicTabsAlign) {
 				case "center":
-					ul.css({ width: ($("li", ul).width() + 2) * panelCount });
+					ul.css({ width: dynamicListWidth });
 					break;
 				case "right":
 					ul.css({ float: 'right' });
@@ -294,6 +321,9 @@ $.fn.magicSlider = function(settings) {
 			} else {
 				doThePanelMove(targetPanelIndex);
 			};
+			if ( settings.changeSliderHeadline == true ){
+				$(settings.sliderHeadlineSelector).html( panelHeadlines[ targetPanelIndex - 1 ] );
+			};
 			slider.find('div.panel-container div.panel').removeClass('current');
 			slider.find('div.panel-container div.panel:eq('+ (targetPanelIndex - 1) + ')').addClass('current');
 		};