Content Slider Plugin Drucken
Benutzerbewertung: / 113
SchwachPerfekt 
Geschrieben von: Michael Majunke   
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..

 
 

Inhalt

Änderungen
Demo
Vorrausetzungen
Verwendung
Parameter
CSS
FAQ
Spende
Download
 
 

Änderungen

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

Demo

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

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" closeDep="1;3"}
      Slider 2
{sliderEnd}
 
{slider id="3" title="Slider 3" direction="0" cssSuffix="_test" closeDep="1;2"}
      Slider 1
{sliderEnd}
 

Vorrausetzungen

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

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}
 

PS.: obiger Text kann nicht mir Copy/Paste verwendet werden !

Parameter

Plugin

CSS Path damit kann der Pfad zur Standard slider.css verändert werden
Relativ zu Joomla Base
Default entspricht: plugins/content

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 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  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.
 
 

Spende

Hier habt ihr die Möglichkeit eine kleine Spende abzugeben :).
 
Attachments:
 plgSlider_1_5_1.zip[V1.5.1 Slider Plugin]8 Kb03.01.10 12:01
 plgSlider_1_5_0.zip[V1.5.0 Slider Plugin]8 Kb16.09.09 16:37
 plgSliderBtn_1_0_1.zip[V1.0.1 Button Slider Plugin]3 Kb29.08.09 19:43
 plgSlider_1_4_0.zip[V1.4.0 Slider Plugin]6 Kb29.08.09 19:42
Zuletzt aktualisiert am Sonntag, den 03. Januar 2010 um 12:00 Uhr
 
Kommentare (58)
RE: Problem when using pagebreak
58 Freitag, den 01. Januar 2010 um 13:52 Uhr
Michael Majunke
... Comment 03.01.2010: FIXED in Version 1.5.1 ...

Hi P.Crown,

yes, i can reproduce the problem and i think i have a solution but i need a little bit time for testing, build new Version, and so on ( next few days ).

Until then i have a fast workaround. Insert this line

"if ( document.getElementById( 'slide" . $id . "' " . $modeValue . ") == null ) { return ; } " .

in slider.php line 164:

Greetings Michael
Problem when using pagebreak
57 Freitag, den 01. Januar 2010 um 08:10 Uhr
Pinchas Crown
Hey,

Great plugin!

I have only one problem - when I use Pagebreak the slider only works on the first page, not on the following ones where they always show.

I really can't figure out why this should be so - all the sliders worked fine, then I added the pagebreak in the middle and now the ones on the second page always show.

Thanks again for an excellent plugin!
Re: hover
56 Freitag, den 18. Dezember 2009 um 17:01 Uhr
Michael Majunke
Hi Mirco,

Dankeschön ;)

Der Vorteil des Sliders ist die (fast) beliebige Anpassbarkeit durch das slider.css File. Wenn Du also das Cursorzeichen 'I' nicht magst, änderst Du einfach die CSS nach Deinen eigenen Vorstellungen. Für den Cursot gibt es das gleichnamige CSS Attribut.

Beispiel: cursor: pointer;

Grüße Michael
Hover
55 Freitag, den 18. Dezember 2009 um 08:17 Uhr
Mirko
Schöner Slider, der auch ohne eigenes js auskommt. Noch unschön finde ich, dass beim Hovern über einen Sliderlink keine Hand sondern diess "I" Cursorsymbol angezeigt wird. Das kann zu MIssverständnissen führen.
space and fckeditor
54 Donnerstag, den 17. Dezember 2009 um 14:29 Uhr
marc
thank for reply...Yes the problem with Fckeditor was because I have set Process HTML Entities to YES...I thinking is better to set this to Yes instead to No...

Too bad we can not customize with CSS2...anyway is not a big deal...
RE space ( 2background images )
53 Mittwoch, den 16. Dezember 2009 um 10:46 Uhr
Michael Majunke
Hi marc,

i afraid it is currently in CSS2 not possible. In CSS3 should this be avaiable.

Example CSS3:

background: url('img1.jpg') top left no-repeat,
url('img2.jpg') bottom right no-repeat;

Greetings Michael
RE: fckeditor
52 Mittwoch, den 16. Dezember 2009 um 10:00 Uhr
Michael Majunke
Hi marc,

i use the jckeditor to - without Problems. Is it an fckeditor Versions Problem ?

Try disable reformat code in the Editor. Is the Text also changed if you paste the Code in the Editors-Code-Page ?

I addition i use following Settings:

Process HTML Entities Nein
Include Latin Entities Nein
Include Greek Entities Nein
Process Numeric Entities Nein
Use Relative path for Images/Flash? Nein
Auto Format Source OFF? Ja


Greetins Michael

