Add Slider

_data/sliders.yml

@@ -0,0 +1,22 @@
+- selector: slider1
+  bullets: false
+  captions: true
+  images:
+    - src: /public/pics/2018-05-10-1.jpg
+      alt: Participants in Coding Club Meeting
+    - data-src: /public/pics/2018-05-10-2.jpg
+      alt: Speaker introduced the topic
+    - data-src: /public/pics/2018-05-10-3.jpg
+      alt: Participants in Coding Club Meeting
+  settings:
+    height: 400
+    initialHeight:
+    maxHeight:
+    interval:
+    transitionDuration:
+    effect:
+    disableNav:
+    keyboardNav:
+    previousNavSelector:
+    nextNavSelector:
+

_includes/head.html

@@ -55,4 +55,8 @@
 </script>
 <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
 
+ <!-- https://github.com/jekylltools/jekyll-ideal-image-slider-include -->
+
+  {% include slider_styles.html %}
+
 </head>

_includes/slider.html

@@ -0,0 +1,11 @@
+<!-- Jekyll Ideal Image Slider Include -->
+<!-- https://github.com/jekylltools/jekyll-ideal-image-slider-include -->
+<!-- v1.8 -->
+{%- if include.selector != empty -%}
+  {%- assign slider = site.data.sliders | where:"selector",include.selector | first -%}
+  <div id="{{ slider.selector }}">
+  {% for image in slider.images -%}
+    {% if image.href -%}<a href="{{ image.href }}">{%- endif -%}<img data-src="{{ image.data-src | relative_url }}" data-src-2x="{{ image.data-src-2x | relative_url }}" src="{{ image.src | relative_url }}" title="{{ image.title }}" alt="{{ image.alt }}">{%- if image.href -%}</a>{% endif %}
+  {% endfor -%}
+  </div>
+{%- endif -%}

_includes/slider_scripts.html

@@ -0,0 +1,61 @@
+<!-- Jekyll Ideal Image Slider Include -->
+<!-- https://github.com/jekylltools/jekyll-ideal-image-slider-include -->
+<!-- v1.8 -->
+{%- assign page_sliders = page.image_sliders | uniq -%}
+{%- assign layout_sliders = layout.image_sliders | uniq -%}
+{%- assign iis_slider_array = page_sliders | concat: layout_sliders | uniq -%}
+{%- if page.image_sliders_load_all == true -%}
+  {%- assign site_sliders = site.data.sliders | uniq -%}
+  {%- assign iis_slider_array = iis_slider_array | concat: site_sliders | uniq -%}
+{%- endif -%}
+{% if iis_slider_array != empty %}
+  <script src="{{ "/slider/ideal-image-slider.min.js" | relative_url }}"></script>
+  <script src="{{ "/slider/extensions/bullet-nav/iis-bullet-nav.js" | relative_url }}"></script>
+  <script src="{{ "/slider/extensions/captions/iis-captions.js" | relative_url }}"></script>
+  <script>
+  {% for selector in iis_slider_array -%}
+    {%- assign slider = site.data.sliders | where:"selector",selector | first -%}
+    {%- assign settings = slider.settings -%}
+    var {{ slider.selector }} = new IdealImageSlider.Slider({
+      selector: '#{{ slider.selector }}',
+      {% if settings.height -%}
+      height: {{ settings.height }},
+      {% endif -%}
+      {% if settings.initialHeight -%}
+      initialHeight: {{ settings.initialHeight }},
+      {% endif -%}
+      {% if settings.maxHeight -%}
+      maxHeight: {{ settings.maxHeight }},
+      {% endif -%}
+      {% if settings.interval -%}
+      interval: {{ settings.interval }},
+      {% endif -%}
+      {% if settings.transitionDuration -%}
+      transitionDuration: {{ settings.transitionDuration }},
+      {% endif -%}
+      {% if settings.effect -%}
+      effect: {{ settings.effect }},
+      {% endif -%}
+      {% if settings.disableNav -%}
+      disableNav: {{ settings.disableNav }},
+      {% endif -%}
+      {% if settings.keyboardNav -%}
+      keyboardNav: {{ settings.keyboardNav }},
+      {% endif -%}
+      {% if settings.previousNavSelector -%}
+      previousNavSelector: {{ settings.previousNavSelector }},
+      {% endif -%}
+      {% if settings.nextNavSelector -%}
+      nextNavSelector: {{ settings.nextNavSelector }},
+      {% endif -%}
+    });
+    {% if slider.bullets == true -%}
+    {{ slider.selector }}.addBulletNav();
+    {% endif -%}
+    {% if slider.captions == true -%}
+    {{ slider.selector }}.addCaptions();
+    {% endif -%}
+    {{ slider.selector }}.start();
+  {% endfor -%}
+  </script>
+{%- endif -%}

_includes/slider_styles.html

@@ -0,0 +1,7 @@
+<!-- Jekyll Ideal Image Slider Include -->
+<!-- https://github.com/jekylltools/jekyll-ideal-image-slider-include -->
+<!-- v1.8 -->
+{% if page.image_sliders or layout.image_sliders or page.image_sliders_load_all -%}
+<link rel="stylesheet" href="{{ "/slider/ideal-image-slider.css" | relative_url }}">
+<link rel="stylesheet" href="{{ "/slider/themes/default/default.css" | relative_url }}">
+{%- endif -%}

_layouts/default.html

@@ -27,5 +27,6 @@
       {{ content }}
     </div>
 
+{% include slider_scripts.html %}
   </body>
 </html>

index.md

@@ -1,7 +1,13 @@
 ---
 layout: default
 title: Home
+image_sliders:
+  - slider1
 ---
