Jump to content

ProcessSlider - Image sliders for ProcessWire


mauricius

Recommended Posts

ProcessSlider Module (alpha version)

Repository

https://github.com/mauricius/ProcessSlider

Introduction 
 
Like many of you, I came to ProcessWire from Wordpress and immediately I fell in love with its power and its clean syntax. I have to say that PW has become my default choice for building websites. However there is only one thing that me and my clients miss from WordPress and is the ability to visually build image sliders through plugins (Nivo, Revolution Slider, LayerSlider, just to name a few). So I decided to create a module for this purpose. ProcessSlider essentialy is an editor for the wonderful Jssor plugin (http://www.jssor.com/) which is absolutely free. The module creates a new page under the Setup menu which allows users to easily add image sliders on the site using an intuitive visual editor. To each slider you can easily add images and other custom and animate them using the transition effects provided by the Jssor slider.
 
The ProcessSlider module in reality is composed by three different modules:

  • ProcessSlider: the main module
  • InputfieldSlider/FieldtypeSlide: allows the user to use an existing slider inside a page
  • MarkupSlider: converts the slider into Jssor compatible markup and optionally provides the necessary initialization script

Features

  • Custom slider size
  • Drag and Drop interface
  • Move and resize elements
  • Slides background with images from existing PW pages
  • Slider Preview (with the provided MarkupSlider module)
  • Predefined style classes for Elements
  • Add or remove Slides
  • Add or remove elements
  • Change slide order visually
  • Jssor skins and bullets support
  • Visual Timeline
  • Optional responsive/fullwidth slider
  • Predefined elements: Images, Text, Links, Image as link, Div blocks, Youtube Videos
  • Animation Options (In and Out): Animation type, Delay, Duration

The editor is built with Vue.js+Webpack and uses jQuery for D&D and resize functionalities.
 
Release
 
I'm going to release the module in a couple of weeks, there are still some minor tweaks and improvements that I would like to add. 
 
Demo Screencast (be sure to watch it at least at 720p)


 
I hope it will be helpful to the community and I would be glad to get feedback or suggestions for improvement! Please also consider that it is my first PW module, so probably I'm missing some best practices, hopefully the most experienced developers can throw me some hints  ;)
  • Like 23
Link to comment
Share on other sites

Welcome @mauricius.

This looks really awesome!  ^-^

PS: Best way to get early feedback is to publish a alpha- or beta-state github repo and post the link here.

EDIT:

PPS: yuhu, I saw & liked it first! :)

Edited by horst
  • Like 2
Link to comment
Share on other sites

Interesting to see one of the new reactive JS thingies being used (Vue.js) :) I guess you could write a bit about how you decided to pick Vue.js and how it was to get into and work with.

Sure! I'm definetly going to write about it in a future blog post. It's my first project using Vue.js and I was very impressed with its potential, however the community is still quite small, so I had to figure out many things just by myself, especially regarding the implementation of sub-components, nevertheless I'm happy with the result. I'm planning to use it again in the future.

Also thanks everyone for the warm welcome and positive reactions.

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Hi mauricius,

Tried to install this on a PW 2.5.25 dev site and got the following error

Fatal error: Class ProcessSlider contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (ConfigurableModule::getModuleConfigInputfields) in F:\xampp\htdocs\dev\site\modules\MarkupSlider\ProcessSlider.module on line 648

I didn't have time to investigate further. 

Thanks.

Link to comment
Share on other sites

Hi mauricius,

Tried to install this on a PW 2.5.25 dev site and got the following error

Fatal error: Class ProcessSlider contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (ConfigurableModule::getModuleConfigInputfields) in F:\xampp\htdocs\dev\site\modules\MarkupSlider\ProcessSlider.module on line 648

I didn't have time to investigate further. 

Thanks.

Hi kongondo,

I think the error is relative to the new module configuration introduced in ProcessWire 2.5.5 (https://processwire.com/blog/posts/new-module-configuration-options/) which is used by ProcessSlider and ProcessMarkup.

Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

Wherever I insterted the code on template file. the slider appears top of the table (navigation menu)
 

<div id="container">
<?php
$slider = $modules->get('MarkupSlider');
echo $slider->render($page->get('Slider'), $includeScript = true, $options = array());
;?>
</div>

post-3932-0-78080400-1447508055_thumb.pn

Link to comment
Share on other sites

  • 4 weeks later...

implement a process slider module and set the field slider in template when place the code in template file its throw the error unknown slider here is the code i placed in template file  

$slider = $modules->get('MarkupSlider');

echo $slider->getStyles($arrows = false, $bullets = false);

echo $slider->render($page->get('Slider1'), $includeScript = true, $options = array()); 

post-3959-0-44133100-1449676419_thumb.pn

Link to comment
Share on other sites

@hamzaalibhatti

Did you install all the three modules that come with this module? i.e.

  • ProcessSlider: the main module
  • InputfieldSlider/FieldtypeSlide: allows the user to use an existing slider inside a page
  • MarkupSlider: converts the slider into Jssor compatible markup and optionally provides the necessary initialization script
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...