jquery plugin einbauen

[reinhardl]

hallo,
ich habe ein jquery Plugin. Es besteht aus 3 Teilen

1. jquery.vegas.js
2. jquery.vegas.css
3. Aufruf der Funktion:
$(function() {
$.vegas({
src:'img/background.jpg'
});
$.vegas('overlay', {
src:'img/vegas/overlays/13.png'
});
});

So wie ich das verstanden habe, wird jquery ja automatisch eingebunden und man muss sich nicht darum kümmern.

jquery.vegas.css kommt mit
<link rel="stylesheet" type="text/css" href="{$serendipityHTTPPath}templates/{$template}/css/jquery.vegas.css" >
in den HeadBereich

jquery.vegas.js wird mit
<script src="{serendipity_getFile file="js/jquery.vegas.js"}"></script>
eingebunden. Soll es auch in den Head-Bereich oder am Ende der index.tpl?


Wie bindet man am besten die Funktion ein?

[yellowled]

So wie ich das verstanden habe, wird jquery ja automatisch eingebunden und man muss sich nicht darum kümmern.

Ja, seit … äh … hab ich vergessen, aber einigen Versionen. Aber aufpassen: Noch (das wird sich eventuell in 2.0 ändern) wird jQuery in S9y im noConflict-Modus eingebunden, daran müssen Plugin und Funktionsaufruf eventuell angepasst werden.

jquery.vegas.css […] in den HeadBereich

Unfug, das ist nur ein zusätzlicher HTTP-Request. Einfach den Inhalt in die style.css des Templates kippen.

jquery.vegas.js […] Soll es auch in den Head-Bereich oder am Ende der index.tpl?

In erster Linie ist wichtig, dass es nach jQuery eingebunden wird. Allgemein wird gerne empfohlen (ich z.B. mache das nur so), jegliche externe Javascripte vor dem </body> einzubinden, um das Rendering von Markup und Stylesheet nicht unnötig auszubremsen.

Wie bindet man am besten die Funktion ein?

Im Prinzip in eine template-spezifische Script-Datei, die Du nach dem Plugin einbindest. Aber auch dabei sollte man nicht unnötig HTTP-Requests erzeugen, sondern Plugin(s) und Aufruf(e) sowie sonstigen JS-Code möglichst in eine Datei packen, sodass nur 2 externe JS-Dateien eingebunden werden – jQuery und die Scriptdatei mit Plugins und sonstigem Code. Bitte kein Inline-JS verwenden, auch wenn das bequem erscheint.

2k11 beherzigt übrigens all das, dort könnte man sich alles noch mal praktisch in Codeform ansehen.

YL

[reinhardl]

Unfug, das ist nur ein zusätzlicher HTTP-Request. Einfach den Inhalt in die style.css des Templates kippen.

nix Unfug: Ich möchte verschiedene Plugins .js wie auch die .css Dateien abhängig von dem Inhalt einer Variablen {if $entry.properties.ep_GalleryType = ...} für einzelne Einträge laden können.

externe Javascripte vor dem </body>

habe ich direkt umgesetzt

Der Tipp mit noConflict-Modus Modus hat geholfen
jetzt rufe ich die Funktion mit jQuery statt mit $
ebenfalls vor </body> auf und siehe da - es funktioniert

Danke

[yellowled]

Unfug, das ist nur ein zusätzlicher HTTP-Request. Einfach den Inhalt in die style.css des Templates kippen.

nix Unfug: Ich möchte verschiedene Plugins .js wie auch die .css Dateien abhängig von dem Inhalt einer Variablen {if $entry.properties.ep_GalleryType = ...} für einzelne Einträge laden können.

Kann immer noch Unfug sein. Die Frage ist, was schwerer wiegt – ein bisschen mehr JS/CSS in einer zentralen (ggf. minifizierten) JS-/CSS-Datei (die beide gecached werden) oder zusätzliche HTTP-Requests auf Unterseiten.

YL