Pages and Repeaters for Layerslider

[Joss]

Not so much a question but just seeing if what I am planning to do makes sense.

I need to implement Layerslider on a site. This is a responsive, layered slider with parralax effects and stuff.

Each slide can be made up of various images and text, each element being given its own style (which has to be inline) and data info. This is for things like position, transitions, and other stuff.

So, what I thought I would do is make up a repeater for each slide element where you can chose the type of element (image or P) and then add the style and data info as required.

The repeater would then be added to a page template - each page being a slide.

So, under a parent, I would have a pile of pages representing slides, and each page has a repeater that lists the elements of each slide.

I would then either just call in the pages directly into the template (just listing through them) or, I would add a page field to whichever template they are going to appear in, and you can choose the slides (er, pages) using ASM.

Does that sound about right?

Joss

[Craig]

Sounds sensible to me

[Joss]

Oh Good

It was one of those things that I stared at just a little too long and my head went out of focus .... without any wine as well!

[Joss]

And yes yes yes!

The man is cooking on gas!!!!

Got it working.... well, so far. Once I finish I will bung together a quick tutorial together because this is a really complicated JQuery plugin (as far as sliders go) and it might be useful for people to know how to weld it together with PW.

[lisandi]

Hi Joss

could you post a link to your Layerslider Tutorial you mentioned above, please

Thanks

Andi

[Joss]

Ah - er ....

Well, since the site never went live, I never finished it. And I have moved over to using Adobe Edge Animate for clever stuff now.

However, with any thing of this sort, it is a question of workflow. So, with this particular plugin (if I remember right) each slide has several fixed element types - image, text, link and so on. A slide is made up of a group of these elements so that each slide is animated.

What I did was create a repeater that offered the alternatives - text or image or whatever.

It also had fields for the other information the layerslide needed - slide Class, Data Ls, Slide Style

And lastly, it had fields for the navigation arrows (including arrow image and all their classes) and for a link.

So, that was all in a repeater. 

You slideshow was made up of however many of these complex slides you wanted to have.

Bear in mind, this was not exactly user friendly. Although it meant slides could be made up using the admin, the data being input could be rather complicated. It needs all the input for offset, delay, easing in and so on, plus all the style info. Now, I just had those as fields that I pasted the who lot into, but you could create lots of fields, one for each of the needed values:

offsetxin:0;

durationin:2000;

delayin:1500;

easingin:easeOutElastic;

rotatexin:-90;

ransformoriginin:50%

top 0;

offsetxout:-200;

durationout:1000;

I never went that far with it.

The actual template was pretty easy - just use all those values in a template for a slide and then loop through the slides. I think I may have done something like seeing if there was an image, and if there was, ignore the text field, so that the type of element was dictated by what you had filled in, but that is just fine tuning stuff.

Does that help?

[lisandi]

Hi Josh

we will see how far it will help or if we better switch - convince customers - to use something else instead, but thanks a lot for the fast answer!

Andi

[Joss]

Hi Andi

It really depends what you are looking for, to be honest, and what your client wants to get out of it - that will inform you as to what level of interaction you want to give them with the slide show administration, if any at all!

Layerslider is pretty flexible, but I haven't looked at it for ages - there may be better alternatives out there or a much newer version.

At least with PW you can create your own interface to it!