Home » Extensions » Slider
NoNumber!

Joomla!® Websites & Extensions
development  -  support  -  consultancy

Slider
make content slides in Joomla!
Joomla! 1.5
Joomla! 1.7
Joomla! 2.5
plugin
version 1.8.5
Download

With Slider you can make content slides anywhere in Joomla!

If you use Slider, please post a rating and a review at the Joomla! Extensions Directory.

Description

With Slider you can make content slides anywhere in Joomla!

Description

This text right here is placed in slides through Slider.

You can use the editor button to place an example slide block. The syntax simply looks like:
{slide=Slide Title 1}
Your text...
{slide=Slide Title 2}
Your text...
{/slides}

Slide Links

To make links to certain slides in your page, you can use Slide Links, like:
{slidelink=Slide Title 2}Link text{/slidelink}
This is a slidelink to the Extra control slide: Extra control

Styling

To add an extra class to a slide (for styling purposes), you can use:
{slide=Slide Title 1|myclass}

Sliders stylesheet comes with styling for the classes blue, green and grey. (See the slides below for examples)

It's best to overrule styles by adding definitions to your templates stylesheet, so your custom styles don't get overwritten when updating Slider in the future.

There are also several styling options in the Slider plugin settings.

Extra control

Active Slide

By default, the first slide will be the active one.

You can set the first slide to start closed (so all slides start closed) by adding 'closed' to the first slide tag, like:
{slide=Slide Title 1|closed}

You can set a different slide to open on default by adding 'active' to that slide tag, like:
{slide=Slide Title 2|active}

So if you want a slide 'My Cool Stuff' with style 'green' and active by default:
{slide=My Cool Stuff|green|active}

Some Slide

...

My Cool Stuff

...

Another Slide

...

Active slide via url

