Tutorials von Thomas Frei-Herrmann

Ticker Expandable als jQuery Skript

für andere Ticker, guckt bitte auch hier

http://www.dynamicdrive.com/dynamicindex2/expandableticker.htm

Slide-Effekt

Dynamic Drive

Bei Dynamic Drive findet Ihr jede Menge einfach einzubauende Skripte.
zu meinem Gästebuch

Hier kann man auch Links einbauen oder auch Bilder wie z.B. diesen Smiley.


zum NOF-Forum

Natürlich kann man auch zu einem neuen Fenster (blank) verlinken.
Ihr könnt hier ganz normale HTML-Befehle einbauen, wie z.B.:

fett
kursiv
oder auch einen roten Text
und Ihr könnt hier beliebig viele Anzeigen erstellen, indem Ihr einfach weitere DIV-Container hinzufügt.

Viel Spaß
 

Ich habe Euch hier eine ZIP-Datei mit den Skripten, so wie ich sie hier eingesetzt habe, vorbereitet.
Hier geht es zum Download. Downloads insgesamt seit dem 04.05.2011: 39


Nach dem Entpacken der ZIP-Datei erhaltet Ihr einen Ordner:

expandticker, den Ihr in den Ordner “Lokale Publizierung” auf Eurem PC kopiert und mit einem
FTP-Programm auf Euren Server in das Stammverzeichnis (dort wo sich auch die Startseite - index.html - befindet) kopiert,

mit folgenden Dateien:

expandticker.css (CSS Datei, die Ihr beliebig konfigurieren könnt)
expandticker.js (Javascript Datei, die das Skript ausführt)

... sowie drei Bilder zur Auswahl für den “öffnen” Button, den Ihr natürlich ebensogut mit Eurem eigenen Bild ersetzten könnt.


Zunächst kopiert Ihr den Code unten in die HTML Eures Layouts:

> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

Achtet bitte dabei auf die relative Pfadangabe zu dem Ordner expandticker.
Hier mit 2 Punkten ../ (gehe einen Ordner höher), da ich das Skript auf einer Unterseite eingebaut habe. Auf der Startseite (Home) dürfte dort nur 1 Punkt ./ stehen, da sich diese ja bereits im Stammverzeichnis befindet.

<link rel="stylesheet" type="text/css" href="../expandticker/expandticker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="../expandticker/expandticker.js">

/***********************************************
* Expandable Drop Down Ticker- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

expandticker.init({
id: 'expandticker1',
snippetlength: 40,
//<-- Länge des Ausklappmenüs in Pixeln
fx: '
slide', //<-- oder hier anstelle von slide zum Einblenden der Inhalte fade hinschreiben
timers: {rotatepause:5000, fxduration:900} //<--Kein Komma hinter der letzten Option <-- Pause und Geschwindigkeit der Anzeige
})

</script>

Im Skript (oben) könnt Ihr nun noch einige Dinge nach Euren Bedürfnissen anpassen, wie die Länge des Ausklappmenüs. Wollt Ihr, anstelle des einscrollenden Textes, lieber einen Einblenden-Effekt, schreibt Ihr dort einfach anstelle von slide (linkes Beispiel oben) dann fade hin (rechtes Beispiel oben).
Auch die Pause zwischen den einzelnen Meldungen und die Geschwindigkeit, mit der der Ticker angezeigt wird (in Millisekunden), könnt Ihr modifiziern.

Bitte öffnet nun noch mit Eurem Windows-Editor die Datei

expandticker.js

unten seht Ihr den oberen Teil dieser Datei. Falls Ihr das auf der Startseite (Home) einbaut, dann müsst Ihr auch hier die relative Pfadangabe zu dem Bild des Buttons (hier 2 Punkte ../) in einen Punkt ./ ändern und auch eventuell Euer eigenen (anderes) Bild für den Button angeben.

/* Expandable Drop Down Ticker
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Last Edited: Jan 25th, 2010
*/

var expandticker={
buttonhtml: '<img src="../expandticker/oeffnen.png" style="width:70px; height:17px; cursor:pointer" />', //Link zum Expand-Button
buttonoffset: [5, -14], //offset of button from lower left edge of ticker

// Ab hier bitte nichts mehr ändern

Nun zieht Ihr Euch an der Stelle, wo der Ticker angezeigt werden soll, ein Textfeld auf und kopiert den Code unten in die HTML des Textfeldes.

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Text” klicken
> und anschließend auf den Button “HTML” und das Skript unten einfügen.

Dieses Skript müsst Ihr natürlich mit Euren Texten, Bildern, HTML-Konfigurationen noch abändern. Man kann dort ganz normale HTML-Befehle anwenden, wie Ihr an meinem Beispiel-Code erkennen könnt.

<div id="expandticker1" class="expandticker">

<div class="expandcontent">
<a href="http://www.dynamicdrive.com" target="_blank">Dynamic Drive</a>
<br><br>
Bei Dynamic Drive findet Ihr jede Menge einfach einzubauende Skripte.
</div>

<div class="expandcontent">
<a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php">zu meinem Gästebuch</a>
<br><br>
Hier kann man auch Links einbauen oder auch Bilder wie z.B. diesen Smiley.
<br><br><br>
<p align="center"><img src="../assets/images/super.gif"></p>
</div>

<div class="expandcontent">
<a href="http://www.nof-schule.de/forum/" target="_blank">zum NOF-Forum</a>
<br><br>
Natürlich kann man auch zu einem neuen Fenster (blank) verlinken.
</div>

<div class="expandcontent">
Ihr könnt hier ganz normale HTML-Befehle einbauen, wie z.B.:
<br><br>
<b>fett</b>
<br>
<i>kursiv</i>
<br>
<font color='#FF0000'>oder auch einen <b>roten</b> Text</font>
</div>

<div class="expandcontent">
und Ihr könnt hier beliebig viele Anzeigen erstellen, indem Ihr einfach weitere
DIV-Container hinzufügt.
<br><br>
<b>Viel Spaß</b>
</div>

</div>

Weiterhin könnt Ihr dann noch die CSS Datei mit Eurem Windows-Editor öffnen:

expandticker.css

... und dort, entsprechend Euren Bedürfnissen, z.B. die Farben anpassen.

nach oben

Viel Erfolg !

 

diese Seite weiter empfehlen



Counter Statistik