Jekyll Ideal Image Slider
Liquid tag plugin to add image sliders to Jekyll with Ideal Image Slider. This plugin is not compatible with Github Pages. Instead use Jekyll Ideal Image Slider Include for Github Pages compatibility and more configuration options.
Installation
-
Add
_plugins/ideal_image_slider.rbto your_pluginsfolder. -
Add this line to your
_config.ymlfile:iis_slider_array: [] -
Add Ideal Image Slider to your site, either manually or using Bower.
-
See below for integration suggestions.
Syntax
{% slider height [bullets] [captions] %}
{% endslider %}
Usage
Surround a series of Markdown images with the following tag:
{% slider %}
{% endslider %}
The plugin will render the following html for you:
<div id="slider">
<img src="image1.jpg" alt="alt text 1">
<img src="image2.jpg" alt="alt text 2">
<img src="image3.jpg" alt="alt text 3">
</div>
You can add links to the images like this:
{% slider %}
[](/page/url)
[](/category/url)
[](http://example.com)
{% endslider %}
And the plugin will add a clickable link to each image in the slider:
<div id="slider">
<a href="https://github.com/page/url"><img src="image1.jpg" alt="alt text 1"></a>
<a href="https://github.com/category/url"><img src="image2.jpg" alt="alt text 2"></a>
<a href="http://example.com"><img src="image3.jpg" alt="alt text 3"></a>
</div>
You can define the height of a slider by placing a number or an aspect ratio after slider. If you don't specify height, the slider will default to auto.
{% slider 700 %}
{% slider 4:3 %}
{% slider auto %}
If you add bullets after the height variable, it will enable bullet navigation for the slider:
{% slider bullets %}
{% slider 420 bullets %}
If you add captions after the height variable, it will enable captions for the slider. The alt text of an image will be used as a caption for that image:
{% slider captions %}
{% slider 480 captions %}
{% slider captions %}
{% endslider %}
Integration suggestions
Add the CSS to your theme head:
<!-- Slider CSS -->
<link rel="stylesheet" href="{{ "/path/to/ideal-image-slider.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/path/to/themes/default.css" | relative_url }}">
Add the Javascript to your page template just before the </body> tag:
<!-- Slider -->
<script src="{{ "/path/to/ideal-image-slider.min.js" | relative_url }}"></script>
<script src="{{ "/path/to/iis-bullet-nav.js" | relative_url }}"></script>
<script src="{{ "/path/to/iis-captions.js" | relative_url }}"></script>
<!-- Sliders on pages -->
{% for script in page.iis_slider_scripts %}
{{ script }}
{% endfor %}
<!-- Sliders on indexes -->
{% for post in paginator.posts %}
{% for script in post.iis_slider_scripts %}
{{ script }}
{% endfor %}
{% endfor %}
Be sure to change the paths to the correct location of the Javascript and CSS files in your site.
You can selectively include these files. The plugin sets iis_slider_active to true for each page or post with a slider. Using the code below, CSS and Javascript will be loaded only for those pages with sliders.
{% if page.iis_slider_active %}
<!-- Slider CSS -->
<link rel="stylesheet" href="{{ "/path/to/ideal-image-slider.css" | relative_url }}">
<link rel="stylesheet" href="{{ "/path/to/themes/default.css" | relative_url }}">
{% endif %}
{% if page.iis_slider_active %}
<!-- Slider -->
<script src="{{ "/path/to/ideal-image-slider.min.js" | relative_url }}"></script>
<script src="{{ "/path/to/iis-bullet-nav.js" | relative_url }}"></script>
<script src="{{ "/path/to/iis-captions.js" | relative_url }}"></script>
<!-- Sliders on pages -->
{% for script in page.iis_slider_scripts %}
{{ script }}
{% endfor %}
<!-- Sliders on indexes -->
{% for post in paginator.posts %}
{% for script in post.iis_slider_scripts %}
{{ script }}
{% endfor %}
{% endfor %}
{% endif %}