Vorwort

Da ich auf der Suche nach einem Content-Slider für Joomla nicht das Richtige für mich fand, erstellte ich mir durch die gewonnen Anregungen kurzerhand ein eigenes Slider Modul mit Button für den Editor.

Die Version stelle ich hier zur Verfügung..

Slider Simple Logo
 

 

 

 

 

Inhalt

 
 
 




Änderungen

Version 2.0.0 für Joomla 4
  • Der Slider ist nun Ready für Joomla 4
  • Durch die (Zwangs)-Umstellung auf jquery gibt es im Moment gibt es noch eine Einschränkung, dass der "direction" Parameter ohne Funktion ist. Sonst alles wie gewohnt.

Alle Änderungen

 
Version 1.6.1 für Joomla 1.6 , 1.7 und 2.5
  • Ich habe eine spezielle Version für Joomla 1.6/7 , 2.5 Anwender fertig gestellt.
    Bitte achtet darauf geanu diese Version für eine Joomla >1.5 Umgebung zu nutzen ! ( Endung _j16 )
Version 1.6.1
  • NEW : neuer Plugin-Parameter 'CloseDepMode' mit welchem die Arbeitsweise von closeDep="*" eingestellt werden kann - Schließen aller Slider oder nur die des Artikels.
Version 1.6.0
  • NEW : neuer Parameter duration für die Ein- Ausblendgeschwindigkeit
  • Change : in Parameter closeDep kann jetzt ein '*' eingegeben werden wenn 'alle anderen' Slider der Seite geschlossen werden sollen
  • Change : closeDep wird nur noch ausgeführt, wenn ein Slider geöffnet wird
  • Change : Refeactoring und Optimierungen ( besonders für Seiten die viele Slider nutzen )
Version 1.5.2
  • FIX : wenn active="1" und closedep zusammen genutzt wurde, funktionierten in einigen Fällen die nachfolgenden Slider nicht
Version 1.5.1
  • FIX : behebt das Problem wenn Sliders nach einem Pagebreak eingesetzt werden ( siehe Kommentare )
Version 1.5.0
  • Neu : am Ende des Sliders wird ein weiterer Schließen-Button eingeblendet damit bei langen Texten nicht gescrollt werden muss. Der Button kann per CSS abgeschalten bzw. versteckt werden.
  • Neu : active Parameter mit welchem man einen Slider per Default geöffnet anzeigen lassen kann.
Achtung: es gibt Anpassungen am CSS-File die in evt bestehende, eigene CSS-Dateien eingefügt werden müssen. Beispiele in der beiligenden css-Datei.

Version 1.4.0
  • Neu : Unterschiedliche Styles für Offene und Geschlossene Sliders
  • Neu : Neue Version des Slider-Buttons ( Dank an Florian ) 
Achtung: es gibt für Offene (Active) Slider neue CSS-Classes die in evt bestehende, eigene CSS-Dateien eingefügt werden müssen. Beispiele in der beiligenden css-Datei.

Version 1.3.0
  • Neu : Optionales Beschreibungs - Feld (zusätzlich zum Titel)
  • Neu : Optionales Feld mit Liste von automatisch zu schließenden Slider - ID's wenn aktueller Slider geöffnet wird
Version 1.1.0
  • FIX : CSSSuffix
  • Code komplett überarbeitet


Alle Änderungen


Demo

