Slideshow not resizing and not playing! and linkproblem

[troester]

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

Fabrik will run the non-min JS if "Allow Fabrik Debug"=DebugJS is set in Fabrik Options/Debugging.
So for testing you can just modify slideshow.js
BUT: this is hacking a core file, overridden by the next update

 

[sunnyjey]

Thank you. I was about to ask how to fire non-min JS.

I pasted the Wheel event code at the end of slideshow.js file and set the DebugJS to yes. But, I cannot see the Mouse scrolling. To be honest, I dont know much about JS, and mostly I'm doing wrong. Any hint will be highly appreciated.

 

[cheesegrits]

My laptop doesn't have a "scroll wheel" (or rather, it has an area of the touch pad that can function as one, but I can't stand having that enabled, as I can then never get a normal right click, my thumb keeps hitting the wrong area), so I went looking and finally found my old Microsoft wireless mouse (took about half an hour of going through boxes and boxes of old computer junk), so I can take a look.

-- hugh

 

[cheesegrits]

OK, I've added the mouse wheel scrolling to the JS.

Also moved CSS into a template.css file, and you can add a custom.css if you want to add/override without having to use a custom template.

Also figured out why none of the multiple slide settings were working (slidesToShow, etc), it was because I had "fade":true in the hard wired options in the JS. I've removed that, so you can now so things like {"slidesToShow":3,"slidesToScroll":2,"centerMode":true}.

I also added a case for the height being 0. I'm trying to figure out how I can pin either the width (leaving the height to vary) or pin the height (leaving the width to vary), to preserve aspect ratio. I don't see a good way to do it if you have a mix of portrait and landscape images, but I think that's just am issue with slide shows in general.

We're getting there.

@rbuelund - you'll probably need to tweak you custom template to remove most of the CSS. All the default.php now does is set the width.height on the img, as that has to be calculated on the fly, I can't stick it in a CSS file.

-- hugh

 

[rbuelund]

Works perfectly! thanks

 

[rbuelund]

A little suggestion could be to add a second template as default, where the link is added on the image - could call it bootstrap_link

 

[rbuelund]

Another suggestion would be to show the first image in the show at pageload. Right now the caption of the first image is shown on pageload, but the image itself is first shown after the delay time...

 

[troester]

Hi @rbuelund
are you familiar with GitHub? You could do a pull request.

 

[rbuelund]

I have worked with something on Github a long time ago, but cannot remember howto ?

 

[cheesegrits]

Github has a steep learning curve. I don't mind fixing this stuff.

Another suggestion would be to show the first image in the show at pageload. Right now the caption of the first image is shown on pageload, but the image itself is first shown after the delay time...

I'm intending to fix the loading. I'll probably add a separate loading div in the template (set to the configured width / height ... although that might be an approximation if one of those is 0), and either put a loading spinner or the first image from the slideshow in it, then hide that when I show the main div during JS init.

A little suggestion could be to add a second template as default, where the link is added on the image - could call it bootstrap_link

I think I'll just make that an option in the viz settings. "Link image to: Form / Details / Nothing"

-- hugh

 

[cheesegrits]

OK, that's done. There's now an option to "Links", with "none / form view / details view".

And I've added a loading div with a spinner.

I wound up having to add explicit options for "Loader width" and "Loader height" because it's essentially impossible to automatically set it to the same size as the main slider div, if either width or height are set to 0 for the slideshow itself, .

-- hugh

 

[sunnyjey]

Thank you so much for adding MouseWheel feature. I really appreciate the way you had gone beyond your scope to find the old Mouse to implement this feature.

I have been waiting for the proposed Subscription / Hourly Bill Module since long time, so that I can share the development cost. If it is ready, please share the link and other details.

A small suggestion from my side, I feel it makes more sense to just have text 'Loading' in place of 'Slideshow Loading' for animation, as the word 'Slideshow' might be inappropriate for certain cases, like ours. Secondly, the animation should be align at the center and not eccentrically relative to the Slideshow.

 

[cheesegrits]

I have been waiting for the proposed Subscription / Hourly Bill Module since long time, so that I can share the development cost. If it is ready, please share the link and other details.

You can always contact Robbie, she can invoice you.

A small suggestion from my side, I feel it makes more sense to just have text 'Loading' in place of 'Slideshow Loading' for animation, as the word 'Slideshow' might be inappropriate for certain cases, like ours

It's a language string (PLG_VISUALIZATION_SLIDESHOW_LOADING_MSG), so you can override it with whatever you want.

Secondly, the animation should be align at the center and not eccentrically relative to the Slideshow.

Feel free to play around with the CSS / template, see if you can get it to your liking. I'm happy to apply any changes you suggest that make it center better. I'm not a CSS guru, and I already spent waaaay too long already trying to get that centered. Centering things in CSS is ridiculously difficult.

-- hugh

 

[sunnyjey]

I was badly down with Flu. Resuming Work again. Will soon contact to Robbie as said. It would be great if we have simple inVoice system where we can generate hours of work and pay instantly on Fabrikar.com

I just found out Right and Left Arrows of Slideshow are not Visible since you created and moved custom.css . Looks like .slick-prev:before, .slick-next:before are not displaying Red arrow image (screenshot attached). Please have a look.