Via hash tag (#)

Since version 1.8.0 the alias (url safe name) of the slide is added to the url once you click on a slide. So if you click on the slide "Description", the url will look like:

some/url#description

You can use this url to link directly to this slide.

This is an option which can be switched off. So if you don't like this feature, just go to the Slider system plugin settings to change it.

Via url variable (?/&)

Alternatively you can force a slide to open via a variable in the url, like:

index.php?option=com_content&view=article&id=123&slide=Tab Title 2

content/my-article?slide=slidetitle2

With this variable method, it also works if you use different writing styles of the title, like lower case, no spaces, no special characters, number of the slide (1, 2, etc), number of the set + number of the slide (1-1, 1-2, etc).
So if your slides title is "It's cool!", then you can use: slide=itscool
If this is the 3rd slide of the 2nd set, you can also use: slide=3-2

Page scrolling

You can set Slider up to automatically scroll to the top of the slide set or individual slide when you click on a slide to open it.

You can overrule this behavior per slide by adding the |noslide attribute:

{slide=Slide Title|noscroll}

If you have no page scrolling setup (or page scrolling to top of the slide set), you can overrule that per slide by adding the |scroll attribute. The page will then scroll to the top of that slide.

{slide=Slide Title|scroll}

Indentation

By default the slides title and content are both full width. You can change this in the Slider system plugin settings to:

  • None (default)
  • Indent Title
  • Indent Content
  • Indent Both

You can also overrule this indentation per slide with the classes noindent, indenttitle, indentcontent, and indent like:
{slide=Indented Title|indenttitle}
...
{slide=Indented Content|indentcontent}
...
{slide=Indented Title & Content|indent}
...
{/slides}

See the slides below for examples...

Blue Slide

This is just to show you you can have different styles per slide. The syntax for this slide is:
{slide=Blue Slide|blue}

See for more information: Extra control

Green Slide

This is just to show you you can have different styles per slide. The syntax for this slide is:
{slide=Blue Slide|green}

See for more information: Extra control

Grey Slide

This is just to show you you can have different styles per slide. The syntax for this slide is:
{slide=Blue Slide|grey}

See for more information: Extra control

Indented Title

This is just to show you you can set the indentation per slide. The syntax for this slide is:
{slide=Indented Title|indenttitle}

See for more information: Extra control

Indented Content

This is just to show you you can set the indentation per slide. The syntax for this slide is:
{slide=Indented Content|indentcontent}

See for more information: Extra control

Indented Title & Content + Grey style

This is just to show you you can set the indentation per slide. The syntax for this slide is:
{slide=Indented Title & Content + Grey style|indent|grey}

See for more information: Extra control

Rounded corners?

The slides are styled through CSS. This means you can control the styling yourself (overrule styles through your templates stylesheet).

The slides have rounded corners done through CSS3. This means newer browsers will show rounded corners. But IE8 and earlier (CSS3 not supported) will show straight corners.

Mootools Compatibility

Slider uses the Joomla core mootools script. Some templates and extensions use there own javascript library which can cause conflicts with the core mootools script.

There is an option in the Slider plugin to not load the core mootools script, which might help resolving these conflicts.

Tabs?

Also take a look at Tabber to make content tabs.

Nesting slides

You can nest slides by giving the nested slide set extra names/ids.

Syntax

To create nested sets, give the slides of the nested set an extra name or id, like:
{slide-whatever}...{/slides}

To prevent losing track of what closing tag closes what, you can optionally add the id to the closing tag too (but you don't have to), like:
{slide-whatever}...{/slides-whatever}

Example syntax:
{slide=Level 1 - First}
    This is the fist slide
    {slide-level2=Level 2 - First}
        First nested slide
    {slide-level2=Level 2 - Second}
        Second nested slide
    {/slides}
{slide=Level 1 - Second}
     Second main slide
{/slides}

Example

You can nest slide sets multiple levels deep, if you would ever want/need this for any reason.

Example Slide 1

Some text...

Example Slide 1.1

Example Slide 1.1.1

Some text...

Example Slide 1.1.2

Some text...

Example Slide 1.1.3

Some text...

Example Slide 1.2

Some text...

Example Slide 2

Some text...

Example Slide 2.1

Some text...

Example Slide 2.2

Some text...

The syntax used for above slides:

{slide-ex=Example Slide 1}
    Some text...
    {slide-ex_sub1=Example Slide 1.1}
    {slide-ex_sub1_sub1=Example Slide 1.1.1}
        Some text...
        {slide-ex_sub1_sub1=Example Slide 1.1.2}
            Some text...
        {slide-ex_sub1_sub1=Example Slide 1.1.3}
            Some text...
        {/slides}
    {slide-ex_sub1=Example Slide 1.2}
        Some text...
    {/slides}
{slide-ex=Example Slide 2}
    Some text...
    {slide-ex_sub2=Example Slide 2.1}
        Some text...
    {slide-ex_sub2=Example Slide 2.2}
        Some text...
    {/slides}
{/slides}

Notice!

Don't forget to close each slide set with the closing tag {/slides}

If you don't close every set, you will get unwanted results.

Independent slides

You can make slides independent by simply making each slide an own set. This method can be used for stuff like FAQ pages where you want to be able to have multiple slides open at the same time.

Because the first slide in a set is opened by default, you should add the |closed attribute to every slide if you want them closed to start off with.

If you have set up the page scrolling in the Slider settings (which this site has) you can add the |noscroll attribute to stop the page from scrolling to the slides when you click to open them.

{slide=Question 1|closed|noscroll}
    Answer 1...
{/slides}
{slide=Question 2|closed|noscroll}
    Answer 2...
{/slides}
{slide=Question 3|closed|noscroll}
    Answer 3...
{/slides}

Question 1

Answer 1...

Question 2

Answer 2...

Question 3

Answer 3...

Troubleshooting

Please use the forum for support.

Slides are not working on all browsers

  • There is markup on the {slide} tags
    It is fine to give styles to the titles withing the {slide} tags, like: {slide=My Title}
    But giving styles to other parts of the tag, or the entire tag, can cause problems, like: {slide=My Title}
    Remove the extra styling or other html tags around and in the {slide} tags that might cause problems.

  • There are javascript errors
    Javascript errors can and usually will cause the slides to not function. You probably have a mootools or jquery conflict on your site. This is often the case when multiple mootools or jquery scripts are loaded.
    Take a look in the sites output html to see if this is the case.
    For more info about the javascript error(s), you can use Firefox with the Webdeveloper Toolbar (or another browser with a javascript debugger).

Slides are not working on Internet Explorer (but are working on other browsers)

  • There are problems in the html output structure
    Internet Explorer is pretty picky when it comes to html. It will not handle invalid markup gracefully.
    Check if you have unclosed html tags in your content (see the html view in your editor). Like divs or spans that have no closing tag. Or lost closing tags that have no opening tag.
    You can check your page for html errors on: http://validator.w3.org

Specs

Specifications

Slider is a Joomla extension compatible with Joomla 1.5, Joomla 1.7 and Joomla 2.5.

The extension consists of:

  • a system plugin
  • an editor button plugin

Requirements

Slider will only work correctly if your setup meets these requirements:

  • Up-to-date version of Joomla!
  • PHP 5.3+
  • PHP mbstring (Multibyte String) functions should be enabled
  • MySQL 5+

Using PHP 5.2 (or lower)?
PHP 5.2 is old and support for it has stopped with the release of PHP 5.2.16 (16-Dec-2010). This means that PHP 5.2 cannot be considered stable or secure anymore.
If your host will not or cannot provide you with an up-to-date version of PHP, then you have reason enough to look for a decent host.
PHP 5.2 mainly has problems with installation of the zip packages. The extensions might work without problems for you once installed, but I can not give any guarantees on that.
>> For more detailed information, read: No more php 5.2 support - move on to php 5.3

I can not provide support for setups that do not meet the above requirements.

The core Joomla files should of course not be altered in any way.

Installation

The easiest way to install/update is via the NoNumber! Extension Manager.

If you have problems installing Slider, please try the manual installation process as described here:
docs.joomla.org/Installing_an_extension

Otherwise, please report this on the forum or let me know via the contact form.

Updating

If you want to update to the latest version, you do not have to uninstall first.

The easiest way to install/update is via the NoNumber! Extension Manager.

You can also update simply by installing the package via the Joomla core installation process.

Downgrading

If for some reason you need to downgrade, it is best to uninstall the extension first.

Also, you will have to uninstall the NoNumber! Framework plugin (system) (and the NoNumber Elements plugin if you have it installed).

After that you can simply install the older version zip file.

Please note that I cannot not provide support on older versions!

Open Source License

Slider is an Open Source Joomla extension. It is in compliance with the GNU/GPL license:
Licence: GNU/GPL GNU General Public License, version 2

Joomla is also Open Source.

Support

Need more help?

Before requesting help, make sure your installation and setup meet the requirements (see the Specs) and your extensions are up-to-date.

If you need more help, please take a look in the NoNumber! Forum.
If you can't find your answer there, please post your question. I am very willing to help!

You can also contact me via the contact form or via chat (if I'm online).

Changelog

Changelog

+ = Added ! = Removed ^ = Changed # = Fixed

26-Jan-2012 : v1.8.5
+ Added translations: pl-PL
# Fixed issue with image-only tab titles
# Fixed issue with Slide links not working with slides with special characters
# Fixed issue with links not working correctly on all setups due to not using JRoute
# Fixed issue with errors on pdf pages (Joomla 1.7+)
# Fixed issue with installer not removing the folder/zip from the tmp

09-Jan-2012 : v1.8.4
# Fixed issue with line-height of the slide titles being jumpy on some templates

16-Dec-2011 : v1.8.3
^ Updated translations: de-DE, ru-RU
^ Cleaned up more code
# Fixed issue with html entities in title converting to url hash
# Fixed issue with invalid w3c html markup (ref attribute in div element)

18-Nov-2011 : v1.8.2
+ Added option to overrule mode by adding click or hover in tag
^ Updated translations: sl-SI
# Fixed issue with hash fragment still being added to url when option is switched off

09-Nov-2011 : v1.8.1
+ Added option to overrule the default code the editor button inserts
^ Improved cleanup of scripts/styles when there are no tabs on the page
# Fixed issue with hash fragment links not working in all urls with variables
# Fixed issue with typo in css file (.grey instead of .mystyle)

06-Nov-2011 : v1.8.0
+ Added active slide as hash fragments to url (and option to switch this off)
+ Added translations: th-TH
^ Cleaned code syntax (no longer guaranteed support for php 5.2.x and lower)
^ Improved matching of titles with special characters via url
^ Improved cleanup of scripts/styles when there are no slides on the page
# Fixed issue with tags being handled in some edit forms

17-Oct-2011 : v1.7.1
# Fixed security issue in !NoNumber! Framework plugin
# Fixed issue with w3c validator giving false negatives on html output

08-Oct-2011 : v1.7.0
+ Added ability to set slides up to change on mouse hover instead of click
^ Improved installer
^ Moved translation language files to main package (no more language packs)
^ Cleaned up some code (like no more use of DS)
# Fixed issue with tags being handled in editor button popup
# Fixed issue with the slidelink tag not working outside the area where the slides are

16-Sep-2011 : v1.6.0
^ Changed !NoNumber! Elements plugin to !NoNumber! Framework
^ Moved common language strings to !NoNumber! Framework files
^ Changed way !MooTools version is detected
^ Improved initial display before script is loaded/executed
^ Improved handling of surrounding whitespace
# Fixed issue with javascript files breaking when using js/css compression
# Fixed issue with invalid characters in element ids (not passing w3c validation)
# Fixed issue with class names showing in print view

29-Jul-2011 : v1.5.2
# Fixed issue with surrounding html tags potentially breaking html structure

21-Jul-2011 : v1.5.1
+ Added option to not use outlines
+ Added option to use versioned scripts and stylesheets
^ Improved handling of styling on tags
^ Improved handling of tags in feeds
# Fixed issue with error on servers that don't have mbstring functions enabled
# Fixed issue with some content not being rendered correctly in inactive slides

05-Jul-2011 : v1.5.0
+ Added cookie support for remembering active tabs
^ Changed layout of options
^ Changed use of elements
^ Improved handling of print and pdf pages
# Fixed issue with images and other html in titles
# Fixed issue with inactive content showing shortly before page is loaded
# Fixed issue with !JEventHandler error on some setups

06-Jun-2011 : v1.4.2
# Fixed issue with slides using custom ending tag no longer working (since v1.4.1)
# Fixed version number

06-Jun-2011 : v1.4.1
+ Added option to overrule the window sliding per slide
+ Added option to define the tag type used for the titles
^ Added better handling of tags when closing tag is not found
# Fixed issue with file inclusion not working on some Joomla 1.5 setups

23-May-2011 : v1.4.0
+ Joomla 1.7 compatible!
+ Added more comments to css file
^ Changed way the mootools version is detected
! Removed force mootools 1.2 option
# Fixed issue with setting active item via number / set in url not working correctly

30-Mar-2011 : v1.3.2
+ Added option to activate slide via url using the number of the slide

Commercial License

Slider is completely free and you DON'T need a Commercial License Code to use it.

However, if you use my extensions on websites that you make money from, I would appreciate it if you purchase a License Code.
The License Code will remove the license message from the extensions administrator screens.

Note: If you don't want to pay for the License Code and want to continue to use the extension for free, please do. You will just have to ignore the license message in the administrator.

Note: If you have donated before and feel you should get some reduction on the price, please contact me about it... we'll sort it out :)

more information...

 

>> Purchase Commercial License Code >>

 

Here you can see the difference between the use of the extensions without and with Commercial License Code.

WITHOUT Commercial License CodeWITH Commercial License Code
Full version download yes YES yes YES
Full functionality yes YES yes YES
Message in administrator license_invalid license_valid
Encrypted no NO no NO
Free updates yes YES yes YES
Free support yes YES yes YES
Free RSS news subscription yes YES yes YES
Free holiday to Barbados no NO no NO

Download

Downloads

Slider is compatible with Joomla 1.5, Joomla 1.7 and Joomla 2.5

NOTE: Slider needs PHP 5.3+. Please see the specs for more requirements.

  • Are you going to use this extension on a commercial website? Please consider buying a License Code

More downloads...

Please clear your browsers cache after updating an extension.

NOTE: Joomla 1.6 is no longer supported. Joomla 1.6 reached end-of-life in August 2011. If you have a site running on Joomla 1.6 you are urged to upgrade to Joomla! 2.5. Slider will probably still work on Joomla 1.6, but any issues specific to Joomla 1.6 will not be fixed.

Tip!

Are you using multiple NoNumber! extensions?
Install the NoNumber! Extension Manager to easily keep them up-to-date.

Languages

This extension comes with the following languages:

  • [pt-BR] Brazilian Portuguese
  • [ca-ES] Catalan
  • [da-DK] Danish
  • [nl-NL] Dutch
  • [en-GB] English
  • [fr-FR] French
  • [de-DE] German
  • [el-GR] Greek
  • [it-IT] Italian
  • [lt-LT] Lithuanian
  • [pl-PL] Polish
  • [pt-PT] Portuguese
  • [ro-RO] Romanian
  • [ru-RU] Russian
  • [sl-SI] Slovenian
  • [es-ES] Spanish
  • [th-TH] Thai
  • [uk-UA] Ukrainian

No language pack for your language?

I welcome you to help out and get involved with translations for NoNumber! extensions.

I am using Transifex for the translations of all NoNumber! extensions. So I kindly ask you to join Transifex.

There is a translation team/group set up especially for Joomla projects: OpenTranslators.

To join, see the different steps on the right under: Translator Guide: http://opentranslators.org/en/how-to

You can find all the NoNumber! projects here: https://www.transifex.net/projects/tag/nonumber/

All language files will be updated and packed with every new release of the individual extensions.

OpenTranslators
 
Open Source Training | Online Joomla! Training and Support
hosting joomla
MaxCDN | Content Delivery Network | Accelerate your site to the max
Copyright © 2009-2012 - NoNumber! - All Rights Reserved - Terms of Service - Privacy Policy

NoNumber.nl is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla name and logo are used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.