Einen schicken, automatisch abspielenden Featured Content Slider erstellen

Ich liebe das Coda Slider Plugin für jQuery. Ich habe es kürzlich verwendet, um ein paar tabbed „Widgets“ zu erstellen. Eines hier auf CSS-Tricks in der Seitenleiste, um Script & Style Links, Featured Posts und Popular Posts anzuzeigen. Eine unterhaltsame Art, viele Inhalte auf kleinem Raum zu präsentieren. Ich habe es auch in einem Artikel für NETTUTS für einen ähnlichen Zweck verwendet.

Beide dieser Beispiele verwenden den Coda Slider praktisch „out of the box“. Sicher, das Design wurde stark verändert, um den Anforderungen gerecht zu werden, aber die eigentliche Funktionalität wurde in keiner Weise verändert. Kürzlich hatte ich die Aufgabe, einen „Featured Content Bereich“ zu erstellen. Der Coda Slider passte fast perfekt, benötigte aber eine kleine funktionale Operation, um das zu tun, was ich wollte. Besonderer Dank geht an Benjamin Sterling, der mir geholfen und einige knifflige Probleme für mich gelöst hat.

Demo anzeigen   Dateien herunterladen

Funktionscheckliste

Wie gesagt, der Coda Slider war schon zu 90% fertig. Es gibt einen Hauptinhaltsbereich (im Grunde *Panels*), die von links nach rechts gleiten und jeweils unterschiedliche, einzigartige Inhalte aufweisen. Es gibt normalerweise eine feste Anzahl von Panels, aber der Code ist so geschrieben, dass das Hinzufügen oder Entfernen von Panels keine große Sache ist. Es gibt Links, die als Navigation dienen, um schnell zu einem bestimmten Panel zu springen. Diese Links können alles sein (Text-Hyperlink, Thumbnail usw.) und zu einer eindeutigen Hash-Wert-URL verlinken (jedes Panel hat bei Bedarf eine eindeutige URL). Coda Slider bietet all dies out of the box.

Hier ist, was wir zusätzlich brauchen

• Unterschiedliche Arten von benutzerdefinierten Inhalten in den Panels. Wir können bereits alles hineinlegen, was wir wollen, aber um es uns einfacher zu machen, werden ein paar verschiedene Formate fertig sein. Das wichtigste ist ein Bild in der Größe des gesamten Panels, das jedoch eine Textüberlagerung aufweist. FERTIG.
• Auto-Play. Sie können immer noch auf die Thumbnails klicken, um zu einem beliebigen Panel zu springen, aber wenn er sich selbst überlassen wird, durchläuft der Slider langsam die Panels. HINZUGEFÜGT, SIEHE UNTEN.
• Pfeilindikator. Als visueller Hinweis darauf, welches Panel Sie gerade betrachten, wird ein kleiner Pfeil über dem Thumbnail angezeigt, der in das Panel zeigt. HINZUGEFÜGT.

Lassen Sie uns die HTML-, CSS- und JavaScript-Dateien durchgehen.

Das HTML

Hier ist das HTML-Framework für den Slider selbst

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">

			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>		
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
					<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
			
					<h1>How to Cook a Scotch Egg</h1>
			
					<ul>
						<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
						<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
						<li>1/2 cup AP flour</li>
						<li>1-2 eggs, beaten</li>
						<li>3/4 cup panko-style bread crumbs</li>
						<li>Vegetable oil for frying</li>
					</ul>
				</div>
			</div>
			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 6">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>

		</div>
	</div>

	<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->

	<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
	<div id="movers-row">
		<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
	</div>

</div>

Das CSS

Das vollständige CSS für dieses Beispiel enthält einen grundlegenden Reset, einige Utility-Stile und eine grundlegende Struktur. Unten zeige ich Ihnen nur das für den Slider selbst relevante CSS, aber Sie können das vollständige CSS hier einsehen.

