• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Slideshow not resizing and not playing! and linkproblem

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.
 
Try setting adaptiveHeight to true in the options ...

Code:
{
   "adaptiveHeight":true
}

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

-- hugh
 
I have done that, but also had to change this in the default.php:
Code:
    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 */
    }
 
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
 
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
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;

    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>
 
This is better:
Code:
  figure.image {
        text-align: center;
        font-style: italic;
        font-size: small;
        text-indent: 0;
        margin: 0em;
        padding: 0em;
    }
 
Right now this is what I have set in js:
Code:
        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
 
I think actually it makes no difference if adaptiveHeight is set to true or false - it still works and is responsive.
 
@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.

Code:
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
 
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 ?
 
Right now this is what I have set in js:
Code:
        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
 
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
 
I have not tried it, but where have you placed the javasript code ??:
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');
  }
}));
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top