Do you need a nice (responsive) image slider for your WebsiteBaker website? Now there is the minislider pagemodule for free. Visit www.dev4me.nl.

Help

Installing the snippet and the admintool.

Both the snippet and the admintool are installed using a single installation file. Download the package from the download page, and upload the downloaded file using the addons page of your WebsiteBaker website.

 

Defining Slider groups

The admintool will allow you to create multiple groups of images that can be used in the template. (Please note: you can only have one CaptionSlider in a page!)

Every group has his own properties for width/height the delay between images and the animation speed of the caption slider.

Uploading images and text

The admintool installation procedure will create a default groupame that can be used a the default group.
Clicking the Add Slide button will present you with a screen where you can upload your image, and add your text into the default WYSIWYG editor.

An option is given to resize the image on upload, but it is advised to upload your images in the correct size and not use this option. Use your favorite image editor to create your images in the correct format and the optimal quality.

The text is added using a WYSIWYG editor. By default the snippet will create a CSS rule for white textcolor. If you need a different default color, you can override this setting in your template CSS file, or by adding a color using the WYSIWYG editor.
 

Using the snippet in your template

The snippet uses the jQuery library that is included in WebsiteBaker since version 2.8.
To make this work you should add the jQuery library to your template by adding the following line in the head section:
<script type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js"></script>

When this snippet is replacing an existing image in your template you will probably already have a div block that will place the image in the correct position.
If you do not have created a block element for an image it is advised to do this before adding the snippet to your template.

When the area is correctly defined, the only thing to do is to add the line <?php showslider('capslider'); ?> within the created div.
The snippet will use the jQuery library to add some css rules to the current browser document without the need to add any extra CSS to your template.
Add your additional css within the class .caption to change the default behavour.

If the CaptionSlider should not be used on every page (i.e. only on your homepage) you can tell the snippet by adding a list of page-id's where the slider should be included.
To do this, use a second parameter with a comma-seperated list of page-id's like this exaple: <?php showslider( 'capslider' , '1,5,34' ); ?>. Now the images will only be showed on pages 1, 5 and 34.

Known issues

1) You can only use one Caption Slider at a time. If you want to use multiple sliders, you will need to add the optional pages list to them. This way you can have different images and text on seperate pages.
The next version will probably be able to use multiple Caption Sliders on a single page.

2) The images will be displayed in the order of uploading them in the admin tool. There is no sorting option yet.
Hopefully this will be added in a future version too.

[close]

Please note

This is an old module that was created in 2009!

There is a good chance this module will not work on current or future WebsiteBaker versions anymore.

There is a much more simple and better solution available now.

Please have a look at the MiniSlider module.

 

If you still want to use this module, please click on [close] and continue on this website.