Drupal7: Nieuwste jQuery-bibliotheek toevoegen aan je site.

De jQuery-versie in de Drupal-core is meestal niet de nieuwste versie.
Op zich is dit zeker geen probleem, maar soms kan het handig zijn, vooral voor de stabiliteit en performance van je site.

Er bestaat een module: jQuery Update , maar helaas wordt hiermee ook niet de nieuwste versie toegevoegd.

Deel 1: Zelf jQuery-biblitheek toevoegen...

LET OP: verwijder NOOIT de jQuery-versie die met drupal wordt meegeleverd. Deze is nodig om de core-modules vlot te laten werken.

jQuery kun je op verschillende manieren toevoegen, nl. lokaal, of via een repo. Mijn voorkeur gaat naar de tweede mogelijkheid.

De nieuwste versie kun je via verschillende aanbieders 'binnenhalen', nl:

• jquery.com
• Google
• Microsoft
• ...

Als vb. nemen we de CDN van Google. (zie hieronder)

De link in het groen zullen we in de head van je subtheme plakken.

1. Open ../sites/all/themes/je_theme/templates/html.tpl.php
(het is mogelijk dat html.tpl.php niet in de template-directory van je_theme staat. Deze kopieer je dan uit je hoofdtheme en plakt deze in de template-directory van je_theme.)

Plak nu de groene link vd Google-site tussen de head-tags van je browser.
Wijzig nu het versienr. die in de link vermeld staat naar de laatste versie: .../2.0.3/...
Zorg er wel voor dat deze jQuery-link boven de drupal $scripts staat. Dit is nodig daar anders de standaard jQuery-bibliotheek overschreven wordt.

Daar er nu jQuery bibliotheken aanwezig zijn, kan dit voor conflicten zorgen. Dit lossen we op  door volgende regel toe te voegen:

<quote>
<script type="text/javascript">var $j = jQuery.noConflict();</script>
</quote>

Standaard gebruikt jQuery $ . De extra jQuery-bibliotheek geven we dus een andere alias; in ons voorbeeld $j, zo ontstaan er geen conflicten tussen beide bibliotheken.

In onderstaande schermfbeelding zie je tussen
<quote>
<!-- Extra jQuery - START -->
...
<!-- Extra jQuery - END -->
</quote>
hoe je header er zou moeten uitzien.

Je kunt controleren of de jQuery-bibliotheken actief zijn door volgende regels te typen in de console van de developer-plugin van je browser:
<quote>
jQuery().jquery
$j.jquery
</quote>
Resultaat:

In mijn voorbeeld zijn volgende bibliotheken actief: 1.10.1 en 2.0.3


Deel 2: jQuery code typen die de 2.0.3-versie gebruikt.

Maak een nieuw javscript-bestand aan met de naam custom_scripts.js in ../sites/all/themes/je_theme/js/
en voeg volgende code toe zoals in onderstaande afbeelding:

Als je nu de nieuwste jQuery-versie wil gebruiken voeg je gewoon de code toe in het bovenste gedeelte waar // jQuery code staat. Of gebruik je liever de stadaard megeleverde jquery-bibliotheek, dan voeg jeje code toe aan het onderste gedeelte.

Maar het is nog niet gedaan!

Bijna...

Momenteel is het bestand custom_scripts.js nog niet gelinkt met je site.

Open ../sites/all/themes/je_theme/je_theme.info

Voeg volgende regels toe onderaan het bestand:

<quote>

; jQuery/Javascripts Scripts

scripts[] = js/custom_scripts.js

</quote>

Leeg alle caches van je drupal-site en test je website met de nieuwste jQuery-bibliotheek!

Alle info over dit artikel had ik hier gevonden en met succes toegepast op mijn eigen site!