5202

ein Blog über technische Fragen zu Blogger

Blogger: Responsive Slider/Fader für die Sidebar

von

Ein Leser hat sich einen simplen Fader/Slider für die Blogger-Sidebar gewünscht - so etwas in der Art von meinem (experimentellen) CSS3-Fader mit der Pseudoklasse :checked. Nur soll es ohne knietiefes waten durch HTML/CSS funktionieren. Und weder Loop noch Autostart baben - also anders als bei vielen jQuery-Slider. Und gut aussehen ...

Experimentell
Okay, ich habe es ja schon öfters erwähnt, vieles über was ich hier schreibe hat keinen unmittelbaren 'praktischen' Wert. Ich betriebe hier zum Teil experimentelle CSS und Überlegungen, die vielleicht irgendwann einmal in freier Wildbahn eingesetzt werden können, jetzt aber noch nicht. Das scheitert hauptsächlich an der Browser Unterstützung durch den Internet Explorer. Und das wird auch noch die nächsten Jahre so sein. Aber ich kann natürlich auch mal über was 'praktisches' schreiben, also etwas was jetzt, hier und heute tatsächlich funktioniert.
jQuery
Was 'praktisches' läuft im Webdesign meistens über Javascript Frameworks wie jQuery. Ich bin nicht unbedingt ein jQuery-Mann. Ich meine, ich kann es verstehen und schreiben, aber für mich ist jQuery immer 'Fleißarbeit' - das soll nicht abwertend klingen. Im Gegenteil, guter jQuery-Code besitzt seine eigene Schönheit. Trotzdem verwende ich's nicht gerne, weiß auch nicht warum. Ein 'praktischer' Fader/Slider kommt um jQuery nicht rum. Das jetzt alles selber zu schreiben, wäre a bisserl a overkill gewesen, also habe ich die 'Engine' vom Flexslider genommen und drum herum einen simplen Fader/Slider gebaut.

Demo A) Slider















Demo B) Fader














Tutorial

Wer hier schon länger mitliest - das kommt irgendwie bekannt vor, oder? Es schaut aus wie etwas, was ich genau so schon mal gebaut habe - es steckt aber ein völlig andere Technik dahinter. Ich beschreibe es Schritt für Schritt, wie ihr das in die Sidebar einbauen könnt.

1. Schritt: Vorbereitung

Am Anfang jeder Layout-Änderung im Layout sollte immer eine Sicherung des bisherigen Layouts stehen. Probiert alles folgen außerdem zuerst in einem Testblog aus, nicht in eurem Haupt-Blog. Benützt das erst wenn ihr sicher seid, das es so funktioniert, wie ihr es wollt.
jQuery
Damit das funktioniert, müsst ihr zuerst das jQuery-Framework in euren Blog einbauen. Dazu sucht ihr in eurem HTML-Code den </head> Tag. Beachtet bitte die _genaue_ Schreibweise.
Direkt _über_ dem Tag setzt ihr das Script für das Framework ein:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript">
</script>
Code
Für den Fader/Slider braucht ihr außerdem noch einen jQuery-Code. Diesen Code könnt ihr testweise von meiner Dropbox nehmen. Ich kann euch aber nicht garantieren, das er euch immer zur Verfügung steht. Dazu später noch etwas.
<script src='http://dl.dropbox.com/u/12178319/javascripts/SidebarSlider.js'/>
Der Code kommt _unter_ das Framework und _über_ den </head> Tag.

A) Slider

Framework und Code waren nur die Vorbereitung, kommen wir jetzt zum Slider. Als erstes das Markup:
Markup
Die Bilder werden ganz normal als <img> Tag in eine Liste geschrieben. Ihr könnt dort beliebig viele Bilder reinschreiben.
<div class="flex-container">
 <div class="flexslider">
  <ul class="slides">
   <li>
   <img src="http://goo.gl/MAzdU" />
   </li>
   <li>
   <img src="http://goo.gl/SuSCz" />
   </li>
   <li>
   <img src="http://goo.gl/zfcd8" />
   </li>
   <li>
   <img src="http://goo.gl/bsYCV" />
   </li>
   <li>
   <img src="http://goo.gl/dSwXF" />
   </li>
   <li>
   <img src="http://goo.gl/ch8ag" />
   </li>
  </ul>
 </div>
</div>
Das Markup kommt in ein HTML/Java Gadget und das Gadget kommt in die Sidebar/Footer whatever.
CSS
Das ist die vollständige CSS - die kommt im Vorlagen Designer in die Box 'Eigene CSS einfügen'.
/* Resets */
.flex-container a:active,
.flexslider a:active { outline: none }
.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.widget .flexslider  li { padding: 0 }
.widget .flexslider  ul { padding: 0 }
.main-inner .widget .post-body .flexslider ul { list-style: none }
.post-body .flexslider img { padding: 0 }
/* Styles*/
.flexslider {
    width: 100%;
    margin: 0;
    padding: 0;
}
    .flexslider .slides > li { display: none }
