FractionSlider

Classification

fp_fractionslider

Version

main

Language

en, de

Description

Professional Slider-Plugin. Can be used with the "jQuery-FractionSlider", the "Professional jQuery Content Slider Plugin - Slider Pro" or the "Slider revolution".

Keywords

slider,fraction,professional

Copyright

2025

Author

Kurt Gusbeth

License

This document is published under the Open Content License available from https://www.opencontent.org/opl.shtml

Rendered

Mon, 28 Apr 2025 14:44:05 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.

Table of Contents

Introduction

What does it do?

You can use this extension to create professional sliders, but it is not an easy extension and it is not up to date! It can be used with the "jQuery-FractionSlider", the "Professional jQuery Content Slider Plugin - Slider Pro" or the "Slider revolution". Note: you need to download one of this jQuery plugins in order to use this extension! You will find an installation guide in each HTML-template in typo3conf/ext/fp_fractionslider/Resources/Private/Templates/Slide/ My recommendation is to use the plugin "Professional jQuery Content Slider Plugin - Slider Pro". The extension offers a list- and single-view-page too.

Screenshots

• Demos:

  jQuery-FractionSlider: https://www.quizpalme.de/foto-galerien/die-besten-museen

  Professional jQuery Content Slider Plugin - Slider Pro: https://www.quizpalme.de/foto-galerien/die-besten-aquarien

• Some visual impressions:

Image 1: In the backend

Image 2: In the backend

Image 3: jQuery-FractionSlider

Image 4: Professional jQuery Content Slider Plugin - Slider Pro

Contact

• You can write me a message on my homepage:

www.quizpalme.de/kontakt

Thanks to ...

I have spent many hours for this extension. I hope you like it. It is sponsored by www.fixpunkt.com

Thanks to the fixpunkt für digitales GmbH, Bonn for giving me the possibility to realize this extension and share it with the TYPO3 community.

Configuration

• Here you find the TypoScript reference and the configuration for the slider.

TypoScript-Reference

• Here you can make some settings.

plugin.tx_fpfractionslider_pi1.view {
  templateRootPath = fileadmin/Resources/Private/Slider/Templates/
  partialRootPath = fileadmin/Resources/Private/Slider/Partials/
  layoutRootPath = fileadmin/Resources/Private/Slider/Layouts/
}

plugin.tx_fpfractionslider.persistence.storagePid >
plugin.tx_fpfractionslider.persistence.storagePid = 603
plugin.tx_fpfractionslider.settings.limit = 10
plugin.tx_fpfractionslider.settings.fractionslider.timeout = 3000

Page TSconfig

• You can use the Page TSconfig to hide unused fields.

Example

Here an example to hide some fields:

TCEFORM.tx_fpfractionslider_domain_model_part.pro.disabled = 1
TCEFORM.tx_fpfractionslider_domain_model_part.revolution.disabled = 1
TCEFORM.tx_fpfractionslider_domain_model_part.cettcontent.disabled = 1
TCEFORM.tx_fpfractionslider_domain_model_part.cssstyles.disabled = 1
TCEFORM.tx_fpfractionslider_domain_model_slide.color.disabled = 1
TCEFORM.tx_fpfractionslider_domain_model_slide.subtitle.disabled = 1

Copied!

Image: you find this on the Ressources tab of a page

You have to use the table-name and column-name. The column-names for the different effects are: fraction, pro and revolution.

Additional

• You can add an additional slide, if you want. Why? If you don´t want to show all slides, you can add an additional slide to your template. There you could set a link to a list-view-page with all slides/news.

<div class="sp-thumbnail">
	<div class="sp-thumbnail-text">
		<div class="sp-thumbnail-title">{settings.more.text1}</div>
		<f:if condition="{settings.more.text2} != ''"><div class="sp-thumbnail-description">{settings.more.text2}</div></f:if>
	</div>
</div>

<div class="sp-slide">
	<f:image src="fileadmin/your/image.jpg" alt="" class="sp-image" />
	<p class="sp-caption sp-white sp-padding"
		data-horizontal="40" data-vertical="40" data-position="bottomRight"
		data-show-transition="left" data-hide-transition="up" data-show-delay="500" data-hide-delay="100">
			{settings.more.text3}
			<f:link.page pageUid="{settings.listId}">{settings.more.textlink}</f:link.page>
	</p>
</div>

ChangeLog

• Here you find all the changes through the versions.

Sitemap