Achtung: der Example-Code kann nicht direkt mit Copy/Paste verwendet werden da das "s" maskiert ist !! Bitte Abschreiben oder korrekt {sli.. schreiben.

Slide Demo_Vertical
     
      ein
         Demo 
            für Verticalen
               Slide
Slide Demo_Vertical

Einstellung:
{slider id="demo_vert" title="Slide Demo_Vertical" direction="0"}
      ein
         Demo 
            für Verticalen
               Slide
{sliderEnd}


Slide Demo_Horizontal
     
      ein
         Demo 
            für Horizontalen
               Slide
Slide Demo_Horizontal

Einstellung:
{slider id="demo_hor" title="Slide Demo_Horizontal" direction="1"}
      ein
         Demo 
            für Horizontalen
               Slide
{sliderEnd}
 

Demo für closeDep und desc Eigenschaften

Slide 1

Desc: Ausblenden Slider 2 und 3
     
      Slider 1
Slide 1

Slide 2
     
      Slider 2
Slide 2

Slide 3
     
      Slider 3
Slide 3

Slide 4
     
      Slider 4

- CloseDep="*"

- duration="2000"

Slide 4

Einstellungen:
{slider id="1" title="Slider 1" direction="0" desc="Desc: Ausblenden Slider 2 und 3" closeDep="2;3"}
      Slider 1
{sliderEnd}

 

{slider id="2" title="Slider 2" direction="0" active="1" closeDep="1;3"}
      Slider 2
{sliderEnd}

 

{slider id="3" title="Slider 3" direction="0" cssSuffix="_test" closeDep="1"}
      Slider 3
{sliderEnd}

 

{slider id="4" title="Slider 4" direction="0" cssSuffix="_test" closeDep="*" duration="2000"}
      Slider 4 ( CloseDep="*" ) ...
{sliderEnd}

 
 

Vorrausetzungen

 

Der Slider ist mit Joomla 1.5.x und PHP5 getestet.

Neu: es gibt es extra Version für Joomla 1.6 .

Neu: es gibt es extra Version 2.0.0 für Joomla 4 .

Installation

Die Installation kann per Joomla-Plugin-Installation erfolgen. Zuerst sollte der Slider und dann, wenn benötigt, der Editorbutton installiert werden.
Nach der Installation müssen die Plugins noch aktiviert werden.

 

Verwendung

Das Plugin wird durch einfügen folgenden Codes in den Content des Artikels genutzt.
( Alternativ durch Verwendung des Editorbuttons ).

{slider id="1" title="Titel.." direction="0"}
      der Text zum Aus/Einblenden

{sliderEnd}
 

Achtung: obiger Text kann nicht direkt mit Copy/Paste verwendet werden da das "s" maskiert ist !! Bitte Abschreiben oder korrekt {sli.. schreiben.
 

Parameter

Plugin

CSS Path damit kann der Pfad zur Standard slider.css verändert werden
Relativ zu Joomla Base
Default entspricht: plugins/content
CloseDepMode Modus für closeDep="*".
Artikel) nur Slider des Artikels werden geschlossen Über-Alle) ALLE slider der HTML Site werden geschlossen
Default Artikel-Modus

Content

 id eine eindeutige ID innerhalb einer Seite Pflicht
 title die Titelzeile Pflicht
 direction 0 = Vertical / 1 = Horizontal Pflicht
 active soll der Slider per Default geöffnet werden:
active = 1 / active entfernen für NEIN
Optional
 cssSuffix wird an die Standard CSS Klassennamen angefügt Optional
 desc Zusätzliche Beschreibung. Wird wie 'title' dauerhaft angezeigt oder nach eigenen CSS-Anpassungen. Optional
 closeDep Entweder: eine Liste von Slider id's , welche geschlossen werden sollen wenn der aktuelle Slider geöffnet wird. Die ID's werden durch Semikolon [;] getrennt. Beispiel: 1;2;xx 
Oder: ein * ( Stern ) was 'für alle Anderen Slider' steht
Optional
 duration Dauer des 'slidens' in Millisekunden. Default: 500 Optional


CSS

Für jedes Element steht eine Class Definition zur Verfügung welche per Default in der slider.css genutzt wird ( joomla/plugins/content/slider/slider.css) .
Zur Nutzung könnt ihr diese Datei direkt anpassen oder in einem beliebigen Verzeichniss eine Kopie erstellen und den PlugIn-Paamater CSS Path darauf zeigen lassen.

Hier sind die Einstellungen der mitgelieferten slider.css :
 
CSS Styles
/* Styles for Slider 1.5
     Majunke Michael

   An Example for Suffix _test in included
*/

/**
 Active Default Style
*/

