Jump to content

ProcessSlider - Image sliders for ProcessWire


mauricius

Recommended Posts

Yeah something might have changed in the last few months. As soon as I have a little bit of time I'm going to look into these recent issues with a new fresh PW 3 installation.

Thanks for the reply. Even the working slider and the missing element animation makes your module usable. :-)

I'm not a pro concerning php and web programming :-) Otherwise I would have investigated things a bit deeper. I found some remarks about this error in the web. The option was removed. So I had the idea to make your code stop writing this parameter.

Link to comment
Share on other sites

Yeah something might have changed in the last few months. As soon as I have a little bit of time I'm going to look into these recent issues with a new fresh PW 3 installation.

Which version of Jssor did you successfully use with ProcessSlider? So I could go back to this one in the meantime. Thanks Martin

Link to comment
Share on other sites

Which version of Jssor did you successfully use with ProcessSlider? So I could go back to this one in the meantime. Thanks Martin

I think that 19 is the latest working version. Yesterday evening I tried with the new 20 version, but I noticed immediately that it was not working. In fact they removed the possibility to define caption animations directly in the markup (http://www.jssor.com/development/slider-with-caption-jquery.html) in favor of the new Jssor Slider Maker available on the website.

At this point, with this new version, the module it's nearly useless. I could try to change how the module internally works, to reflect the new Jssor features, but I'm doubting that it will turn out as complete as the new Jssor Slider Maker.

Link to comment
Share on other sites

I am using the v20 and had to correct a typo where $JssorCaptionSlider was defined as $JssorCaptionSlideo in jssor.slider.min.js... dunno if this is part of what's causing others problems, but it sure wasted a good amount of my time!

Link to comment
Share on other sites

  • 4 weeks later...

Hi, this looks really great, however I have the same problem like hamzaalibhatti...

I installed all the modules, uploaded the jssor libs and when the first try didn't work, I did the following:

  1. ​Add a new field called "slider" type "Slider" (uppercase...don't know, if that's an issue here?)
  2. ​Add the field "slider" to my template "wines"
  3. ​Select the slider I created for the first test in the site using the template "wines"
  4. ​add "echo $page->get('slider'); to my template file wines.php
  5. ​Loading the site doesn't show any slider id.

What am I doing wrong? The whole code of my template wines is​ pretty basic...

<?php include('./_head.php'); // include header markup ?>

	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
			
		// output bodycopy
		echo $page->body; 
	//	$slider = $modules->get('MarkupSlider');
		echo $page->get('slider'); 
	//	echo $slider->getStyles($arrows = false, $bullets = false);
	//	echo $slider->render($page->get('weinbilder'), $includeScript = true, $options = array());

	?></div>
<!-- end content -->

	<div id='sidebar'><?php
	
		// rootParent is the parent page closest to the homepage
		// you can think of this as the "section" that the user is in
		// so we'll assign it to a $section variable for clarity
		$section = $page->rootParent; 
	
		// if there's more than 1 page in this section...
		if($section->hasChildren > 1) {
			// output sidebar navigation
			// see _init.php for the renderNavTree function
			renderNavTree($section);
		}

		// output sidebar text if the page has it
		echo $page->sidebar; 	
		
	?></div><!-- end sidebar -->

<?php include('./_foot.php'); // include footer markup ?>

Link to comment
Share on other sites

EDIT - It works now. Somehow. Really weird, I'll tell you what I did:
I was wondering, if there was something wrong with my template.php. So I added a new textfield to my template, inserted some random test text editing the site, then I echoed the following in my template.php:

echo $page->get('slider|mytextfield');

​And guess what? My slider ID showed up...
I removed the changes , and the slider ID kept loading. So I loaded the slider like described in the readme and removed the echoing of the slider ID and the slider actually loads.

But it doesn't behave like I want it to, but I problably didn't set up the slider corretly. I'll look into that again. It just shows me a combination off all the slides, no effects, nothing..
 

Link to comment
Share on other sites

  • 5 weeks later...

Hello, I have a problem with the class dropdown field in Process Slider because it does not show in the text editor meaning class dropdown field does not show any options. Do I have to transfer some extra files into ProcessSlider-master/builder/css folder to make class dropdown field show some options?

The problem with process slider.jpg

Edited by WebDeveloper2016
I sent accidentially message before it was finished
Link to comment
Share on other sites

Hello, I have a problem with the class dropdown field in Process Slider because it does not show in the text editor meaning class dropdown field does not show any options. Do I have to transfer some extra files into ProcessSlider-master/builder/css folder to make class dropdown field show some options?

The problem with process slider.jpg

Link to comment
Share on other sites

  • 2 months later...

hi Guys

I hope you can help me and tell if I did everything right:

I have in the header inside:

<?php
	$slider = $modules->get('MarkupSlider');
	echo $slider->getStyles();
?>



That where the slider there:

<div class="container">
	<div class="row">
			<?php
				echo $slider->render($page->get('processSlider'), $includeScript = true, $options = array());
			?>
	</div>
</div>



I have in the footer otherwise the slider starts even net:

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

Now the slider runs but without the transition set in Admin effects.

What should I do so I also effects the transition see?
As for example this: http://www.jssor.com/slideshow/x-float.html

Here I have integrated the slider: http://gregor.web-seo-consulting.eu/


Thanks for Help

Link to comment
Share on other sites

Unfortunately, as I said before, Jssor developers heavily changed the way to define animations in the markup, making the module almost useless. You can try with a previous version of the Jssor plugin. Sadly I don't have much time to work on a new version of the module and probably I would need to change the underlying plugin to something else. 

Link to comment
Share on other sites

  • 2 weeks later...

Hello,
I am new to this forum and newbie PW-user. Like some users before, I get an error message when calling the slider on my page.

("...Unknown slider...in MarkupSlider.module line 215....")

Now I found, that even before (without using any of my code), when creating a new "slider1" in the admin (=>Setup=>Process Slider), by clicking "Save & Test", also an error-message appears in the "Test Result"-Tab: 

"Error: Uncaught Error: Call to a member function generateMarkup() on null in E:\xampp\htdocs\myPWsite\site\assets\cache\FileCompiler\site\modules\ProcessSlider\MarkupSlider.module:240", followed by some other lines ( "....#1...#8... "). I already tried jsson v.19, but with the same result.

I like this wonderful PW and would like to use this slider, so it would be great to get some ideas on this issue.

Thx!

Link to comment
Share on other sites

Welcome to the Forums @scaaty !

As you can see by reading @mauricius's post above, he will probably not update the module to sort out the issues with it, however, in ProcessWire it is easy to integrate any sliders into your templates. The very simplest form of this integration is using repeaters for storing the data of the slides and using a free slider that suits your needs, such us: lightSlider, Swiper, etc...

Here is a related post to get you started (this example is even simpler than using Repeaters, it just uses images uploaded to a page, but it is just enough to showcase the basics):

 

 

Edited by szabesz
typos
  • Like 3
Link to comment
Share on other sites

Hi szabesz,

Thanks a lot for your Welcome and your hints!

I already use other sliders (e.g. flexslider) with PW. The big advantage of mauricius' solution is, that most of the design and configuration can be done in the PW-admin without separate tools and just a few lines of code. I will follow your recommendation and give MFSlider a try, but nevertheless also carry on to find out the reason for the errors and to get processslider running.

I would like to ask people that were able to install and use processslider successfully, to post their environment and versions of PW, jssor, etx., so that i can verify the installations. Thanks!

 


 

 

Link to comment
Share on other sites

welcome scaaty,

i would also recommend to create your own slider with repeaters. they look great now in pw3, what you seem to be using. that's the nice thing with processwire: often you are faster to develop your own solution than looking for plugins, comparing their features, checking compatibility and so on. just throw together some fields, create the markup and you're done and have a 100% customizable solution :)

have fun!

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

hi,
I'm tryng to insert slider into my template without success...

...
<div class="col-12">
<div class="animated bounceInDown" style="animation-duration: 3.5s;"><img class="img-responsive" src="<?php echo $slider->render($page->get('slider')); ?>" /></div>
...

can you help me??

Link to comment
Share on other sites

17 hours ago, angelo, italy said:

<div class="col-12">
<div class="animated bounceInDown" style="animation-duration: 3.5s;"><img class="img-responsive" src="<?php echo $slider->render($page->get('slider')); ?>" /></div>
...

 

I understood my issue and follow instructions in the forum. Now it works. Thanks

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...