Template:slideshow

// Slideshow, by neilw, 2009
//    Optimized photo slideshow based on the jQuery "cycle" plug-in
//
// Version History:
//    1.02     26-July-2010   neilw        Fixed for Mindtouch 2010
//    1.0.1    11-May-2010    neilw        Added option for caption on top
//    1.0.0    16-Nov-2009    neilw        A couple of minor bug fixes
//    0.9.3    16-Nov-2009    neilw        Added "controls" and "options" options
//    0.9.2    13-Nov-2009    neilw        Added proper support for effects.  Automatically load the appropriate plug-in version
//                                         depending on the selected effect.
//    0.9.1    13-Nov-2009    neilw        Added "effect", "title", "link", and "caption" options
//    0.9.0    13-Nov-2009    neilw        First beta version installed on dev wiki.  Still using "cycle lite"

//
// Usage:
//    slideshow{ path:str, width:num, height:num, interval:num, speed:num, order:str,
//               title:bool or string, link:bool, caption:bool, controls:bool or str }
//
//        path        Path to page containing attached slideshow images (default: page.path)
//        width       display width, in pixels, of slideshow images (default: 320)
//        height      display height, in pixels, of slideshow images (default: 240)
//        interval    duration, in milliseconds, of each image (default: 3000)
//        speed       speed of transitions, in milliseconds (default: 500)
//        order       order of images to display; valid options are:
//                        "name"            ascending order by name (DEFAULT)
//                        "date" or "+date" ascending order by date (oldest first)
//                        "-date"           descending order by date (newest first)
//        effect      transition effect (default:'fade')
//        title       display slideshow title (default:automatic)
//        link        link each image to the original, full-sized (default:FALSE)
//        caption     display each image's description as caption on bottom (default:FALSE).  May be set to true,
//                    false, "top", or "bottom".  True is equivalent to "bottom".
//        controls    display "prev", "pause/play", and "next" controls (default:FALSE).  May be set to true, false,
//                    "top", or "bottom" (to control placement of the controls).  True is equivalent to "top".
//        options     other options to be passed directly to the plugin

var id = @id;

//**************
// Process args
//**************
var errors = [];
// path
var picpage = wiki.getpage($0 ?? $path ?? page.path);
if (picpage is not map) {
    let errors ..= [ "ERROR: invalid path" ];
    let picpage = page;
}
var this_page = (picpage.id == page.id);

// width and height
var width = $1 ?? $width;
if (width is not num || width <= 0) {
    if (width is not nil) let errors ..= [ "width must be a positive number" ];
    let width = 320;
}
var height = $2 ?? $height;
if (height is not num || height <= 0) {
    if (height is not nil) let errors ..= [ "height must be a positive number" ];
    let height = 240;
}
var aspect = width/height;

// interval
var interval = $3 ?? $interval;
if (interval is not num || interval <= 0) {
    if (interval is not nil) let errors ..= [ "interval must be a positive number" ];
    let interval = 3000;
}

// speed
var speed    = $4 ?? $speed;
if (speed is not num || speed < 0) {
    if (speed is not nil) let errors ..= [ "speed must be a non-negative number" ];
    let speed = 500;
}

// order
var order = $5 ?? $order;
if (order is str) let order = string.tolower(order);
var allowed_orders = [ "name", "date", "+date", "-date" ];
if (order is not str || !list.contains(allowed_orders, order)) {
    if (order is not nil) let errors ..= [ "order must be one of "..string.serialize(allowed_orders) ];
    let order = "name";
}
var char1 = string.substr(order,0,1);
var descending = (char1 == "-");
let order = string.substr(order, (char1 == "-" || char1 == "+") ? 1 : 0);

// effect
var effect = $6 ?? $effect;
var allowed_effects = [ "fade" ];
if (effect is not str) { // || !list.contains(allowed_effects, effect)) {
    if (effect is not nil) let errors ..= [ "effect must be one of "..string.serialize(allowed_effects) ];
    let effect = 'fade';
}
var plugin = (effect == "fade" ? 
    "https://acoc.trialanderror.tech/data/flv/jquery.cycle.lite.js" :
    "https://acoc.trialanderror.tech/data/flv/jquery.cycle.all.js"  );


// title
var title = $7 ?? $title;

// link
var link = $8 ?? $link ?? false;

// caption
var caption = $9 ?? $caption;
if (caption is str) let caption = string.tolower(caption);
var allowed_caption = [ "top", "bottom" ];
if (caption is not bool && (caption is not str || !list.contains(allowed_caption, caption))) {
    if (caption is not nil)
        let errors ..= [ "caption must be one of true, false, "..string.join(allowed_caption,", ")];
    let controls = false;
}
if (caption == true) let caption = "bottom";

