Topic Closed
juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

I'm going to release 2 new plugins shortly - Slider Factory and Background Composer.
Anyone who wants to test them is hereby invited. Feedback welcome!

Slider Factory 1.0b3   update: Slider Factory 1.0b4   update 2: Slider Factory 1.0b5

For gpEasy 4.5+

This plugin allows to build sliders with fully editable content sections. It utilizes Section Wrappers + arbitrary section types as slides. The Slider Factory section type, which must reside in a Wrapper, acts as the controller. Editing the Slider Factory section will bring up it's editor component where you can make your settings.
There are currently 4 transition types, 3 themes and a lot of other options to choose from. The Slider may have a fixed height but is responsive by default.
After installation you will find 2 new items in the the Section Manager's "Add" Tab: "Slider Factory" and "Slider Factory COMBO 4 × Text". Choose the latter to get started - it will add a complete Slider with 4 Text sections in it.
You can build sliders containing complex, multi-level wrapped sections, allowing you to even use grid layouts inside slides. Have fun!

( edit:/ Building a custom theme: I forgot to mention: Choosing the "custom" theme will apply styles that come from a separate stylesheet "SliderFactory_custom.css" in the addon folder. It resembles the default theme and can be edited safely. Also check out the file demo.html in the webfonts subdirectory. It will show all available icons of the used custom web font "SliderControl" - [x] show codes will give you the codes you need in SliderFactory_custom.css -> use the last 4 characters prefixed by a backslash in CSS like content:"\e824" )

( edit2/update:/ SliderFactory 1.0b4 comes with touchswipe support, an interactive in-page height setting drag-handle, some UI improverments and a few minor bug fixes )

( edit3/update:/ SliderFactory 1.0b5 comes with 3 additional transition effects, "innerFx"-classes for sub-sections, proportional height setting (also interactive) and ... some bug fixes )

See an online demonstration

 


 

Background Composer 1.0b1  update: Background Composer 1.0b2

For gpEasy 4.6b1+

Background Composer is a good companion of Slider Factory. It's purpose is to simplify the otherwise cumbersome process of defining backgrounds for sections.
Background Composer extends the Section Attributes Dialog (you get by clicking the Options icon in Manage Sections "Organize" Tab). It will help you to define backgrounds without being a CSS pro and select background-images via gpEasy's file manager "finder". Good for slides but can also be used for any other sections as well.

( edit/update:/ Background Composer 1.0b2 comes with better cross-browser support and improved short-hand declaration )

Screens


Slider Factory - Editor Component:


Slider Factory - a more complex Section Structure:


Background Composer:

 

Edited: 4 years ago#8310

a2exfr
242 Posts
25.8K Downloads
2 Themes
10 Plugins

Slider Factory Great!

Slick idea about  "controller" section! Give me inspiration to new plugins :)

seems inserting include file cause to controls disappear.  ( no after refreshing  page it's ok)

How supposed  to  use this part?

   if (slideWrapper.find(".blog_post").length > 0) {
        opts.slideSelector = ".blog_post";
        $slides = slideWrapper.find(opts.slideSelector);

including blog page as one slide?

 

p.s. have not found any bugs

p.p.s. (edit) one question not related to topic. I see on screens full-width section in  bootstrap Flathy theme. You change theme file  .container  to .container-fluid to make section full width?

Edited: 4 years ago#8314

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

including blog page as one slide?

It will make slides of your Simple Blog List items. Quite cool but currently an undocumented feature
because including the "Blog" page via File Include will break Section Management (I already reported the bug to Josh).

You can try it but do it on a separate page, which you can remove safely. Once the Blog page is included, you won't be able to save Section Manager changes on that page.

Build the following structure (all in one go - you won't be able to change it later):

Section Wrapper (will become .gpSlideWrapper)
 ├ Slider Factory
 └ File Include (the Blog page, not the gadgets!)
    └ Blog Post List items will become Slides (.gpSlide)

have not found any bugs

Try harder ;-)

Edited: 4 years ago#8315

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

I see on screens full-width section in  bootstrap Flathy theme.
You change theme file  .container  to .container-fluid to make section full width?

Hehe, no, I didn't.

Use ...

margin-top:-1em;
margin-left:calc((100vw - 100%)*-0.5);
margin-right:calc((100vw - 100%)*-0.5);

... on the Slider's Wrapper (as CSS class or inline style).

Note: Doesn't work on IE<9, Opera mini and Andriod Stock Browser (Android Chrome works). See Caniuse calc


edit:/ Also set ...

html {
max-width:100%;
overflow-x:hidden;
overflow-y:scroll;
}

... to prevent a horizontal page scrollbar in some browsers. Viewport width (vw) is calculated differently in different browsers.
Some will substract the vertical scrollbar width, others won't. Loving it >:(


edit2:/ This variant also works on Android Stock Browser 4.4+ (doesn't use multiplication):

margin-top:-1em;
position:relative;
left:50%;
width:100vw;
margin-left:-50vw;
left:0px\9; /* for IE<9 */

edit3:/ I added this declaration (without margin-top:-1em) to the stylesheet as class name "makeFullWidth" - can be applied using Section Attributes.
However, this only works with centered content and no sidebars.

Edited: 4 years ago#8316

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Download   Slider Factory 1.0b4   (see 1st post edit for details)

 

Edited: 4 years ago#8317

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Download  Background Composer 1.0b2  (see 1st post edit for details)

Edited: 4 years ago#8318

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects
FYI: Version 1.0b5 will support advanced inner element styling/animations by dynamic application of .gpSlide-in, .gpSlide-out and .gpSlide-active classes to the slides. The slides will also get a data-slide-number="n" attribute for easier CSS/JS targeting.
4 years ago#8319

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects

Download    Slider Factory 1.0b5    (see 1st post edit for details)

 

Edited: 4 years ago#8322

a2exfr
242 Posts
25.8K Downloads
2 Themes
10 Plugins

That's a nice piece of work.

Like it. *thumb_up*

4 years ago#8323

juergen
1.5K Posts
53.7K Downloads
16 Plugins
design, web development & visual effects
FYI: I will release Slider Factory 1.0 with gpEasy 4.6 stable. If we get working multi-nested Section Combos, Slider Factory will greatly benefit from it, because I could add some cool predefined Slider Combos with inner content sections - which is not everyone's cup of tea to build using Section Manager.
There are also some bugs to be fixed and I'm currently rewriting the core jQuery component to utilize Velocity.js instead of jQuery.animate because of superior performance and flexibility. For the meantime 1.0b5 is pretty usable. Stay tuned!
4 years ago#8335

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register