Slideshow not resizing and not playing! and linkproblem

[cheesegrits]

Yeah, I was about to start looking at where to set the width and height. It was actually hard coded in the template to 400, so I replaced that with the configured width, but I guess I need to work out what needs to be set and what doesn't.

 

[cheesegrits]

Try setting adaptiveHeight to true in the options ...

{
   "adaptiveHeight":true
}

I'm still trying to figure out how this all hangs together.

-- hugh

 

[rbuelund]

I have done that, but also had to change this in the default.php:

    figure.image {
        text-align: center;
        font-style: italic;
        font-size: small;
        text-indent: 0;
        margin: 0.5em;
        padding: 0.5em;
    }

    .slick-slide
    {
        width: <?php echo $this->params->get('slideshow_viz_width', '400')?>px;
        heigth: <?php echo $this->params->get('slideshow_viz_height', '400')?>px;
    }

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

    .slider img {
        height:  <?php echo $this->params->get('slideshow_viz_height', '400')?>px;
        width: auto;
        margin: 0 auto; /* it centers any block level element */
    }

 

[rbuelund]

But it would also be nice to be able to set it to being responsive.

 

[cheesegrits]

I've run out of time for working on this today, I'll have to pick it up again tomorrow or Monday.

Meanwhile, if you want to carry on experimenting, I can include any of your findings in the plugin when I come back to it.

-- hugh

 

[rbuelund]

Well - I think the attached default.php works! If you set the height and width in the params, then the size is fixed. If you set the with to 0 and the height to eg 200px, then the image is responsive with a max-height of 200 px

?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;

    if($this->params->get('slideshow_viz_width', '400') == 0)
    {
        $width = 'width:auto;';
        $height = 'max-height:'. $this->params->get('slideshow_viz_height', '400').'px;';
    }
else
    {
        $width = 'width:'.$this->params->get('slideshow_viz_width', '400').'px;';
        $height = 'height:'. $this->params->get('slideshow_viz_height', '400').'px;';
}
?>

<style>


    figure.image {
        text-align: center;
        font-style: italic;
        font-size: small;
        text-indent: 0;
        margin: 0.5em;
        padding: 0.5em;
    }

    .slick-slide
    {
       width:auto;
       height:auto;
    }

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

    .slider img {
        <?php echo $height; ?>
        <?php echo $width; ?>
        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; ?>" style="display:none">
        <div class="slider" >
            <?php
            foreach ($this->slideData as $slide):
                ?>
                <figure class="image">
                    <a target="_blank" href="<?php echo $slide['fabrik_view_url']; ?>"><img src="<?php echo $slide['href']; ?>" /></a>
                    <figcaption style="width:100%;margin:auto">
                        <?php echo $slide['caption']; ?>
                    </figcaption>
                </figure>
            <?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>

 

[rbuelund]

This is better:

  figure.image {
        text-align: center;
        font-style: italic;
        font-size: small;
        text-indent: 0;
        margin: 0em;
        padding: 0em;
    }

 

[rbuelund]

..and a little change to the caption:

    figcaption {
        width: 100%;
        display: inline-block;
        margin:auto;
    }

 

[cheesegrits]

Is adaptiveHeight required with either of those width/height settings?

-- hugh

 

[rbuelund]

Right now this is what I have set in js:

        var opts = {
            controller: true,
            delay: parseInt(this.options.slideshow_delay, 10),
            duration: parseInt(this.options.slideshow_duration, 10),
            //height: parseInt(this.options.slideshow_height, 10),
            //width: parseInt(this.options.slideshow_width, 10),
            //hu: Fabrik.liveSite,
            hu: this.options.liveSite,
            thumbnails: this.options.slideshow_thumbnails,
            adaptiveHeight:false,
            captions: this.options.slideshow_captions
        };

That works with the template file above

 

[rbuelund]

I think actually it makes no difference if adaptiveHeight is set to true or false - it still works and is responsive.

 

[sunnyjey]

@rbuelund Your Modified default.php works but responsive till the 350px. If I want to have bigger size, say 800px height, the half of the photo is not visible. Do you have any idea why ?

Secondly, Im trying to add MouseWheel function to JS file to scroll images using Mouse Wheel, but somehow it is not working.

function mouseWheel($slider) {
    $(window).on('wheel', { $slider: $slider }, mouseWheelHandler)
}
function mouseWheelHandler(event) {
    event.preventDefault()
    const $slider = event.data.$slider
    const delta = event.originalEvent.deltaY
    if(delta > 0) {
        $slider.slick('slickPrev')
    }
    else {
        $slider.slick('slickNext')
    }
}

Ref: https://codepen.io/Grawl/pen/mMLQQb

 

[rbuelund]

I have no problem eg setting the height to 500px - it still works - shows the full image and is responsive. Are you shure that you have not got a surroundig div in your template that is causing the problem ?

 

[cheesegrits]

Right now this is what I have set in js:

        var opts = {
            controller: true,
            delay: parseInt(this.options.slideshow_delay, 10),
            duration: parseInt(this.options.slideshow_duration, 10),
            //height: parseInt(this.options.slideshow_height, 10),
            //width: parseInt(this.options.slideshow_width, 10),
            //hu: Fabrik.liveSite,
            hu: this.options.liveSite,
            thumbnails: this.options.slideshow_thumbnails,
            adaptiveHeight:false,
            captions: this.options.slideshow_captions
        };

That works with the template file above

Just FYI, those 'opts' aren't used, that's some cruft left over from the original slideshow2 version. I just removed them. I'd just left them in there as a remoinder of what the various options were called, for building the new slickOptions.

-- hugh

 

[cheesegrits]

OBTW, the only reason I have the prev/next arrows set to 'red' is that their default style is transparent and light grey, which makes them pretty much invisible in the site templates I'm using. If anyone want to come up with a better style for those, I'll merge it.

I think I'm also going to extract the inline CSS in the default.php into a separate CSS file, which can be overridden with a custom.css.

-- hugh

 

[rbuelund]

Ahh ok But then it works without adaptiveHeight set.

 

[sunnyjey]

I have no problem eg setting the height to 500px - it still works - shows the full image and is responsive. Are you shure that you have not got a surroundig div in your template that is causing the problem ?

Okay. Thanks.

Any hint to get MouseScroll in Slick. Have tried, but couldnt figure out.

https://webisora.com/blog/implementing-mouse-scroll-slick-js/

 

[rbuelund]

I have not tried it, but where have you placed the javasript code ??:

const slider = jQuery(".slider-item");
slider
  .slick({
    dots: true
  });

//Implementing navigation of slides using mouse scroll
slider.on('wheel', (function(e) {
  e.preventDefault();

  if (e.originalEvent.deltaY < 0) {
    jQuery(this).slick('slickNext');
  } else {
    jQuery(this).slick('slickPrev');
  }
}));

 

[sunnyjey]

plugins/fabrik_visualization/slideshow/slideshow.js

 

[rbuelund]

Ok.. as written before in the thread you have to generate the - min.js to make it work