Slideshow for elefantcms (http://elefantcms.com/) using the Ink (http://ink.sapo.pt) framework

apps:myapp:conf:embed.php

; <?php /*

[myapp/slideshow]

label = "MyApp Slideshow"
icon = picture-o

path[label] = Folder
path[type] = select
path[initial] = "sliders"
path[require] = "apps/filemanager/lib/Functions.php"
path[callback] = "filemanager_list_folders"

position[label] = Caption Position
position[type] = select
position[callback] = "\myapp\Filter::caption_position"

style[label] = Caption Style
style[type] = select
style[callback] = "\myapp\Filter::caption_style"

pagination[label] = Show Pagination
pagination[type] = select
pagination[require] = "apps/filemanager/lib/Functions.php"
pagination[callback] = "filemanager_yes_no"

speed[label] = "Transition Speed (milliseconds); blank or 0 for none"
speed[type] = text

; */ ?>

apps:myapp:handlers:slideshow.php

<?php

$root = trim (conf ('Paths', 'filemanager_path'), '/') . '/';

if (isset ($data['path']) or isset ($_GET['path'])) {

	if (isset ($data['path'])) {
		$path = trim ($data['path'], '/');
	} elseif (isset ($_GET['path'])) {
		$path = trim ($_GET['path'], '/');
	}

	if (strpos ($path, '..') !== false) {
		return;
	}

	if ( ! @is_dir ($root . $path)) {
		return;
	}

	$name = str_replace ('/', '-', $path);

	$files = glob ($root . $path . '/*.{jpg,jpeg,gif,png,JPG,JPEG,GIF,PNG}', GLOB_BRACE);
	$files = is_array ($files) ? $files : array ();

} else {
	return;
}

if (! $files ) return;

// Build array of attributes
$attributes = array ();
if (isset ($data['speed']) && $data['speed']) {
	$attributes['autoAdvance'] = $data['speed'];
}
if (isset ($data['pagination']) && $data['pagination'] == 'yes') {
	$attributes['pagination'] = $name . '-pagination';
}
if (count ($attributes)) $attributes = json_encode ($attributes);
else $attributes = '';

// get list of files
$prop_files = array_map (function ($file) {
	return preg_replace ('/^files\//', '', $file);
}, $files);

// get links for each file
$prop_links = FileManager::prop ($prop_files, 'link');
$links = array ();
foreach ($prop_links as $f => $link) {
	$links['files/' . $f] = $link;
}

// get descriptions for each file
$prop_descriptions = FileManager::prop ($prop_files, 'desc');
$descriptions = array ();
foreach ($prop_descriptions as $f => $description) {
	$descriptions['files/' . $f] = $description;
}

$position = $data['position'];
if ($position == 'top') $class = 'over-top';
elseif ($position == 'bottom') $class = 'over-bottom';
else $class = '';

$style = $data['style'];
if ($style == 'dark') $class .= ' dark';

echo $tpl->render (
	'myapp/slideshow', 
	array (
		'files' => $files,
		'name' => $name,
		'attributes' => $attributes,
		'class' => $class,
		'pagination' => $data['pagination'],
		'position' => $position,
		'links' => $links,
		'descriptions' => $descriptions
	)
);

apps:myapp:lib:Filter.php

<?php

namespace myapp;

class Filter {

	/**
	 * Returns a list of caption positions
	 */
	public static function caption_position () {
		return array (
			array (
				'key' => 'before',
				'value' => __ ('Before')
			),
			array (
				'key' => 'after',
				'value' => __ ('After')
			),
			array (
				'key' => 'top',
				'value' => __ ('Top')
			),
			array (
				'key' => 'bottom',
				'value' => __ ('Bottom')
			)
		);
	}

	/**
	 * Returns a list of caption styles
	 */
	public static function caption_style () {
		return array (
			array (
				'key' => 'light',
				'value' => __ ('Light')
			),
			array (
				'key' => 'dark',
				'value' => __ ('Dark')
			)
		);
	}

}

apps:myapp:views:slideshow.html

<div id="{{ name }}" class="ink-carousel"{% if pagination === 'yes' %} data-pagination="#{{ name }}-pagination"{% end %}>
	<ul class="stage column-group">
	{% foreach files %}
		<li class="slide all-100">
			<figure class="ink-image">
			{% if descriptions[$data->loop_value] != '' && $data->position == 'before' %}
				<figcaption class="{{ class }} align-center">
					{{ descriptions[$data->loop_value] }}
				</figcaption>
			{% end %}
			{% if links[$data->loop_value] != '' %}
				<a href="{{links[$data->loop_value]}}"><img src="/{{ loop_value }}" alt="" /></a>
			{% else %}
				<img src="/{{ loop_value }}" alt="" />
			{% end %}
			{% if descriptions[$data->loop_value] != '' && $data->position != 'before' %}
				<figcaption class="{{ class }} align-center">
					{{ descriptions[$data->loop_value]}}
				</figcaption>
			{% end %}
			</figure>
		</li>
	{% end %}
	</ul>

	{% if pagination === 'yes' %}
	<nav id="{{ name }}-pagination" class="ink-navigation">
		<ul class="pagination chevron"></ul>
	</nav>
	{% end %}

</div>

<script>
	// Not required if you're using autoload.js
	Ink.requireModules(['Ink.UI.Carousel_1'], function (Carousel) {
		new Carousel('#{{ name }}'{% if attributes != '' %}, {{ attributes|none }}{% end %});
	});
</script>