Slideshow not resizing and not playing! and linkproblem

Any suggestion on how to get the id of the listitem in the slideshow view ?? And anything on the autoplay not working ?
 
I'm too looking for solution for this default re-sizing option since long time. Hope to get it sorted soon.
 
You can make a copy of the default bootstrap template in the slideshow and overwrite the default.php file with this code:

Code: 
<?php
/**
* Slideshow vizualization: bootstrap template
*
* @package        Joomla.Plugin
* @subpackage    Fabrik.visualization.slideshow
* @copyright    Copyright (C) 2005-2016  Media A-Team, Inc. - All rights reserved.
* @license        GNU/GPL http://www.gnu.org/copyleft/gpl.html
*/

// No direct access
defined('_JEXEC') or die('Restricted access');

$row = $this->row;
$params = json_decode($row->params);
$slideshow_width = $params->slideshow_viz_width;
$slideshow_height = $params->slideshow_viz_height;
?>
<style>

    .slick-slide
    {
        width: 400px;
    }


    .slick-prev:before, .slick-next:before {
        display:none;
        color:red !important;
    }

    .slider img {

        margin: 0 auto; /* it centers any block level element */
    }
</style>
<div id="<?php echo $this->containerId;?>" class="fabrik_visualization">
    <?php if ($this->params->get('show-title', 1)) :?>
    <h1>
        <?php echo $row->label;?>
    </h1>
    <?php endif;?>
    <?php echo $this->loadTemplate('filter'); ?>
    <div>
        <?php echo $row->intro_text;?>
    </div>
    <div class="slideshow" id="slideshow_viz_<?php echo $row->id; ?>">
        <div class="slider" style="width:<?php echo ($slideshow_width+20); ?>px;margin:auto">
            <?php
            foreach ($this->slideData as $slide):
                ?>
            <div class="image">
                <img width="<?php echo $slideshow_width; ?>" height="<?php echo $slideshow_height; ?>" src="<?php echo $slide['href']; ?>" />
                <figcaption style="width:<?php echo ($slideshow_width+20);?>px;text-align:center;";>
                    <?php echo $slide['caption']; ?>
                </figcaption>
            </div>
                <?php
            endforeach;
            ?>
        </div>

        <?php
        if ($this->params->get('slideshow_viz_thumbnails', false)):
            ?>
        <div class="slider-nav">
            <?php
            foreach ($this->slideData as $slide):
                ?>
            <div class="image">
                <img src="<?php echo $slide['thumbnail']; ?>" />
            </div>
            <?php
            endforeach;
            ?>
        </div>
        <?php
        endif;
        ?>
    </div>
</div>

I have made a copy of :
/www/plugins/fabrik_visualization/slideshow/views/slideshow/tmpl/bootstrap
to
/www/plugins/fabrik_visualization/slideshow/views/slideshow/tmpl/bootstrapnonav

I have also removed the navigation buttons in this new template.

This works for setting a size in the params of the slideshow - but autoplay still does not work. If you want the navigation back you can just copy the CSS part from the old default.php to this new default.php file.
 
Thank you so much. It really helped me.

If you have multiple images in Slide Visualization, and if you load the Page, you will find all images before initialisation of the visualization. This can be fixed by adding following code in <style>

Code: 
.slick-active {
visibility: visible;
}
.slider { display: none; }
.slider.slick-initialized { display: block; }

Hope this helps someone. Would appreciate, if this could be included in core file after due testing.
 
I finally had some time to work on this.

I committed a bunch of change, including:

You can set the 'Delay' to 0 to disable autoplay.

There's a new 'Custom Options' setting, where you can add your own Slick settings, documented here:

http://kenwheeler.github.io/slick/#settings

... expressed as a JSON object. So for example, I'm testing with ...

Code: 
{
  "cssEase":"cubic-bezier(0.830,-0.040,0.310,1.355)",
  "useTransform":true,
  "arrows":false
}

(note that I can't currently get the cssEase stuff to work, don't know why, I'll figure it out)

So those options sort out another issue from this thread, by setting "arrows":"false", which turns off display of the left/right arrows without having to customize the template.

You can do some fairly serious customization just with the custom options. For example, the 'responsive' setting lets you specify a whole different set of options to use at different media sizes.

And by building your own template, you can achieve pretty much anything you can see in the examples on the Slick page.

-- hugh
 
Last edited:
Oh, I also got rid of the nasty way it was showing all the images in a stack before the plugin initialized and collapsed them into the slideshow. That's done by just hiding the main wrapper div in the template (style="display:none"), then showing it in the plugin JS init. I'll do some more work on that at some point, to show some kind of loading animation, in a correctly sized wrapper div.

-- hugh
 
OK, @rbuelund, I added fabrik_view_url and fabrik_edit_url to the slide options.

So you can do this in your default.php ...

Code: 
<a target="_blank" href="<?php echo $slide['fabrik_view_url']; ?>"><img src="<?php echo $slide['href']; ?>" /></a>

If you need to modify that - I think your original code was changing form id 1 to 2 or something, with str_replace ... you can do that there as well.

-- hugh
 
I have just updated from Github. I think there is some leftover bug.

If I select bootstrap visualization template and load the Visualisation page, I do not see any Slick Visualization. But, if I append '?fabrikdebug=1' to the URL, it shows the Visualisation.

Secondly, I see ''AAAAAA' in the place of Slick Visualization.

Tested multiple times, at my development server. Requesting to check at your end.

BTW, the new CUSTOM option is simply awesome!!
 
Here you can see the problem. I have set height param to 100px and width to 178px, but the height is not even used in the template ? Also the caption is squeezed together in sted on one line.
 

Attachments

  • Squeezed.jpg
    Squeezed.jpg
    12.3 KB · Views: 347
This would work for the caption:
Code: 
<figcaption style="width:<?php echo $this->params->get('slideshow_viz_width', '400')?>px;margin:auto">
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 80 (members: 4, guests: 76)
    Back
    Top