Bessere Pull Quotes: Kein doppelter Markup

Pull Quotes sind wunderbar. Sie können wirklich die Aufmerksamkeit der Leser fesseln und sind eine großartige Gelegenheit für coole typografische Arbeit. In einem Blog sind Pull Quotes jedoch besonders schwierig zu "ziehen" (verstehen Sie?!).
Das liegt an RSS. Auf Ihrer eigenen Website können Sie ein Pullquote mit beliebiger Markup-Art erstellen. Vielleicht ein Absatz-Tag mit der Klasse „pullquote“. Aber wenn das an RSS-Reader gesendet wird, wird dieser Tag entweder entfernt oder ignoriert.

Demo ansehen

So könnte das Markup für ein traditionelles Pullquote aussehen

<p>Whether I shall turn out to be the hero of my own 
life, or whether that station will be held by anybody else, these pages 
must show. To begin my life with the beginning of my life, I record that 
I was born (as I have been informed and believe) on a Friday, at twelve 
o'clock at night. It was remarked that the clock began to strike, and I 
began to cry, simultaneously.</p>
<p class="pullquote">It was remarked that the clock began to strike, 
and I began to cry, simultaneously.</p>

Da Ihre Klasse in einem RSS-Reader keine Bedeutung hat, wird es für jemanden, der es auf diese Weise liest, so aussehen, als wäre der letzte Satz wiederholt worden. *Umständlich*.

Wir können dieses Problem lösen und unser Markup mit jQuery noch sauberer gestalten. (Oh jQuery, gibt es etwas, das du nicht kannst? Küsse.) Hier ist unser neues, saubereres Markup

<p>Whether I shall turn out to be the hero of my own 
life, or whether that station will be held by anybody else, these pages 
must show. To begin my life with the beginning of my life, I record that 
I was born (as I have been informed and believe) on a Friday, at twelve 
o'clock at night. <span class="pullquote">It was remarked that the 
clock began to strike, and I began to cry, simultaneously.</span></p>

Der Unterschied besteht darin, dass wir statt den Abschnitt zu wiederholen, der als Pullquote verwendet werden soll, diesen Abschnitt nur in ein Span mit der Klasse „pullquote“ einschließen. Dieses Span ist der Haken, mit dem wir mit jQuery arbeiten werden.

Wir müssen jQuery auf unserer Seite einbinden und dann ein einfaches JavaScript schreiben, um nach den Zitaten zu suchen

<script src="js/jquery.js"></script>
<script>
  $(function() { 
	  $('span.pullquote).each(function(index) { 
		... do something ...
	  }); 
  });
</script>

Der obige Code wartet, bis der DOM bereit ist, und durchsucht dann die gesamte Seite nach Spans mit der Klasse „pullquote“. Jetzt müssen wir die Magie hinzufügen. Zuerst finden wir das übergeordnete Element des Spans, das ist der Absatz, in dem es sich befindet, und weisen es einer Variable zu, da wir es zweimal referenzieren werden (schneller). Dann **KLONEN** wir das Span und fügen es dem selben Absatz voran. Natürlich fügen wir unsere eigene Klasse hinzu, die wir als Haken zum Stylen verwenden können.

$(function() { 
	  $('span.pullquote).each(function() { 
		var $parentParagraph = $(this).parent('p'); 
		$parentParagraph.css('position', 'relative'); 
		$(this).clone() 
		  .addClass('pulledquote) 
		  .prependTo($parentParagraph); 
	  }); 
});

Dies erreicht genau das, was wir brauchen: ein dupliziertes Element (aber nur, wenn es auf der Website selbst angezeigt wird) mit einer eindeutigen Klasse zum Stylen. Hier ist ein Beispiel-CSS für das „herausgezogene“ Zitat

.pulledquote {
	display: block;
	float: right;
	padding: 0 0 0 10px;
	margin: 0 0 10px 10px;
	width: 170px;
	font-size: 1.5em;
	line-height: 1.4em;
	text-align: right;
	color: #666;
	border-left: 3px solid #ccc;
}

In der Demo habe ich zwei separate jQuery-Snippets geschrieben. Eines zum Ziehen von Zitaten nach links und eines nach rechts. Sehen Sie sich die Quellcodes auf dieser Seite an, um diesen Code zu sehen.

 

Andere Artikel / Ressourcen

• 456 Berea Street: Automatische PullQuotes mit JavaScript und CSS
• Nerdaphernalia: WordPress-Plugin für JavaScript-Pull-Quotes
• Ganze Sektion im Buch Learning jQuery über PullQuotes
• Drupal-Modul für PullQuotes