5202

ein Blog über technische Fragen zu Blogger

Ein Bilder-Slider in 30s erstellen

von

Dies ist die zweite - völlig überarbeitete - Version von einem Post, in dem es darum geht, wie ihr schnell & simpel einen Bilder-Slider in euren Blogger Blog bringt. Die erste Version war mit dem Bootstrap-Slider und der hat sich irgendwie als zu komplex erwiesen.

Probieren wir es jetzt mit dem Nivo Slider™. Selbiger ist für Wordpress ein kostenpflichtiges Plugin, die jQuery Version für Blogger steht dagegen unter der MIT-Lizenz und ist Open-Source. Vorteil Blogger :D!

Ich habe eine Demo mit vier Galerien und jeweils unterschiedlichen Skins gebaut - default, dark, light und bar:

CDN

Der Vorteil vom Nivo Slider™ ist, das er quasi 'Standard' ist und das die dafür notwendigen Scripts und CSS von jsdelivr zur Verfügung gestellt werden, d.h. ihr spart euch das hosten.

jsdelivr ist ein Content Delivery Network (CDN) für Open Source und seriös. Ihr könnt die CDN solange kostenlos nutzen, solange die Jungs Sponsoren haben. Falls 'alles kostenlos' wieder erwarten doch kein nachhaltiges Geschäftsmodell ist, wird's den Dienst irgendwann nicht mehr geben und ihr müsst die Scripts halt auf Dropbox, Drive oder eurem eigenen Webspace verlegen. Mit CDN ist es auf jeden Fall einfacher, also machen wir es zuerst einmal damit.

HTML

Heads up!

Probiert das zuerst in einem Test-Blog aus! Macht eine Sicherung eures Blogs, bevor ihr das in eurem Haupt-Blog übernehmt!

Fangen wir mit der HTML vom Slider an. Der Aufbau ist äußerst simpel und schaut grundsätzlich so aus:

<div class="slider-wrapper theme-default">
   <div id="slider" class="nivoSlider">
      <img src="images/slide1.jpg" alt="" />
      <img src="images/slide2.jpg" alt="" />
      <img src="images/slide3.jpg" alt="" />
      <img src="images/slide4.jpg" alt="" />
   </div>
</div>

Ihr habt dabei die Wahl zwischen den Themen theme-default, theme-dark, theme-light und theme-bar. Auf meiner Demoseite seht ihr die einzelnen Skins, sucht euch eines davon aus.

Ersetzt die Platzhalter-Links images/slide1.jpg durch eure eigenen Bilder. Bei unterschiedlich großen Bildern springt der Slider beim Bildwechsel auf & ab. Ihr könnt das verhindern, wenn ihr für den Slider alle Bilder vorher auf gleiche Größe bringt.

Anschließend packt ihr alles in ein HTML/Javascript Gadget und platziert das Gadget direkt unter den Header. Ihr seit mit der HTML fertig!

Scripts

Für die Scripte und CSS sucht ihr diesen schließenden Tag ziemlich weit unten in eurem Layout:

</body>

Direkt _darüber_ fügt ihr das gesamte Packet ein:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

<script src='//cdn.jsdelivr.net/nivoslider/3.2/jquery.nivo.slider.js'/>
<script src='//cdn.jsdelivr.net/nivoslider/3.2/jquery.nivo.slider.pack.js'/>

<link href='//cdn.jsdelivr.net/nivoslider/3.2/nivo-slider.css' rel='stylesheet'/>

<link href='//cdn.jsdelivr.net/nivoslider/3.2/themes/bar/bar.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/nivoslider/3.2/themes/dark/dark.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/nivoslider/3.2/themes/default/default.css' rel='stylesheet'/>
<link href='//cdn.jsdelivr.net/nivoslider/3.2/themes/light/light.css' rel='stylesheet'/>

Ihr habt in dem Packet vier Links zu den vier Themen - Beispiel:

<link href='//cdn.jsdelivr.net/nivoslider/3.2/themes/bar/bar.css' rel='stylesheet'/>
die ihr, falls ihr das jeweilige Thema nicht verwendet, auch weglassen könntet ... wenn nicht, spielt das aber auch keine Rolle, die Ladezeit könnt ihr vernachlässigen.

Starter-Script

Im letzten Schritt müsst ihr den Slider noch starten - dazu schreibt ihr ein kleines Script und platziert es direkt _unter_ dem Packet [aber _über_ dem </body> Tag!]. In diesem Script bestimmt ihr die verschiedenen Parameter von dem Slider. Ein solches Starter-Script schaut Beispielsweise so aus:

<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:400,
        pauseTime:3000,
        startSlide:0,
        directionNav:true,
        controlNav:true,
        controlNavThumbs:false,
        pauseOnHover:true,
        manualAdvance:false
   });
});
//]]>
</script>

Was die einzelnen Parameter bedeutet, könnt ihr in der Dokumentation nachschlagen. Ihr könnt in den Slider so gut wie jedes Verhalte verändern, probiert einfach a bisserl rum!

Fragen, Probleme?

Ziel von mir war, ein super-super-super einfaches Tut zu schreiben, mit dem wirklich jeder so einen Slider in seinen Blog bekommt und der auch in allen Layouts funktioniert - wenn es trotzdem nicht klappt, fragt nach! Wenn ihr kein G+ Account habt, könnt ihr auch über die Kontaktseite gehen. Gut lässt sich auch via Blogspot DACH diskutieren.