David P let me know that some loco teams are interested in using Ubuntu’s installer slideshow on their websites. It could serve as a quick tour of Ubuntu in their language. Lots of people do lots of work to localise this stuff, so using that work in other places sounds fun. I would like to quickly show how to do that with the slideshow. Mostly this is using jQuery and the jQuery.Cycle plugin, so if you just want to make a cool presentation from scratch, that is the place to look.
So, let’s make this simple by using the released package that is shipped in Ubuntu. If you want to make changes or update the localization, let me know and I can write about that (though I hope the Readme in lp:ubiquity-slideshow-ubuntu does the trick).
You can install the installer slideshow for your version of Ubuntu. It is ubiquity-slideshow-ubuntu in the repositories. (Or -kubuntu if you are using Kubuntu, etc). The binary and source packages are also available at the usual place on Launchpad. The actual content we are interested in installs to /usr/share/ubiquity-slideshow. It is all regular HTML, so pretty easy to play with. First, copy the slides folder to somewhere in your home folder; we will work with that now.
Obligatory copyright notice: the slideshow is licensed Creative Commons Attribution-ShareAlike 3. A file with more details installs to /usr/share/doc/ubiquity-slideshow-ubuntu/copyright.
Now, open the slides folder. This may look overwhelming at first, but we will fix that. There are a whole bunch of folders named like loc.zh_TW and each one contains a version of the slideshow’s text for a specific locale (where everything after loc. is the locale code). In addition, each slide in the slideshow is its own file like photos.html and the slideshow itself is glued together by index.html, which has a list of all the slides in order. The slideshow can be told to run with a specific locale, where it loads the slides from that locale’s folder instead of the usual place.
You probably only need one locale, so let’s just deal with that now: open the folder for your locale. (If you don’t know your locale code, this table might help). Now move the contents to the slides folder, replacing the existing English slides. Now delete all the locale folders. (It’s quick to do that in Nautilus: press ctrl+s, enter loc.* for the pattern and hit OK, then delete the selection as usual). We don’t need directory.js, either, so delete that.
python -m SimpleHTTPServer…now, if you go to http://localhost:8000 in your web browser, the slideshow should appear.
Okay, great! Now what?
Let’s fix this up to make it look good on your website. First, open index.html in a text editor.
If your locale is a right-to-left language, add class=”rtl” to the <body> tag. This turns on the right-to-left rules in general.css.
About halfway down, you will see a list of items like
Of course, linking someone to index.html as we have it now is a little boring. I encourage you to copy and paste the #slideshow element and stick it in another web page. It could make a nice decoration. As long as your page loads the slideshow’s css stylesheet, jquery, jquery.cycle and slideshow.js as in the <head> section, it will work out fine. (Though you may need to make some slight changes to general.css so it doesn’t interfere with the rest of your page. The likely offenders are at the top and there is a rule at line 202, affecting all IMG tags, that you may want to remove).
I should point out that this is (and always will be) intended to be used in one place: while installing Ubuntu. So, its design could change drastically. I would love to keep this going, but it’s mostly a lucky coincidence that it fits in websites today.
(It would be neat to see a loco-web-resources project on Launchpad, but I don’t think I’m the guy to spearhead that)
I hope this was helpful. If you have any questions, feel free to leave a comment and I will try to answer.