// controls
var controls = $10 ?? $controls;
if (controls is str) let controls = string.tolower(controls);
var allowed_controls = [ "top", "bottom" ];
if (controls is not bool && (controls is not str || !list.contains(allowed_controls, controls))) {
    if (controls is not nil)
        let errors ..= [ "controls must be one of true, false, "..string.join(allowed_controls,", ")];
    let controls = false;
}
if (controls == true) let controls = "top";
var next_id = id .. "next";
var prev_id = id .. "prev";
var pause_id = id .. "pause";
var controls_div = <div style="width:100%; text-align:center; background-color:#dddddd;">
    <a href="#" id=(prev_id)  style="float:left; padding-left:10px"  > "prev"  </a>;
    <a href="#" id=(next_id)  style="float:right; padding-right:10px" > "next"  </a>;
    <a href="#" id=(pause_id)> "pause" </a>;
</div>;

// options
var options = $11 ?? $options ?? {};
let options ..= { timeout:interval, speed:speed, fx:effect };
if (link) let options ..= { pause:1 };
if (controls) let options ..= { next:"#"..next_id, prev:"#"..prev_id };

//*************************
// Prepare for the scripts
//*************************

// Create selector for image order in gallery at bottom of page
var selector = order .. (order == "date" ? (descending ? "-desc" : "-asc") : "");



<html>
//********************
// Output the scripts
//********************
<head>

if (this_page) <script type="text/javascript"> "   // set gallery sort order to equal slideshow
    Deki.$(document).ready(function($) {
        var $select = $('#galleryOrderBy');
        $select.find('option').removeAttr('selected');
        $select.find('option[value=" .. selector .. "]').attr('selected','selected');
        $select.change();
    });
" </script>;
<script type="text/javascript" src=(plugin)></script>;
 
<script type="text/javascript"> "
    function setcaption_"..id.."() { $('#"..id.."caption".."').text($(this).find('div.caption').text()); }
    Deki.$(document).ready(function($) {
        var options = "..json.emit(options)..";
        if ("..json.emit(caption)..")
            options.after = setcaption_"..id..";
        var $slideshow = $('#' + "..json.emit(id)..");
        $slideshow.cycle(options);
        var $pause = $('#' + "..json.emit(pause_id)..");
        if ($pause.length)
            $pause.click(function() {
                $slideshow.cycle($pause.text());
                $pause.text($pause.text() == 'pause' ? 'resume' : 'pause');
                return(false);
            });
    });
" </script>;
</head>;

//**********************
// Output the slideshow
//**********************
<body>
if (#errors) <div style="color:red">
    <span style="font-weight:bold"> "Slideshow errors:" </span>;
    <ul> foreach (var e in errors) <li> e </li>; </ul>;
</div>;
// Output the images
<div style=("width:" .. width .. "px;")>
    if ((!this_page && title is nil) || title) <div style="text-align:center; font-weight:bold"> title is str ? title : picpage.title </div>;
    if (controls == "top") controls_div;
    if (caption == "top") <div id=(id.."caption") style="text-align:center"> " " </div>;
    <div id=(id) style=("width:"..width.."px; height:"..height.."px;")>
        // generate the list of images
        var pics = list.select(map.values(picpage.files ?? { }),"$.imageHeight is num");
        let pics = [ { picture:p, name:p.name, date:date.format(p.date,"s") } foreach var p in pics ];
        let pics = list.collect(list.sort(pics,order,descending),"picture");
        // Spit them out!
        foreach (var p in pics) {
            var h = p.imageheight;
            var w = p.imagewidth;
            var a = w / h;
            var img;
            if (a >= aspect) {
                var new_h = h * width / w;
                var m = (height - new_h) / 2;
                let img = <img style=("margin-top:"..m.."px; margin-bottom:"..m.."px;") src=(p.uri & {size:"webview"}) width=(width) />;
            }
            else {
                var new_w = w * height / h;
                var m = (width - new_w) / 2;
                let img = <img style=("margin-left:"..m.."px; margin-right:"..m.."px;") src=(p.uri & {size:"webview"}) height=(height) />;
            }
            var caption = <div class="caption" style="display:none"> p.description </div>;
            link ?
                <a href=(string.substr(p.uri,#site.uri-1)) target="_blank" style="display:none;"> img; caption; </a> :
                <div style="display:none;"> img; caption; </div>;
        }
    </div>;
    if (caption == "bottom") <div id=(id.."caption") style="text-align:center"> " " </div>;
    if (controls == "bottom") controls_div;
</div>;
</body>
</html>