Action: imageslider

bugs:
Compatible with: R5.5
Current version: 0.4
Credits: Author

{{imageslider}}


action/imageslider.php


<?php

if (!defined('IN_WACKO'))
{
    exit;
}

/*
    Showing images as slider for uploaded by {{upload}} files

    version: 0.4

    {{imageslider
        [page="PageName" or global=1]
        [order="time|FILENAME|size|size_desc|ext"]
        [owner="UserName"]
        [picture=1]
        [max=number]
    }}
 */

// The sole condition is that all the images must be exactly the same size.

$page_id '';

if (!isset(
$nomark))    $nomark '';
if (!isset(
$order))        $order '';
if (!isset(
$global))    $global '';
if (!isset(
$tag))        $tag ''// FIXME: $tag == $page
if (!isset($owner))        $owner '';
if (!isset(
$page))        $page '';
if (!isset(
$ppage))        $ppage '';
if (!isset(
$legend))    $legend '';
if (!isset(
$deleted))    $deleted 0;
if (!isset(
$track))        $track 0;
if (!isset(
$picture))    $picture '1';
if (!isset(
$max))        $max '';

if (
$max)
{
    
$limit $max;
}
else
{
    
$limit    50;
}

$order_by "file_name ASC";
if (
$order == 'time')        $order_by "uploaded_dt DESC";
if (
$order == 'size')        $order_by "file_size ASC";
if (
$order == 'size_desc')    $order_by "file_size DESC";
if (
$order == 'ext')        $order_by "file_ext ASC";

$widthSettings '100%'// 100%, 300px, etc.
// default options for slider
$timeOnSlide        6;
$timeBetweenSlides    1;
$animationTiming    'ease';
$slidyDirection        'left';
$cssAnimationName    'slidy';
// options: data-caption, alt, none
$captionSource        'data-caption';
$captionBackground    'rgba(0,0,0,0.3)';
$captionColor        '#fff';
$captionFont        'Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif';
// options: top, bottom
$captionPosition    'bottom';
//  options: slide, perm, fade
$captionAppear        'slide';
$captionSize        '1.6rem';
// same units
$captionPadding        '.6rem';

// do we allowed to see?
if (!$global)
{
    if (
$page == '')
    {
        
$page        $this->tag;
        
$page_id    $this->page['page_id'];
    }
    else
    {
        
$page    $this->unwrap_link($page);
        
$ppage    '/' $page;

        if (
$_page_id $this->get_page_id($page))
        {
            
$page_id    $_page_id;
        }
    }

    
$can_view    $this->has_access('read'$page_id) || $this->is_admin() || $this->is_owner($page_id);
}
else
{
    
$can_view    1;
    
$page        $this->tag;
}

