5202

ein Blog über technische Fragen zu Blogger

Archiv-Slider via JSON-Feed I

von
Ich habe mich am Wochenende - nach längerer Zeit - neu mit dem Thema 'Slider' beschäftigt. Mein Ziel war einen universalen Content-Slider für die Blogger-Sidebar zu bauen - leider hat sich rausgestellt, dass alle mir bekannten Slider die ein oder andere Macke haben. Hoch.- und Querformat sauber miteinander zu mischen, ist Beispielsweise irgendwie noch nirgendwo richtig gelöst worden :=).

Archiv
Bei meinen Versuchen ist mir aber ein interessante Idee gekommen - wie wär's, den 'zusammengefassten' Inhalt eines Blogs in einem solchen Slider darzustellen? Ich habe dabei an die Überschrift und das erste Bild eines Artikels gedacht - also dass man beides in einen Slider einbaut und das dann als 'Archiv' benützt. Gesagt getan und das Ergebnis dieser Überlegung seht ihr hier:

Beispiel: Archiv-Slider


Loading...


(Anmerkung: Da ich relativ wenige Bilder in meinem Blog habe und das ganze erst mit Bildern richtig eindrucksvoll wird, habe ich nicht meinen eigenen Feed genommen, sondern den von einem Bekannten, nämlich von Thomas Reule von thor78.com. Logischerweise führen die Links in dem Slider auf seinen Blog. Aber das ganze funktioniert natürlich auch mit dem eigenem Blog.)

Wie funktioniert's?

Das ganze ist relativ kompliziert und meines Wissens noch nie in Blogger gebaut worden - ich versuch die verschiedene Schritten zu erklären:
JSON-Feed
Im ersten Schritt lese ich den JSON-Feed aus und 'ziehe' aus dem Feed die Überschrift und das Vorschau-Bild. Es wäre aber noch andere Angaben möglich, etwa "Autor", "Datum", "Kommentare" whatever - ich habe das ganze aber so einfach wie möglich gehalten, um das Beispiel dahinter zu demonstrieren.
jQuery
Das Vorschau-Bild ist relativ klein, nämlich 72px im Quadrat. Das schaut nicht besonders toll aus, um das größer zu bekommen, benütze ich im zweite Schritt die bekannte Methode zum manipulieren von Bildern. Das wird mit jQuery gemacht. Ich bekomme damit eine Liste von Posts, die ich abschließend in einen Content-Slider gepackt habe. Da ich (noch) keinen eigenen Slider habe, benütze ich einen gängigen Slider, nämlich den bxslider

Das Script

Ich gebe euch das vollständige Script, so wie ich es verwendet habe:
<style>
#listemup{
display: block !important;
width: 420px;
float:left
}
#listemup li {
list-style: none;
width: 420px;
}
#listemup li img {
padding: 0 50px;
margin: 0 auto;
}
#listemup h2 {
text-align: center;
width: 300px;
}
</style>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>

<div id='listemup'>Loading...</div>
<script type="text/javascript">
function listemall(json){
 var listhis='<ul>';
 for(var i=0; i<json.feed.entry.length; i++){
  var posttitle=json.feed.entry[i].title.$t;
  var thumburl=json.feed.entry[i].media$thumbnail.url;
  var content=json.feed.entry[i].content.$t;
  for(var k = 0; k < json.feed.entry[i].link.length; k++){
   if (json.feed.entry[i].link[k].rel == 'alternate') {
    var postlink = json.feed.entry[i].link[k].href;
   }
  }
  listhis+='<li><a href="'+postlink+'"target="5202"><h2>'+posttitle+'</h2><img src="'+thumburl+'"align="left"/></a></li>';} listhis ='</ul>';
document.getElementById('listemup').innerHTML=listhis;
}
$(document).ready(function(){
 var dimension = 200;
  $("#listemup ul").attr('id', 'slider1');
  $('#slider1').bxSlider();
  $('#listemup').find('img').each(function(n, image){
  var image = $(image);
  var height = image.attr('height');
  var width = image.attr('width');
  var newHeight = height/width * dimension;
  image.attr('width',dimension).attr('height',newHeight);
  image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s'  +   dimension )});
 });
 });

</script>
<script src="http://www.eureAdresse.blogspot.com/feeds/posts/default?max-results=20&alt=json&callback=listemall"></script>
Anmerkung
Der Blogger Editor stellt neuerdings Steuerzeichen in den Pre-Code, wenn ihr das ausprobieren wollt, verwendet bitte das verlinkten Dokument. Damit funktioniert es sicher.

Anwendung

Es ist wichtig zu verstehen, dass ich hier kein 'fertiges' Plugin vorstelle, sondern eher der Beginn von einem langen Weg. Die Anwendung ist die erste Umsetzung einer Idee, mit allen Fehler und Probleme, die ich noch nicht gefunden habe ...
jQuery
Falls ihr das ausprobieren wollt, müsst ihr das jQuery-Plugin einbauen - wie das geht, habe ich ja schon öfters beschrieben
JSON-Feed
Ich habe in der Feed-URL die Stelle rot markiert, wo ihr eure Blog-Adresse eintragen müsst. Ihr könntet damit aber auch von einem anderen Blog den Feed auslesen und in euren Blog einbauen, ich hab's ja in meinem Beispiel auch so gemacht.
Anpassen
Die Bildgröße wird im Wert der Variablen dimension:200 angegeben - "200" bedeutet in dem Fall eine Größe von 200px im Quadrat. In der CSS stehen weitere Größen, je nachdem braucht ihr die, um den Slider in einer Sidebar o.ä. einzupassen. Das ist gegebenenfalls ein ziemliches Gefummel, dass möchte ich in einer weiteren Fassung viel einfacher gestalten ...

Kommentare

Falls ihr diesen Slider ausprobieren wollt und es irgendwo hängt, scheut euch nicht, nachzufragen. Soweit mein Können und meine Zeit reicht, gebe ich gerne Hilfe. Ihr könnt aber noch a bisserl warten, bis der Slider 'benutzerfreundlicher' ist - das ist auf jeden Fall ein Ziel von mir.