.flexslider .slides img {
    max-width: 100%;
    display: block;
}
.flex-pauseplay span { text-transform: capitalize }
/* Clearfix */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .slides { display: block }
* html .slides { height: 1% }
.no-js .slides > li:first-child { display: block }

/* Default Theme */
.flexslider {
    background: #000;
    border: 4px solid black;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    zoom: 1;
}
    .flexslider .slides { zoom: 1 }
        .flexslider .slides > li { position: relative }
.flex-container {
    zoom: 1;
    position: relative;
}
/* Caption style */
/* IE rgba() hack */
.flex-caption {
    background: none;
}
.flex-caption {
    width: 96%;
    padding: 2%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    font-size: 14px;
    line-height: 18px;
}
/* Direction Nav */
.flex-direction-nav { display: none }

/* Control Nav */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -30px;
    text-align: center;
}
    .flex-control-nav li {
        margin: 0 0 0 5px;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }
    .flex-control-nav li:first-child { margin: 0 }
    .flex-control-nav li a {
        width: 13px;
        height: 13px;
        display: block;
        background: black no-repeat 0 0;
        cursor: pointer;
        text-indent: -9999px;
    }
    .flex-control-nav li a:hover { background-position: 0 -13px }
    .flex-control-nav li a.active {
        background-position: 0 -26px;
        cursor: default;
    }
Starter
Ihr könnt euch das ganze jetzt mal in eurem Beispiel-Blog anschauen und ihr werdet sehen - das ihr nichts seht. Damit das funktioniert, muss das Script zuerst noch gestartet werden.
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "slide",
          controlsContainer: ".flex-container"
    });
  });
</script>

Das Script kommt in ein weiteres HTML/Java Gadget und das kommt ... egal wo ... in eurem Blog, am besten ist es aber möglichst tief. Das verbessert die Ladegeschwindigkeit.
Fertig
Das war's, der Slider sollte jetzt in eurer Sidebar funktionieren. Die CSS ist in Prozent geschrieben, d.h. der Slider passt sich automatisch der Größe eurer Sidebar an, ihr müsst nichts weiter dazu tun. Es ist sinnvoll - anders als ich - immer gleich hohe Bilder zu nehmen, dadurch 'springt' in der Animation nichts.

B) Fader

Wollt ihr statt eines Faders einen Slider, könnt ihr alles genau so lassen wie im Fall des Sliders, nur der Starter wird anders formuliert.
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
Das war alles. Im Grunde sehr simpel - auch wen's jetzt nach viel Code ausschaut.

Anmerkung

Die 'Engine' ist - wie gesagt - größtenteils vom Flexslider genommen. Der funktioniert aber auf Blogger nicht 'out of the box', sondern Ihr müsst den jQuery-Code und die CSS anpassen. Die CSS bekommt ihr hier von der Seite. Wenn ihr das Plugin wirklich einsetzen wollt, empfehle ich euch dringend, das Javascript selber zu hosten. Das Script bekommt ihr über diesen Link. Ihr kopiert das in einen Editor (_nicht_ in Word o.ä.) und speichert das egalwelchedateiname.js ab. Das .js am Ende von der Datei ist wichtig, das sagt Blogger, das es sich dabei um Javascript handelt. Der einzige freie Hoster, wo Javascript wirklich ausgeliefert wird, ist Dropbox. Packt dort das Script in den Ordner 'Public'(=Öffentlich), das ist ein Standardordner von Dropbox. Der 'öffentliche' Link zu diesem Ordner ist die src='..' für euren Script-Code. Wenn euch das zu kompliziert ist, oder ihr das einfach nur mal kurz ausprobieren wollt, könnt ihr auch meine Quelldatei einbinden:
<script src='http://dl.dropbox.com/u/12178319/javascripts/SidebarSlider.js'/>

Fragen, Wünsche, Anregungen?

Dieser Fader/Slider lässt sich fast beliebig an eure persönlichen Wünsche und Vorstellungen anpassen. Das ist aber so ein umfangreiches Thema mit so vielen Möglichkeiten, dass ich darüber jetzt nichts schreibe, sondern warte, ob und was da kommt. Wenn ihr Vorstellung so à la "kann das Ding auch mit Autostart loopen?" habt - kein Problem. Ihr wollt mehr als einen Slider in der Sidebar unterbringen? Kein Problem. Der Slider soll euch Kaffee an's Bett bringen. Noop - das geht leider nicht :=). Soll heißen, nicht alles ist machbar, es gibt auch Grenzen.

Falls irgendetwas nicht funktioniert oder nicht so funktioniert wie es soll, fragt _hier_ nach. Niemand wird euch bei diesem Plugin im Blogger-Hilfe-Forum oder sonst wo weiter helfen. Ich schreibe das deswegen, weil ich das alles schon erlebt habe.