Action: imageslider

bugs:
Compatible with: R6.0
Current version: 0.6
Credits: Author

Repo: action/imageslider.php


CSS image slider


{{imageslider}}


action/imageslider.php


<?php

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

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

    version: 0.6

    {{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";

$width_settings            '100%'// 100%, 300px, etc.

// default options for slider
$time_on_slide            6;
$time_between_slides    1;
$animation_timing        'ease';
$slidy_direction        'left';
$css_animation_name        'slidy';

// options: data-caption, alt, none
$caption_source            'data-caption';
$caption_background        'rgba(0,0,0,0.3)';
$caption_color            '#fff';
$caption_font            'Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif';

// options: top, bottom
$caption_position        'bottom';

// options: slide, perm, fade
$caption_appear            'slide';
$caption_size            '1.6rem';

// same units
$caption_padding        '.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.file_id " .
        
"FROM " $this->db->table_prefix "file 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.file_id, f.page_id, f.user_id, f.file_size, f.picture_w, f.picture_h, f.file_ext, f.file_lang, f.file_name, f.file_description, f.uploaded_dt, u.user_name AS user, f.hits " .
        
"FROM " $this->db->table_prefix "file 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:/' $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
        
$img_count            $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
        
$total_time            = ($time_on_slide $time_between_slides) * ($img_count 1);
        
#$_totalTime    = ($time_on_slide + $time_between_slides) * ($img_count);
        // determine the percentage of time an individual image is held static during the animation
        
$slide_ratio        = ($time_on_slide $total_time) * 100;
        
// determine the percentage of time for an individual movement
        
$move_ratio            = ($time_between_slides $total_time) * 100;
        
// work out how wide each image should be in the slidy, as a percentage.
        
$base_percentage    100 $img_count;
        
// set the initial position of the slidy element
        
$position            0;

        
// debug info
        #echo 'imgCount: ' . $img_count . '<br />';
        #echo 'totalTime: ' . $total_time . '<br />';
        #echo 'slideRatio: ' . $slide_ratio . '<br />';
        #echo 'moveRatio: ' . $move_ratio . '<br />';
        #echo 'basePercentage: ' . $base_percentage . '<br />';
        #echo 'totalTime: ' . $total_time . '<br />';
        
?>

        <style>

        div#captioned-gallery {
            width: 100%;
            overflow: hidden;
        }
        figure {
            margin: 0;
        }
        figure.slider {
            position: relative;
            width: <?php echo $img_count 100?>%;
            font-size: 0;
            animation: <?php echo $total_time 's ' $animation_timing?> slidy infinite;
        }
        figure.slider:hover {
            /* animation: animation 1s  16 ease; */
            animation-play-state: paused;
        }
        figure.slider figure {
            width: <?php echo $base_percentage?>%;
            height: auto;
            display: inline-block;
            position: inherit;
        }
        figure.slider img {
            width: <?php echo $width_settings?>;
            height: auto;
        }
        figure.slider figure figcaption {
            position: absolute;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            color: #fff;
            width: 100%;
            font-size: 1rem;
            padding: .6rem;
        }
        div#slider figure {
            position: relative;
            width: <?php echo $img_count 100?>%;
            margin: 0;
            padding: 0;
            font-size: 0;
            left: 0;
            text-align: left;
            animation: <?php echo $total_time 's ' $animation_timing?> 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 ($slidy_direction == 'right')
        {
            echo 
"0% \t{ left: -" . (($img_count 1) * 100) . "%; }\n";

            for (
$i $img_count 1$i 0$i--)
            {
                
$position += $slide_ratio;
                
// make the keyframe the position of the image
                
echo "\t\t" $position "% \t{ left: -" . ($i 100) . "%; }\n";
                
$position += $move_ratio;
                
// 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 < ($img_count 1); $i++)
            {
                
$position += $slide_ratio;
                
// make the keyframe the position of the image
                
echo "\t\t" $position "% \t{ left: -" . ($i 100) . "%; }\n";
                
$position += $move_ratio;
                
// 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;
        
#Ut::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['file_lang'])
                {
                    
$desc    $this->do_unicode_entities($desc$file['file_lang']);
                }

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

                
$file_id    $file['file_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('FileNotFound') . '</em>';
    }

    unset(
$files);

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

?>

1. Documentation

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

2. How to


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

2.1. local usage of repository

symlink imageslider.php from community action folder in wacko/action folder in repo
ln -s ../../community/action/imageslider.php imageslider.php

3. To Do

  • make parameters like direction, size, time and caption accessible for action
  • modify the action for your purpose

Show Files (2 files)

Comments

  1. Two different Sliders on the same page

    I am trying to have two image sliders on the same page
    the 1st which works ok 

    {{imageslider}}

    The second one is 
    {{imageslider [page="Wotypedia/imagewheel "}}


    When I do that the second image slider shows the same graphics as in the first window.
    So what I am doing wrong?
    image name @351@21wheel.png
    locations of images file/perpage
    • bear
    • 25.06.2020 06:39 edited
  2. Re: Two different Sliders on the same page

    You must remove the square bracket and the space. The square brackets mark only optional parameters in the documentation and must be removed when the parameter is used.

    so it should be:
    {{imageslider page="Wotypedia/imagewheel"}}
    The page tag above is relative to the page, if you want use a absolute page tag use page="/Wotypedia/imagewheel".
  3. Updated imageslider action

    Do not forget to update the imageslider action with the next WackoWiki upgrade. A obsolete function call was removed, which is no longer around.