if (
$can_view)
{
    if (
$global || ($tag == $page))
    {
        
$filepage $this->page;
    }
    else
    {
        
$filepage $this->load_page($page);
    }

    if (!
$global && !isset($filepage['page_id']))
    {
        return;
    }

    
$count $this->db->load_all(
        
"SELECT f.upload_id " .
        
"FROM " $this->db->table_prefix "upload f " .
            
"INNER JOIN " $this->db->table_prefix "user u ON (f.user_id = u.user_id) " .
        
"WHERE f.page_id = '". ($global $filepage['page_id']) . "' " .
            
"AND f.picture_w <> '0' " .
            (
$owner
                
"AND u.user_name = " $this->db->q($owner) . " "
                
'') .
            (
$deleted != 1
                
"AND f.deleted <> '1' "
                
""), true);

    
$count        count($count);
    
$pagination $this->pagination($count$limit'f');

    
// load files list
    
$files $this->db->load_all(
        
"SELECT f.upload_id, f.page_id, f.user_id, f.file_size, f.picture_w, f.picture_h, f.file_ext, f.upload_lang, f.file_name, f.file_description, f.uploaded_dt, u.user_name AS user, f.hits " .
        
"FROM " $this->db->table_prefix "upload f " .
            
"INNER JOIN " $this->db->table_prefix "user u ON (f.user_id = u.user_id) " .
        
"WHERE f.page_id = '". ($global $filepage['page_id']) . "' " .
            
"AND f.picture_w <> '0' " .
            (
$owner
                
"AND u.user_name = " $this->db->q($owner) . " "
                
'') . " " .
            (
$deleted != 1
            
"AND f.deleted <> '1' "
                    
"") .
        
"ORDER BY f." $order_by." " .
        
"LIMIT {$pagination['offset']}{$limit}");

    if (!
is_array($files))
    {
        
$files = [];
    }

    
// display

    
if (!$global)
    {
        
$path2 'file:/'.($this->slim_url($page)) . '/';
    }
    else
    {
        
$path2 'file:/';
    }

    if (!
$nomark)
    {
        
$title $this->_t('UploadTitle'.($global 'Global' '') ) . ' '.($page $this->link($ppage''$legend) : '');
        
#echo '<div class="layout-box"><p class="layout-box"><span>' . $title.": </span></p>\n";
    
}

    if (
$factor count($files))
    {
        
// calculate data for image slider CSS

        // count the number of images in the slide, including the new cloned element
        
$imgCount        $factor 1;
        
// calculate the total length of the animation by multiplying the number of _actual_ images by the amount of time for both static display of each image and motion between them
        
$totalTime        = ($timeOnSlide $timeBetweenSlides) * ($imgCount 1);
        
#$_totalTime    = ($timeOnSlide + $timeBetweenSlides) * ($imgCount);
        // determine the percentage of time an individual image is held static during the animation
        
$slideRatio        = ($timeOnSlide $totalTime) * 100;
        
// determine the percentage of time for an individual movement
        
$moveRatio        = ($timeBetweenSlides $totalTime) * 100;
        
// work out how wide each image should be in the slidy, as a percentage.
        
$basePercentage    100 $imgCount;
        
// set the initial position of the slidy element
        
$position        0;

        
// debug info
        #echo 'imgCount: '. $imgCount . '<br />';
        #echo 'totalTime: '. $totalTime . '<br />';
        #echo 'slideRatio: '. $slideRatio . '<br />';
        #echo 'moveRatio: '. $moveRatio . '<br />';
        #echo 'basePercentage: '. $basePercentage . '<br />';
        #echo 'totalTime: '. $totalTime . '<br />';
        
?>

        <style>

        div#captioned-gallery {
            width: 100%;
            overflow: hidden;
        }
        figure {
            margin: 0;
        }
        figure.slider {
            position: relative;
            width: <?php echo $imgCount 100?>%;
            font-size: 0;
            animation: <?php echo $totalTime.'s ' $animationTiming?> slidy infinite;
        }
        figure.slider:hover {
            /* animation: animation 1s  16 ease; */
            animation-play-state: paused;
        }
        figure.slider figure {
            width: <?php echo  $basePercentage?>%;
            height: auto;
            display: inline-block;
            position: inherit;
        }
        figure.slider img {
            width: <?php echo $widthSettings?>;
            height: auto;
        }
        figure.slider figure figcaption {
            position: absolute;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            color: #fff;
            width: 100%;
            font-size: 2rem;
            padding: .6rem;
        }
        div#slider figure {
            position: relative;
            width: <?php echo $imgCount 100?>%;
            margin: 0;
            padding: 0;
            font-size: 0;
            left: 0;
            text-align: left;
            animation: <?php echo $totalTime.'s ' $animationTiming?> slidy infinite;
        }

        @media screen and (max-width: 500px) {
            figure.slider figure figcaption {
                font-size: 1.2rem;
            }
        }

        /* figure.slider figure figcaption {
            position: absolute;
            bottom: -3.5rem;
            background: rgba(0,0,0,0.3);
            color: #fff;
            width: 100%;
            font-size: 2rem;
            padding: .6rem;
            transition: .5s bottom;
        }
        figure.slider figure:hover figcaption {
            bottom: 0;
        }

        figure.slider figure:hover + figure figcaption {
            bottom: 0;
        } */

        @keyframes slidy {

        <?php
        
if ($slidyDirection == "right")
        {
            echo 
"0% \t{ left: -" . (($imgCount 1) * 100) . "%; }\n";

            for (
$i $imgCount 1$i 0$i--)
            {
                
$position += $slideRatio;
                
// make the keyframe the position of the image
                
echo "\t\t" $position "% \t{ left: -" . ($i 100) . "%; }\n";
                
$position += $moveRatio;
                
// make the postion for the _next_ slide
                
echo "\t\t" $position "% \t{ left: -" . (($i 1) * 100) . "%; }\n";
            }
        }
        else
        {
            echo 
"0% \t{ left: 0%; }\n";

            
// the slider is moving to the left
            
for ($i 0$i < ($imgCount 1); $i++)
            {
                
$position += $slideRatio;
                
// make the keyframe the position of the image
                
echo "\t\t" $position "% \t{ left: -" . ($i 100) . "%; }\n";
                
$position += $moveRatio;
                
// make the postion for the _next_ slide
                
echo "\t\t" $position "% \t{ left: -" . (($i 1) * 100) . "%; }\n";
            }
        }
?>

        }

        </style>

        <div id="captioned-gallery">
        <figure class="slider">
    <?php
        
// adding at the end a clone of the first array for transition loop
        
$files[]    = $files[0];
        
$n            0;
        
#$this->debug_print_r($files);

        
foreach($files as $file)
        {
            if (
$file['picture_h']) // missing: svg!
            
{
                
$n++;

                
$this->files_cache[$file['page_id']][$file['file_name']] = $file;

                
$dt            $file['uploaded_dt'];
                
$desc        $this->format($file['file_description'], 'typografica' );

                if (
$this->page['page_lang'] != $file['upload_lang'])
                {
                    
$desc    $this->do_unicode_entities($desc$file['upload_lang']);
                }

                if (
$desc == '')
                {
                    
$desc " ";
                }

                
$file_id    $file['upload_id'];
                
$file_name    $file['file_name'];
                
$text        = ($picture == false) ? $file_name '';
                
$file_size    $this->binary_multiples($file['file_size'], falsetruetrue);
                
$link        $this->link($path2.$file_name''$text''$track);

                
?>
                <figure>
                <?php echo $link?>
                <figcaption><?php echo $n '/' $count.' ' $desc?></figcaption>
            </figure>
    <?php
            
}
        }
?>
        </figure>
        </div>
    <?php
    
}
    else
    {
        echo 
'<em>' $this->_t('UploadFileNotFound') . '</em>';
    }

    unset(
$files);

    if (!
$nomark)
    {
        
#echo "</div>\n";
    
}
}
else
{
    echo 
'<em>' $this->_t('ActionDenied') . '</em>';
}

?>

Documentation

The sole condition is that all the images must be exactly the same size.

How to


%%(wacko wrapper=page wrapper_width=600)
{{imageslider}}
%%

Localization (optional)

put this at the end of your language file


lang/wacko.xyz.php

//hacks
"YourPhrase" => "your translation here",


pls. notice that this entry will not survive an Wacko upgrade, so you have to redo this


[xyz] proposed translations
[de] ...
[fr]
[ru]

To Do

  • make parameters like direction, size, time and caption accessible for action
  • change the action for your purposes

Show Files (2 files)