.slider-wrap						{ width: 419px; position: absolute; top: 87px; left: 40px; }			
.stripViewer .panelContainer 
.panel ul						{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer						{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 						{ border: 1px solid black; margin-right: 5px; }
#movers-row						{ margin: -43px 0 0 62px; }
#movers-row div					{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data					{ background: url(images/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 					{ font-size: 13px; }
.cross-link						{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 						{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Alles darin, das mit „.strip“ beginnt, ist Kernbestandteil des Sliders selbst, der die Panels einrichtet und den Wrapper darum herum, all die CSS-Magie, die benötigt wird, damit ein Slider funktioniert. Von „.nav-thumb“ abwärts sind Dinge, die spezifisch für dieses Beispiel sind. Die Thumbnails haben dünne schwarze Ränder. Der Metadatenbereich wird vom Bild vom Panel weggedrückt, dann aber mit einem negativen oberen Rand und einem transparenten schwarzen Hintergrund wieder nach oben geschoben.

Die Klasse „.active-thumb“ ist ebenfalls sehr wichtig; wenn ein Thumbnail diese Klasse hat, erhält es den speziellen Hintergrund, der der weiße Pfeil ist, mit dem wir das aktuelle Panel anzeigen wollten. Diese Klasse wird im JavaScript angewendet und entfernt.

Das JavaScript

Im Header-Bereich Ihres HTML müssen Sie jQuery und alle Plugin-Dateien einbinden. Die absoluten Grundlagen sehen so aus

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
	
<script type="text/javascript">
	$(function(){
			
		$("#main-photo-slider").codaSlider();

	});
</script>

Dadurch wird der Slider aktiviert, aber denken Sie daran, dass wir noch zusätzliche Funktionalität zu implementieren haben. Anstatt das Plugin selbst zu ändern, können wir die Extras hinzufügen, indem wir unsere eigene kleine Funktion darüber schreiben. Im Wesentlichen werden wir, um den „Auto-Play“-Effekt zu erzielen, alle 3 Sekunden ein Klickereignis auf dem nächsten Thumbnail auslösen. Wir nennen die Funktion „theInterval“ und benötigen ein paar Variablen, die wir zuerst einrichten.

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
	clearInterval(theInt);
	
	if( typeof cur != 'undefined' )
		curclicked = cur;
	
	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
	
	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 6 == curclicked )
			curclicked = 0;
		
	}, 3000);
};

Wir sind aber noch nicht fertig. Wir müssen unsere Funktion aufrufen, zum einen. Aber wir müssen auch ein manuelles Klickereignis auf einem unserer Thumbnails ordnungsgemäß behandeln. Wir möchten, dass ein manuelles Klickereignis dieselbe Funktion verwendet, damit das „aktuelle“ Thumbnail ordnungsgemäß zurückgesetzt werden kann und wir keine seltsamen Sprünge sehen. Direkt nach unserer Funktion können wir nun diesen abschließenden Code hinzufügen, der ausgeführt wird, wenn der DOM bereit ist.

$(function(){
	
	$("#main-photo-slider").codaSlider();
	
	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");
	
	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});
	
	theInterval();
});

Ein paar weitere Dinge sind zu beachten. Beachten Sie, dass die Zahl „6“ in unserer Funktion fest codiert ist. Wenn Sie die Anzahl der Daumen ändern, müssen Sie diese auch hier ändern. Möglicherweise haben Sie auch das scheinbar seltsame Element bemerkt, auf das das Klickereignis ausgelöst wird („.stripNav ul li a“ – wo ist das?!). Sie werden feststellen, dass dies nirgends in unserem HTML vorkommt. Tatsächlich generiert das Coda Slider Plugin automatisch diese ungeordnete Liste aus der Anzahl der Panels, wenn es ausgeführt wird. Sehr praktisch manchmal, wir haben es in unserem Beispiel im CSS versteckt. Wir verwenden sie jedoch in unserer Funktion, da sie die zuverlässigsten Elemente für das Klickereignis sein werden. Sie werden auf jeden Fall existieren, und dieses Beispiel wird weiterhin funktionieren und automatisch abspielen, unabhängig davon, ob wir die Thumbnail-Navigation verwenden oder nicht.

Demo anzeigen   Dateien herunterladen

UPDATE: Auto-Play

Danke an Jack Reichert

var $j = jQuery.noConflict();

var theInt = null;
var curclicked = 0;
var stop = 0;

theInterval = function(cur){
       clearInterval(theInt);

       theInt = setInterval(function(){
               $j(".coda-nav-right a").eq(curclicked).trigger('click');
               curclicked++;
               if( 10 == curclicked )
                       curclicked = 0;
               $j("#stop").click(
                       function(){
                               if (stop==0){
                               clearInterval(theInt);
                               stop=1;}
                       });
       }, 750);
       $j("#stop").click(
               function(){
                       stop=0;
                       theInterval();
               }
       );
};
$j(function(){
       $j("#main-photo-slider").prepend('<div id="stop">Start/Stop</div>');
       $j("#main-photo-slider").codaSlider();
       theInterval();
});