Gehaxelts Blog

Da ich gestern ein Screenshot meiner App gepostet hatte, aber dieser die ganze Seite ausfüllt, habe mich nach einem Lightbox-Plugin umgeschaut, und bin auf Fancybox gestoßen, und habe es mir nun eingerichtet.

Wie das klappt, möchte ich hier beschreiben.

Ich hatte die Anleitung von AppX gefunden, auf dem er beschreibt, wie man die Fancybox einrichtet, doch ich musste eine Änderungen daran vornehmen und etwas erweitern.

Zunächst sollte man sich ein neues Verzeichnis im Home anlegen:

mkdir ~/fancybox

Dorthin lädt man sich dann die aktuelle FancyBox Version von Github und expackt diese:

cd ~fancybox
wget https://github.com/fancyapps/fancyBox/zipball/master
unzip master

Danach können wir die Sachen aus fancybox/source/ in die entsprechenden Verzeichnisse kopieren:

• jpg & png nach ~/octopress/source/images/fancybox/ (Ordner muss angelegt werden)

• jquery.fancybox.css nach ~/octopress/source/javascripts/

• jquery.fancybox.js nach ~/octopress/source/stylesheets/

Danach müsst das jquery in den Header einbinden, das klappt, indem ihr folgenden Quelltext in die /custom/header.html einfügt:

nano ~/octopress/source/_includes/custom/header.html

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/blog/stylesheets/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/blog/javascripts/jquery.fancybox.pack.js?v=2.0.6"></script>
<!-- Add fancyBox jQuery -->
<script type="text/javascript">
  jQuery.noConflict();    // prevents conflicts with Ender.js, use jQuery instead of $
  jQuery(document).ready(function() {
      jQuery(".fancybox").fancybox();
  });
</script>
<!-- End fancyBox insert -->

Wenn ihr den Style noch ändern wollt, dann könnt ihr das so machen, wie es auf dem Blog von AppX beschrieben wird.

Ansonsten hört dann die Erläuterung von AppX hier auf, und es wird zwar die FancyBox geladen, aber den Bildern fehlt noch der korrete Aufbau, damit die FancyBox korrekt funktioniert.

Ich habe dazu dann noch ein kleines Plugin geschrieben.

FancyBox Octopress Plugin

Es ist zwar vlt nicht das beste Plugin, da ich kein Ruby coden kann - ich habe es mir nur aus den anderen Plugins hergeleitet, was nicht schwierig war - aber es funktioniert.

Zunächst brauchen wir noch zwei weiteren Ordner:

mkdir ~/octopress/source/images/fancybox
mkdir ~/octopress/source/images/fancybox/small

Und dann das folgende Plugin als fancybox.rb in dem Pluginordner ~/octopress/plugins abspeichern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

module Jekyll
  class Fancybox < Liquid::Tag

    def initialize(name, args, tokens)
      super
      @url = args
    end

    def render(context)
      %(<a href="../images/posts/#{@url}" class="fancybox" ><img src="../images/posts/small/#{@url}" /></a>)
  end
  end
end

Liquid::Template.register_tag('fancybox', Jekyll::Fancybox)

Danach könnt ihr mit dem folgenden Befehl, in euren Beiträgen Bilder als fancybox nutzen:

{ % fancybox Dateiname % }

Die Bilder dazu müsst ihr noch etwas nachbearbeiten.

Ihr ladet die großen Bilder in das folgende Verzeichnis:

~/octopress/source/images/fancybox/

Danach braucht ihr noch folgenden Shellscript, welches ihr vor dem rake generate ausführen müsst:

1
2
3
4
5
6
7
8
9
10
11
12
13

#!/bin/bash
# Shrink pictures for fancybox on octopress
# Modified from http://prineblog.wordpress.com/2007/09/19/alle-bilder-in-einem-verzeichnis-verkleinern/
# www.gehaxelt.in

cd ~/octopress/source/images/posts/
        for i in *
        do
                if [ ! -f "small/$i" ]
                then
                        convert $i -geometry 25% "small/$i"
                fi
        done

Das verkleinert alle Bilder auf 25% Größe, und legt diese im

~/octopress/source/images/fancybox/small

ab.

Danach sollte eure Fancybox laufen, und die Bilder werden per JQuery hervorgehoben und anzeigt, anstatt auf das Ziel weiterzuleiten.

Gruß

gehaxelt