Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.

LibraryAdmin / jQueryAdmin (total veraltet)

Anleitung um jQuery in WebsiteBaker zu nutzen

jQuery ohne LibraryAdmin geht natürlich auch: Klick
 

Installation

jQueryAdmin oder LibraryAdmin sind Module und werden ganz normal über das Backend installiert.


Info: LibraryAdmin setzt das Modul wblib voraus, weiter wird Modul lib_jquery benötigt


Nach der Installation sind sie unter Admin-Tools > jQueryAdmin V2.x
bzw. LibraryAdmin zu finden.
Autor : webbird
 

Kurze Youtube-Anleitung:
  • Installation und Aktivierung von LibraryAdmin: Klick
  • Installation des Plugins Colorbox: Klick
  • Bearbeitung des Presets Colorbox: Klick

Aktivierung

Bei der Installation werden automatisch 2 Droplets unter Admin-Tools > Droplets angelegt.
Die Aufrufe dafür erstellt man wie im Bild : Optionen > Fußzeile

 
jQueryAdmin
droplet libraryadmin-jqueryadmin im footer2
[[jQueryInclude]]  [[jQueryLoader]]
LibraryAdmin
droplet libraryadmin-jqueryadmin im footer1
[[LibInclude?lib=lib_jquery]]  [[LibLoader]]
 
Dadurch wird ermöglicht jQuery global oder seitenbasiert zu nutzen.
( ohne extra in jede Seite etwas einzufügen )

Genauso gut kann man aber die Droplets aufrufen wie in einigen Anleitungen hier dargestellt.
 
  Wichtig!   Wenn du jQueryAdmin / LibraryAdmin nutzt, dann solltest du nirgends nochmal jQuery aufrufen.
Nicht aus dem Include-Ordner und nicht von code.google.com oder jquery.com oder ähnliches.
Überprüfe die index.php deines Templates, jQuery hat da nichts zu suchen.
jQueryAdmin / LibraryAdmin stellt jQuery komplett bereit!
 

Beispiel-Nutzung

Schauen wir uns die Nutzung am Beispiel des Plugins Colorbox an um Bilder größer werden zu lassen.

Die letzte Plugin-Version der Colorbox hier downloaden : http://jquery.websitebakers.com/plugins/download.php

Plugin-Installation : Admin-Tools > jQueryAdmin V2.x  bzw. LibraryAdmin
Plugin wie im Bild installieren/uploaden.
 
jQueryAdmin
LibraryAdmin Plugin-Installation2
LibrayAdmin
LibraryAdmin Plugin-Installation
 

 

Preset erstellen

Die Colorbox soll auf einer bestimmten Seite wirken (seitenbasiert).
 
für einzelne Seiten

 

Klick auf das Symbol neben dem Feld für Preset-Name.
 
Nun die Seite auswählen (hier als Beispiel Seite "home")

 


Nach Auswahl der Seite erscheint im Feld Preset-Name die Page_ID,
neben dem Seitenauswahlbutton steht der Page_Title der gewählten Seite.


Noch Plugin Colorbox anhaken und speichern.

 


Das Droplet jQueryLoader erkennt solche seitenbasierten Presets
und stellt die Colorbox für die Seite Home bereit.






 
Den gleichen Effekt erzielt man durch Erstellung eines Presets mit Namen "irgendein-name" und ausgewählter Colorbox. Den Presetaufruf kopiert man irgendwo in die betreffende Seite. Egal ob Wysiwyg-Abschnitt oder Code2-Abschnitt(HTML/Javascript):
jQueryAdmin: [[jQueryInclude?preset=irgendein-name]]
LibraryAdmin: [[LibInclude?lib=lib_jquery&preset=irgendein-name]]
 
 
 




Soll die Colorbox nicht nur auf einer Seite (oder wenigen) genutzt werden?
Dann spart man sich das Anlegen vieler seitenbasierter Presets und stellt die Colorbox global bereit.
 
global

 


Preset default.jquery auswählen.
(Ist default nicht vorhanden muss es angelegt werden als Neues Preset: default)


Colorbox anhaken und speichern.


Das war's.
Das Droplet jQueryInclude lädt nun dieses Preset für jede Seite,
womit die Colorbox (oder alles andere was angehakt wurde) systemweit zur Verfügung steht.
 

 

Den gleichen Effekt erzielt man durch Erstellung eines Presets mit Namen "irgendein-name" und ausgewählter Colorbox. Den Presetaufruf kopiert man unter Optionen in die Fußzeile:
jQueryAdmin: [[jQueryInclude?preset=irgendein-name]]
LibraryAdmin: [[LibInclude?lib=lib_jquery&preset=irgendein-name]]



Für den Colorbox-Effekt muss man auf der Seite ein verkleinertes Bild einfügen, zu sich selbst verlinken und dabei class="colorbox" vergeben.
Für Slideshow nicht class="colorbox" sondern rel="cslide".
 
<a class="colorbox" href="http://bildadresse.jpg">
  <img alt="titel" src="http://bildadresse.jpg" style="width: 150px; height: 100px;" />
</a>

 

Anderes Beispiel: Sexylightbox

 

 

 

 





Informatives

Das Installieren eines Plugins hat noch keine Auswirkungen (von der Foldergallery mal abgesehen). Es entspricht dem Hochladen eines Ordners, der ein paar Dateien enthält.

Erst das Anlegen eines Presets kann etwas bewirken.
So ein Preset ist erstmal leer. Es wird gefüllt, wenn  beim Anlegen oder Bearbeiten noch ein oder mehrere Plugins ausgewählt werden.

Mit was füllt sich das Preset?
Der Inhalt wird aus einer "Vorlage"-Datei im Plugin-Ordner geholt. Die Datei nennt sich immer default.preset.
Nach dem Speichern hat man also eine Kopie des Inhaltes der Vorlage in seinem Preset. Deshalb kann man nun ohne Gefahr das Preset weiter bearbeiten/anpassen. Bei Fehlschlägen lädt man einfach die Vorlage nochmal, oder löscht das Preset, erstellt ein neues.