+<h1>Welcome to Coding Club Uc3m!</h1>
+
+{% include slider.html selector="slider1" %}
+
 <!-- Html Elements for Search -->
 <div id="search-container">
 <input type="text" id="search-input" placeholder="search...">

slider/.bower.json

@@ -0,0 +1,33 @@
+{
+  "name": "ideal-image-slider",
+  "main": "ideal-image-slider.js",
+  "homepage": "https://github.com/gilbitron/Ideal-Image-Slider",
+  "authors": [
+    "Gilbert Pellegrom <[email protected]>"
+  ],
+  "description": "Quite simply the ideal Image Slider in vanilla JS",
+  "keywords": [
+    "image",
+    "slider",
+    "javascript",
+    "vanilla"
+  ],
+  "license": "GPL-3.0",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "tests"
+  ],
+  "version": "1.5.1",
+  "_release": "1.5.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.5.1",
+    "commit": "edc017cfa75e5e6c1cc1a1e0889c68827ee7bf5f"
+  },
+  "_source": "https://github.com/gilbitron/Ideal-Image-Slider.git",
+  "_target": "^1.5.1",
+  "_originalSource": "ideal-image-slider",
+  "_direct": true
+}

slider/CHANGELOG.md

@@ -0,0 +1,60 @@
+# Ideal Image Slider Changelog
+
+Version 1.5.1 - 2016.02.06
+--------------------------
+ * [Changed] Small changes and update package.json
+
+Version 1.5.0 - 2015.09.23
+--------------------------
+ * [New] Responsive height! The height of the slider now changes correctly in "auto" and aspect ratio mode
+ * [New] Height can now be an aspect ratio (e.g. "16:9")
+ * [New] initialHeight and maxHeight settings
+ * [Changed] Default height value is now "auto"
+ * [Fixed] _deepExtend() function
+ * [Fixed] Code formatting
+
+Version 1.4.0 - 2014.09.22
+--------------------------
+ * [Changed] Removed outdated CSS vender prefixes
+ * [Changed] Changed license to GPL
+
+Version 1.3.0 - 2014.09.17
+--------------------------
+ * [New] Added Captions extension
+
+Version 1.2.2 - 2014.09.12
+--------------------------
+ * [Fixed] Links z-index bug
+
+Version 1.2.1 - 2014.09.12
+--------------------------
+ * [Fixed] Single slide bug
+ * [Fixed] "slide" transitions don't work on mobile
+
+Version 1.2.0 - 2014.09.10
+--------------------------
+ * [New] Added Bullet Navigation extension
+ * [Changed] Added Bullet Navigation styles to Default theme
+ * [Changed] gotoSlide() now adds directional classes
+ * [Fixed] Transform property typo
+
+Version 1.1.0 - 2014.09.08
+--------------------------
+ * [New] Added keyboard navigation
+ * [Changed] Implemented better touch navigation
+ * [Changed] Changed ARIA listbox to tabpanel
+
+Version 1.0.2 - 2014.09.04
+--------------------------
+ * [New] Added minified script
+ * [New] Added Grunt build script
+
+Version 1.0.1 - 2014.09.03
+--------------------------
+ * [New] Added loading spinner to default theme
+ * [Changed] Stop slider if the window is blurred
+ * [Fixed] Disable navigation while animating
+
+Version 1.0.0 - 2014.09.02
+--------------------------
+ * Initial release

slider/Gruntfile.js

@@ -0,0 +1,100 @@
+module.exports = function(grunt) {
+
+	// Config
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		jshint: {
+			options: {
+				reporter: require('jshint-stylish')
+			},
+			dist: {
+				files: {
+					src: ['ideal-image-slider.js']
+				}
+			},
+			extensions: {
+				files: {
+					src: ['extensions/**/*.js']
+				}
+			}
+		},
+
+		uglify: {
+			options: {
+				banner: '/*! Ideal Image Slider v<%= pkg.version %> */\n'
+			},
+			dist: {
+				files: {
+					'ideal-image-slider.min.js': 'ideal-image-slider.js'
+				}
+			}
+		},
+
+		'string-replace': {
+			version: {
+				options: {
+					replacements: [{
+						pattern: /(v\d+.\d+.\d+)/,
+						replacement: 'v<%= pkg.version %>'
+					}]
+				},
+				files: {
+					'ideal-image-slider.js': 'ideal-image-slider.js',
+					'ideal-image-slider.css': 'ideal-image-slider.css'
+				}
+			}
+		},
+
+		qunit: {
+			all: ['tests/**/*.html']
+		},
+
+		watch: {
+			options: {
+				livereload: true
+			},
+			dist: {
+				files: ['ideal-image-slider.js'],
+				tasks: ['jshint:dist','uglify','string-replace'],
+				options: {
+					spawn: false,
+				}
+			},
+			extensions: {
+				files: ['extensions/**/*.js'],
+				tasks: ['jshint:extensions'],
+				options: {
+					spawn: false,
+				}
+			}
+		}
+
+	});
+
+	// Plugins
+	require('load-grunt-tasks')(grunt);
+	grunt.registerTask('forceOn', 'turns the --force option ON', function(){
+		if ( !grunt.option( 'force' ) ) {
+			grunt.config.set('forceStatus', true);
+			grunt.option( 'force', true );
+		}
+	});
+	grunt.registerTask('forceOff', 'turns the --force option OFF', function(){
+		if ( grunt.config.get('forceStatus') ) {
+			grunt.config.set('forceStatus', false);
+			grunt.option( 'force', false );
+		}
+	});
+
+	// Tasks
+	grunt.registerTask('default', [
+		'jshint',
+		'uglify',
+		'string-replace',
+		'watch'
+	]);
+
+	grunt.registerTask('test', ['qunit']);
+
+};