Skip to content

A Jekyll plugin for FancyBox (etc) style slideshows - generates thumbnails, and provides slideshow Javascript

License

Notifications You must be signed in to change notification settings

matthewowen/jekyll-slideshow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NOT MAINTAINED

I hope this helps you, but I have to be honest: I'm not really working on this anymore, and so I can't rule out that there are things that don't work right etc etc etc. If you want to contribute or fork or anything, please do! But I just don't really have the bandwidth for bugfixes, let alone feature requests! Sorry :(.

Jekyll Slideshow

What is Jekyll Slideshow?

Jekyll Slideshow is a plugin to help you create image slideshows on your Jekyll / Octopress site.

By slideshow, I mean those neat little JavaScript lightbox things. Instead of big images in your main content, you get a series of thumbnails. Click on one and it appears in a lightbox, and you can scroll left and right through the other items in the list.

What does it do?

Jekyll Slideshow will take care of making thumbnail sized versions of all your images. It'll also do all the JavaScript and CSS necessary to make the slideshows work. Of course, you're welcome to change / add to the JavaScript and CSS to get the look and feel just as you'd like it.

Usage

If you're already using plugins with your Jekyll install, drop the contents of the '_plugins' folder into your '_plugins' folder. If you aren't, just copy the folder across.

This plugin uses the nokogiri and RMagick gems, so you'll need to

gem install nokogiri

and install RMagick.

Copy the 'jesl' folder across into your project, too.

In your templates/layouts, include the relevant JS/CSS, and jQuery if you aren't already (for now, Jekyll Slideshow requires jQuery [sorry about that]):

<link href="/jesl/jesl.min.css" rel="stylesheet" media="screen" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script src="/jesl/jesl.min.js"> </script>

For any content that you'd like the slideshow process to work on, use the filter 'slideshows' in your template, like so:

{{ content | slideshows }}

The Javascript will look for images in lists in that content, and slideshowify them - if you're using Markdown, do it like so:

* ![Example image](/images/300.jpg)
* ![Example image](/images/420.jpg)
* ![Example image](/images/600.jpg)
* ![Example image](/images/an-image.jpg)
* ![Example image](/images/some_image.jpg)

If you'd like to specify the thumbnail size, you can set this in _config.yml like so:

slideshow:
    width: 150
    height: 100

If you checkout the branch 'example' you can see an example site.

Browser support

The slideshow works in modern browsers, and IE7 up; please raise any problems as issues. The thumbnails are displayed using

display: inline-block;

inline-block isn't supported on IE7, so if that matters you might want to add an appropriate CSS rule to get the desired styling.

Questions, feedback, etc

I'd love to hear questions, feedback, suggestions, whatever. :).

About

A Jekyll plugin for FancyBox (etc) style slideshows - generates thumbnails, and provides slideshow Javascript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published