.slideBarActive {

    background-color: rgb(120,120,120);
    background-image: url(slideBarOpen.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid gray;

    color:black;
    text-decoration:none;
}

.slideBarActive:link {
    color:blue;
    text-decoration:none;
}
.slideBarActive:visited {
    color:blue;
    text-decoration:none;
}
.slideBarActive:focus {
    color:blue;
    text-decoration:none;
}
.slideBarActive:hover {
    color:blue;
    text-decoration:none;
}
.slideBarActive:active {
    color:black;
    text-decoration:none;
}

/* here we hide the Description in Active Sliders */
.slideDescActive {
    display: none;
}

.slideTextActive {
   margin-bottom: 5px;
}

/* Show an additional Close Button at end of Active slider */
.slideBarEndActive {

    background-color: rgb(120,120,120);
    background-image: url(slideBarEnd.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid gray;

    color:black;
    text-decoration:none;

    margin-bottom: 5px;
}




/**
 Closed Default Style
*/

.slideBar {

    background-color: rgb(174,174,174);
    background-image: url(slideBar.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid gray;

    color:black;
    text-decoration:none;
}

.slideBar:link {
    color:blue;
    text-decoration:none;
}
.slideBar:visited {
    color:blue;
    text-decoration:none;
}
.slideBar:focus {
    color:blue;
    text-decoration:none;
}
.slideBar:hover {
    color:blue;
    text-decoration:none;
}
.slideBar:active {
    color:black;
    text-decoration:none;
}

/* show desc in closed Sliders */
.slideDesc {

    background-color: rgb(174,174,174);

    margin-top: 5px;
  	padding: 1px;
  	padding-left: 23px;
    border: 1px solid gray;

    color:black;
    text-decoration:none;
    font-size:small;

    margin-top: 5px;
    margin-bottom: 5px;
}

.slideText{
  margin-bottom: 5px;
}

/* here we hide the End-Button in Closed/Inactive Sliders */
.slideBarEnd{
	display: none;
}





/**
 * Simple Example with Suffix _test
 *
 * you can see it in live Demo Slider3
 */

.slideBarActive_test {

    background-color: rgb(80,80,80);
    background-image: url(slideBarOpen.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid gray;

    color:red;
    text-decoration:none;
}

/* we show the Description also in Active Sliders */
.slideDescActive_test {

    background-color: rgb(80,80,80);

  	padding: 1px;
  	padding-left: 23px;
    border: 1px solid gray;

    color:green;
    text-decoration:none;
    font-size:small;

    margin-top: 5px;
    margin-bottom: 5px;
}

.slideBar_test {

    background-color: rgb(180,180,180);
    background-image: url(slideBar.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid magenta;

    color:red;
    text-decoration:none;
}

.slideDesc_test {

    background-color: rgb(180,180,180);

  	padding: 1px;
  	padding-left: 23px;
    border: 1px solid gray;

    color:black;
    text-decoration:none;
    font-size:small;

    margin-top: 5px;
    margin-bottom: 5px;

}

/** Show an additional Close Button at end of Active slider */
.slideBarEndActive_test {

    background-color: rgb(80,80,80);
    background-image: url(slideBarEnd.gif);
    background-repeat:no-repeat;
    background-position: left center;

  	padding: 3px;
  	padding-left: 23px;
	border: 1px solid gray;

    color:red;
    text-decoration:none;

    margin-bottom: 5px;

}

/* here we hide the End-Button in Closed/Inactive Sliders */
.slideBarEnd_test {
	display: none;
}

.slideText_test {
  margin-bottom: 5px;
}
CSS Styles

 


FAQ

  • Ich möchte das Beschreibungsfeld auch bei geöffnetem Slider anzeigen lassen
      Dazu ist das CSS-File anzupassen und die Klasse .slideDescActive mit einem entsprechenden Style zu füllen, evt dem der Klasse .slideDesc
  • Ich möchte den zusätzliche Schließen Button am Ende des Sliders niemals anzeigen lassen
      Dazu ist das CSS-File anzupassen und die Klassen .slideBarEndActive und .slideBarEnd mit display:none zu füllen.
 


Download

plgSlider_2_0_0.zip [V2.0.0 Slider Plugin - Joomla 4 ]
plgSlider_1_6_1_j16.zip [V1.6.1 Slider Plugin - Joomla 1.6 ]
plgSliderBtn_1_0_1_j16.zip [V1.1.0 Button Slider Plugin - Joomla 1.6]
plgSlider_1_6_1.zip [V1.6.1 Slider Plugin]
plgSliderBtn_1_0_1.zip [V1.0.1 Button Slider Plugin]