PS.: if Text's to 'Difficult' for this Comments, please contact me with "Kontakt" Button so we can write EMails.
fckeditor
51 Mittwoch, den 16. Dezember 2009 um 02:57 Uhr
marc
I forget we can't paste code inside this comment system...I try like this:

"{slider id="demo_vert" title="Slide Demo_Vertical" direction="0"}"
fckeditor
50 Mittwoch, den 16. Dezember 2009 um 02:55 Uhr
marc
hi again

I just see your plugin don't work when using JoomlaFCKeditor...When using Tinyeditor no problem. Any idea why ? In fact when pasting the code {slider id="demo_vert" title="Slide Demo_Vertical" direction="0"} JoomlaFCKeditor transform this in to {slider id="demo_vert" title="Slide Demo_Vertical" direction="0"} and I can't do nothing for change this....
space
49 Dienstag, den 15. Dezember 2009 um 23:33 Uhr
marc
beautiful...work great...many thank..

Please now if I want make a more customized slide using image how I can do ? Typically I would like keep one arrow image and also include a background for display with repeat value. The goal would be to display arrow one time on left side and background (a small gradient image like 20x20 pixel) along the slide...For do that is necessary to have maybe 2 background-image property but I don't see how to do...Any suggestion ?
RE: space
48 Dienstag, den 15. Dezember 2009 um 19:45 Uhr
Michael Majunke
Hi marc,

the Browser Compatibility is given by the mootools-Lib included in Joomla. I test it in many Browsers without Problems. ( Joomla used currently the V1.11 mootools Lib )

I think you wish a Slider-'Button' from left to right, similar the example Description in Demo ? This should be possible if you change the CSS. I think, a simple display:block; in the .slideBar or/and .slideBarActive Class should do that.

Greetings Michael
always about space :-)
47 Dienstag, den 15. Dezember 2009 um 02:27 Uhr
marc
Sorry the comment system apply the code instead display it...By code I mean a non-breaking space...see http://www.w3schools.com/HTML/html_entities.asp
space
46 Dienstag, den 15. Dezember 2009 um 02:23 Uhr
marc
hello

Thank for your great plugin....It is exactly what am looking for and it work very well...

Just few question:

- Your plugin are compatible with all major browser like IE 6 + 7 +8 + All Firefox ??

- I would like make a long slide bar instead just a small of the same size of title..How I can do? I see if I simply press many time the space touch of my keyboard I get what I need...but this will be correct or sometime browser can no Interpret correctly that? Normally in html we must put the code   for make space but when I do that using the joomla editor it's the same then pressing space touch...Do you confirm ? Am just worry to make some bad display issue

thank
RE: Problem
45 Montag, den 14. Dezember 2009 um 19:47 Uhr
Michael Majunke
Hi Paulius,

the slider used the mootools-Library. I think so complex content how Google-Map can't be slided.

Greetings Michael
Problem
44 Sonntag, den 13. Dezember 2009 um 21:09 Uhr
Paulius
Hello,

Unfortunately using this plugin in IE7, if you put in a sliding text a google map, it is being shown all the time and does not hide even if you don't open the slide...
Re: cannot start plugin
43 Samstag, den 12. Dezember 2009 um 18:13 Uhr
Eliad
hi,
cannot paste the code here for some reason. i sent it over using the contact form you have on this website.

thanks again, Eliad.
Re: cannot start plugin
42 Samstag, den 12. Dezember 2009 um 18:06 Uhr
Eliad
Hi,
there has been a mistake in the header code before. here is the real one:

/////////////////////////////


" lang="language; ?>" >



/css/template.css" type="text/css" />


//////////////

thanks
Re: cannot start plugin
41 Samstag, den 12. Dezember 2009 um 18:05 Uhr
Eliad
Hi Michael,
i am using a custom made template i designed and i am not using mootools so i dont think that the header has Javascript Mootools-Library but i am attaching the header of my index.php here for you to look at. i hope it will reveal anything to you.

//////////// index.php header //////////////

" lang="language; ?>" >



/css/template.css" type="text/css" />


////////// end of index.php header ///////////////////

also, this is a link to the website on a page where i tried the test code you sent me a few days ago (so you can see how it looks like)
http://www.vaxilbio.com/index.php?option=com_content&view=article&id=13&Itemid=21

thank you so much for your help. Eliad
Re:cannot start plugin
40 Samstag, den 12. Dezember 2009 um 11:52 Uhr
Michael Majunke
Hi Eliad,

curiously..

What for an template do you use ? Is there the Javascript Mootools-Library in the header ?

Greetings Michael
re:
39 Samstag, den 12. Dezember 2009 um 00:34 Uhr
Eliad
hey Michael,
i tried the button and inserted your test code in my editor. all i can see (after publishing) is the code unfortunately. no slider...
i have no clue why?
what can cause such a problem? any advice?

thanks Eliad.

Kommentar hinzufügen

Ihr Name:
Titel:
Kommentar: