Joomla Content Slider Plugin Drucken
Dienstag, den 09. Dezember 2008 um 18:05 Uhr

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 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 )
Alle Änderungen

Version 1.5.2
  • FIX : wenn active="1" und closedep zusammen genutzt wurde, funktionierten in einigen Fällen die nachfolgenden Slider nicht
    siehe dazu: Forumsbeitrag
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;2"}
      Slider 1
{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 Anwender.

Bitte nutzt für Joomla 1.6 Installation NUR die _j16 Version - der Slider wird sonst nicht korrekt funlktionieren.

 

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.

Alternative Websites

Links auf welchen der Counter gehostet ist und von mir regelmäßig kontrolliert werden :

JoomlaExtensions
Joomlaos

 

Spende

Hier habt ihr die Möglichkeit eine kleine Spende abzugeben :).


Dank an..

Tom(tastymouse)
Dank an..
 
 
 

Support Forum

Link zum Support Forum: Forum
 
Anhänge:
Diese Datei herunterladen (plgSlider_1_6_1_j16.zip)plgSlider_1_6_1_j16.zip[V1.6.1 Slider Plugin - Joomla 1.6 ]9 Kb31.01.11 08:43
Diese Datei herunterladen (plgSliderBtn_1_0_1_j16.zip)plgSliderBtn_1_0_1_j16.zip[V1.1.0 Button Slider Plugin - Joomla 1.6]3 Kb31.01.11 08:40
Diese Datei herunterladen (plgSlider_1_6_1.zip)plgSlider_1_6_1.zip[V1.6.1 Slider Plugin]9 Kb15.10.10 11:48
Diese Datei herunterladen (plgSliderBtn_1_0_1.zip)plgSliderBtn_1_0_1.zip[V1.0.1 Button Slider Plugin]3 Kb29.08.09 19:43
Zuletzt aktualisiert am Mittwoch, den 21. März 2012 um 17:57 Uhr