Skip to content

Add image sliders to Jekyll with Ideal Image Slider. Ruby plugin version. (This repository is archived. Issues are disabled. Pull requests will be ignored.)

master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

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

  1. Add _plugins/ideal_image_slider.rb to your _plugins folder.

  2. Add this line to your _config.yml file: iis_slider_array: []

  3. Add Ideal Image Slider to your site, either manually or using Bower.

  4. See below for integration suggestions.

Syntax

{% slider height [bullets] [captions] %}
{% endslider %}

Usage

Surround a series of Markdown images with the following tag:

{% slider %}
  ![alt text 1](image1.jpg)
  ![alt text 2](image2.jpg)
  ![alt text 3](image3.jpg)
{% 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 %}
  [![alt text 1](image1.jpg)](/page/url)
  [![alt text 2](image2.jpg)](/category/url)
  [![alt text 3](image3.jpg)](http://example.com)
{% endslider %}

And the plugin will add a clickable link to each image in the slider:

<div id="slider">
  <a href="/page/url"><img src="image1.jpg" alt="alt text 1"></a>
  <a href="/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 %}
  ![this is the alt text](image1.jpg)
  ![it will be used as a caption](image2.jpg)
  ![for the image](image3.jpg)
{% 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 %}

About

Add image sliders to Jekyll with Ideal Image Slider. Ruby plugin version. (This repository is archived. Issues are disabled. Pull requests will be ignored.)

Topics

Resources

License

Releases

No releases published

Languages

You can’t perform that action at this time.