Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

slideshow resizing

I noticed that the .cycle function of slideshow, set width and height in px and this makes necessary to reload the page to see the images resized . Is it possible to avoid that or at least set a value in %? Thanks for any help.

Comments

  • I found that cycle2, should allow this.

    http://jquery.malsup.com/cycle2/

    Could we update it?

  • I just created a copy of slideshow handler and view and made some small changes. It seems to work very well and the Javascript code in the view is no longer required. As soon as possible I will share the changes.

  • edited December 2014

    Here it is

    /apps/filemanager/views/slideshow2.html

    <div id="slideshow-{{name}}" class="cycle-slideshow crop"
        data-cycle-fx="fade"
        data-cycle-pause-on-hover="true"
         data-cycle-timeout="{{ timeout }}"
        {% if speed %} data-cycle-speed="{{ speed }}" {% end %}
        {% if ratio %} data-cycle-auto-height="{{ ratio }}" {% end %}
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        data-cycle-manual-fx="scrollHorz"
        data-cycle-manual-speed="200">
        <div id="prev" class="cycle-prev"></div>
        <div id="next" class="cycle-next"></div>
        <div class="cycle-overlay"></div>
    {% foreach files %}
        <img src="/{{ loop_value }}" alt="" {% if loop_index > 0 %}style="display: none"{% end %} />
    {% end %}
    </div>
    <br style="clear: both" />
    

    /apps/filemanager/handlers/slideshow2.php

    //instead of dimensions usage
     * To set the transition speed in milliseconds add a `speed`
     * parameter in the form `SPEED`
     *
     * To set the photo ratio, add a `ratio`
     * parameter in the form `WIDTH:HEIGH`, for example:
     *
     *     {! filemanager/slideshow?path=foldername&ratio=4:3&speed=1500 !}
    ...
    //instead of dimensions
    if (isset ($data['speed'])) {
        $speed = $data['speed'];
    }
    
    if (isset ($data['ratio'])) {
        $ratio = $data['ratio'];
    }
    ...
    //added the style
    $page->add_style ('/apps/filemanager/css/cycle2.css'); 
    // changed js 
    $page->add_script ('/apps/filemanager/js/jquery.cycle2.min.js'); 
    ...
    

    added in /apps/filemanager/js/ http://malsup.github.io/jquery.cycle2.js and http://malsup.github.io/min/jquery.cycle2.js.map

    added in /apps/filemanager/css/cycle2.css

    .slideshow-nav
    {
        position: absolute;
        right: 0;
    }
    .cycle-slideshow
    {
        width: 100%;
        min-width: 480px;
        /*max-width: 960px;*/
        /*margin: 10px auto;*/
        padding: 0;
        position: relative;
        background: url(/files/design/spinner.gif) 50% 50% no-repeat;
    }
    .cycle-slideshow IMG
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0;
        display: block;
    }
    .cycle-slideshow IMG:first-child
    {
        position: static;
        z-index: 100;
    }
    .cycle-overlay
    {
        /*font-family: tahoma, arial;*/
        position: absolute;
        right: 0;
        width: 30%;
        z-index: 600;
        background: black;
        color: white;
        padding: 15px;
        opacity: 0.5;
    }
    .cycle-prev, .cycle-next
    {
        position: absolute;
        top: 0;
        width: 30%;
        opacity: 0;
        filter: alpha(opacity=0);
        z-index: 800;
        height: 100%;
        cursor: pointer;
    }
    .cycle-prev
    {
        left: 0;
        background: url(/files/design/prev.png) 50% 80% no-repeat;
    }
    .cycle-next
    {
        right: 0;
        background: url(/files/design/next.png) 50% 80% no-repeat;
    }
    .cycle-prev:hover, .cycle-next:hover
    {
        opacity: 0.7;
        filter: alpha(opacity=70);
    }
    .disabled
    {
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    .cycle-paused:after
    {
        content: 'pause';
        color: white;
        background: black;
        padding: 10px;
        z-index: 500;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    

    added in /apps/filemanager/conf/embed.php

    [filemanager/slideshow2]
    
    label = "Images: Slideshow 2"
    icon = picture-o
    
    path[label] = Folder
    path[type] = select
    path[require] = "apps/filemanager/lib/Functions.php"
    path[callback] = "filemanager_list_folders"
    
    autoplay[label] = Auto-play
    autoplay[type] = select
    autoplay[require] = "apps/filemanager/lib/Functions.php"
    autoplay[callback] = "filemanager_yes_no"
    
    speed[label] = "Transition Speed (milliseconds)"
    speed[type] = text
    
    ratio[label] = "Ratio (format: WIDTH:HEIGHT)"
    ratio[type] = text
    

    added three transparent gif or png

    /files/design/spinner.gif

    /files/design/next.png

    /files/design/prev.png

    I hope I did not forget anything.

  • This sounds like it could be a good update to the default filemanager/slideshow handler itself. Any chance you can fork the Github repository and create a pull request with the changes?

  • I had to break the ice...

    You should have received a pull request.

Sign In or Register to comment.