netefx internet services
Ihre Daten
Our silverstripe modules:

NetefxValidator
Advanced form validation

silverstripe flexslider
A slider module for silverstripe 3
netefx internet services
XHTML 1.0 Validation passed

silverstripe-flexslider (1.0.1)

silverstripe-flexslider is a module for Silverstripe 3.0 that uses the FlexSlider 2 library to create sliders. Sliders can be created from within the cms or by instantiating a new FlexSlider object in php.

1.0.1 bugfixes, added some css reset that is used in the simple theme, updated the flexslider library to the latest version
1.0.0 initial version

Requirements

- Silverstripe 3.0

flexslider in SS3 simple theme
flexslider in a clean SS3 install using the simple theme
Download

Download on github

Comments

For comments, suggestions, and asking for features please use this forum thread.

Documentation

Installation

We start with a clean installation of silverstripe 3.0.2 using the "simple" theme
After downloading the module as a zip file from github, make sure to rename the folder to "flexslider"
Add the FlexSliderExtension to your "_config.php"
Run /dev/build?flush=1

Installation finished

Creating a Slider in the cms

Now there is a new section in the cms to add sliders (which is build using modeladmin)
When you create a new slider in the cms, you can configure many option in the cms, e.g. direction and autoplay.
Then you add slides to the slider. In this example our slider has 4 slides.
When you add a slide, it must have an image assigned. Title, description and link are optional. Make sure that "enabled" is checked. Otherwise this slide will not be shown.
To output this Slider you need to add $FlexSlider(params) to your template file.

This needs some explanation:

$FlexSlider(1,800,470) means:
- Show the slider with the id=1
- Crop-resize all images to 800x470

The problem is, that the slider will not look good, if the images have not the same aspect ratio. And you do not know if the admin will upload just images with the same aspect ratio.

That is why we are crop-resizing all images. By resizing the images we can also make sure, that the slider will not slide 2MB image files.

Maybe you need to play a little bit with the values for width and height to get a good result.

But setting width to 800 and height to 470 in this example has no effect on the slider itself. The slider will use all available space (width=100%). So thats why we added a wrapping div with a width of 60%.

The cool thing is, that the flexslider is perfectly responsive (which fits perfectly to the simple theme)

Using shortcodes

The administrator can add sliders to pages himself with a shortcode.
Now we have the same slider twice on the homepage :) (both functional).

As you can see the one that was added with a shortcode has a style="width: 400px". So unlike the other one, it doesn´t scale.
The reason i did that is because the admin is usually not able to specify a width in the wysiwyg himself. But this behaviour might change in the next version, because this slider has now lost its responsiveness.

Creating a slider from existing DataLists

coming soon

Changing the layout of the slider

coming soon