Minitutorial: phpwcms + MooTools + jQuery

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Minitutorial: phpwcms + MooTools + jQuery

Post by santscho » Thu 6. Aug 2009, 22:01

Hier ein Mini-Tutorial, wie man zwei JS-Frameworks in phpwcms einbinden kann. Ich versuche, leicht verständlich zu formulieren,
(Bitte korrigiert mich, wenn ich Blödsinn schreibe)


Einige Funktionen in phpwcms benötigen die MooTools. Zum Beispiel das Ein-/Ausblenden der Frontend-Edit-Buttons oder auch die lightbox. Das Core von phpwcms bindet den benötigten MooTools-Kern und die entsprechenden MooTools JavaScripte automatisch ein.
Es macht nun Sinn, nur MooTools basierte JS zu verwenden, da erstens nur der MooTools-Kern geladen werden muss (Zeitersparnis) und Konflikte mit anderen JS-Frameworks werden vermieden. Doch möchte man gerne auch JavaScripte basierend auf anderen Frameworks (z.B. jQuery) in einer phpwcms-Installation laufen lassen, was aber in den meisten Fällen die MooTools ausser Funktion setzt.

Wie entsteht der Konflikt zwischen zwei Frameworks?
Das $-Zeichen dient als Referenz zwischen Framework und JavaScript. Da die meisten JS-Frameworks das $-Zeichen als Referenz benutzen, treten zwangsläufig Konflikte ein. Man kann sich das in etwa so vorstellen: Framework = Fernsteuerung, Skript = Modellflugzeug, $-Zeichen = Frequenz. Sind nun zwei Hobbypiloten zur gleichen Zeit am Fliegen und haben die gleiche Frequenz in der Fernsteuerung eingestellt, wird eines der beiden Flugzeuge abstürzen.

Lösung
An guten Fernsteuerungen kann man die Frequenz umstellen, was zum Beispiel sehr hilfreich bei Modellflug-Wettbewerben ist. Und glücklicherweise, lässt sich auch im jQuery Framework die Frequenz umstellen. Kein Konflikt mit MooTools. Das ist ein grosser Vorteil von jQuery.

Vorgehen

Diese "Frequenzumstellung" funktioniert nur, wenn jQuery NACH den MooTools ins phpwcms-Template geladen wird, was bei phpwcms automatisch gegeben ist.
Also werden im HEAD-Bereich des Templates der benötigte jQuery-Kern und danach die jQuery-Skripte eingelsen. Wie zum Beispiel hier (kern + cycle + slideshow):

Code: Select all

<script type="text/javascript" src="template/js/jquery-1.3.2.min.js"></script>  
<script type="text/javascript" src="template/js/jquery.cycle.js"></script>
<script type="text/javascript" src="template/js/slideshow.js"></script>
Nun muss man jQuery anweisen, die $-Variabel mit einer eigenen Variabel zu ersetzen. Diese Anweisung setzt man
a) in die externen jQuery-JS (hier ind den Dateien "jquery.cycle.js" und "slideshow.js") oder
b) in die Header-jQuery-JS (keine im Beispiel vorhanden) oder
c) in die Body-jQuery-JS (keine im Beispiel vorhanden).

in meinem Beispiel möchte ich die $-Variabel mit einer eigenen ersetzen, die "jQuery" lauten soll.

Man öffnet also das JavaScript in einem Texteditor und fügt ganz am Anfang ein:

Code: Select all

jQuery.noConflict();
Nun nutzt man die Suchen/Ersetzen-Funktion des Texteditors: Suche nach $ / ersezte mit jQuery

Speichern... Fertig

Grüsse aus Singapore
Ralph
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by pepe » Fri 7. Aug 2009, 00:19

Seeehr interessant... da werde ich sicher auch mal mit "spielen" , danke :D

User avatar
Oliver Georgi
Site Admin
Posts: 9554
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by Oliver Georgi » Fri 7. Aug 2009, 01:37

naja, es wäre leichter, die slimbox gegen das jQuery Pondon auszutauschen :) Man sollte sich grundsätzlich auf eine JS Lib beschränken. Aber ich habe vor, das zur Auswahl zu stellen. Dann erübrigt sich das von seiten des Frontend Renderings in phpwcms.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by santscho » Fri 7. Aug 2009, 01:58

Oliver:
leichter, die slimbox gegen das jQuery Pondon auszutauschen :)
Benötigt aber sicher Eingriffe in den Kern von phpwcms. Oder nicht? Das wäre sicher nicht in Deinem Sinn, oder?

Pepe:
www dot society dot asiangeo dot com
Hier ein Beispiel, dass es funktioniert. Der grosse Slideshow-Teaser oben ist jQery. Hat zuvor Probleme mit MooTools gemacht. Lightbox nicht mehr funktioniert, Frontend Edit-Icons immer dargetellt. Aussderdem den jQeriy PNG-Fix, der auch mit in CSS eingebundenen PNGs klar kommt... Funktioniert jetzt alles prima. Hat mich nur zwei Minuten meiner Zeit gekostet. Gestern musste ich mir für Stunden den Kopf zerbrechen, wie ich mein Slideshop-Teaser-Problem ohne jQery lösen könnte.
War zuerst skeptisch, vorallem als mein Texteditor an die 250 $-Zeichen gesucht und ersetzt hat. Ich dachte, das wird nie und nimmer funktionieren und wurde positiv überrrascht.
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
Oliver Georgi
Site Admin
Posts: 9554
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by Oliver Georgi » Fri 7. Aug 2009, 08:52

Nönö, keine Eingriffe - es ist ja alles NUR JavaScript. Im Prinzip müsste ausreichen einfach die slimbox.js zu ersetzen. Dazumal es diese Slimbox ja auch als jQuery Variante gibt.

Stimmt aber - der Frontend-Edit müsste umgeschrieben werden. Oder einfach deaktiviert.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by jsw_nz » Fri 14. Aug 2009, 04:14

Hi Santscho,

Thanks very much for this thread (I used google tranaslate to make some sense)

I have historically not had luck with Mootootls/jQuery to coexist, even though I
used the standard jQuery.noConflict();

What I had not known was the need to manually do a find/replace $ >> jQuery
inside plugins - so your pointer really helps now ! In fact there is not a lot of discussion about this on
the numerous jQuery blogs - or at least the few that I have visited. So now there is absolutely no reason not
to use Oliver's use of mootools inside wcms AND jquery - yeh....

Now I wanted to ask you a question regarding your reference to both:

Code: Select all

<script type="text/javascript" src="template/js/jquery.cycle.js"></script>
<script type="text/javascript" src="template/js/slideshow.js"></script>
Is this for a template that already exists - if so got a URL?? :wink:

There have been a couple of posts on the forums regarding this:
first the jQuery image Gallery
http://forum.phpwcms.org/viewtopic.php? ... 22#p119022

and there are others
would be nice to have a list of jQuery stuff in one place

Have to believe there is a jQuery version of the images special (slider)
just have not spotted it yet.

Anyway thanks for the pointer - I feel so dense sometimes - nice to learn
from younger and smarter coders out there - hehe
all best
:)

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by santscho » Fri 14. Aug 2009, 04:54

Dear "jsw_nz"

You can see images (special) in action here. It works with the two scripts you see in my tutorial.

http://www (dot) society (dot) asiangeo (dot) com/
In this example, the text above the image (01 Campaign ....) is generated by phpwcms from the tags in CP images special and transformed with GT MOD to graphics.

http://www dot asiandiver dot com/index.php
This is a normal image slider without text.

Both sites are under construction. That's why I don't write the full URL.

My templates are not perfect yet. The amount of images is limited because there is no scrolling for the thumbnails. I could solve this with setting a scrollbar (overflow) for the thumbnail list. For my slider, you need two CPs with images (special). One for the main slides, one for the thumbnails. If you would like to do some experiments, just send me a PM with your email address and I will send you the whole package (incl. modified JS)

Ralph
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: Minitutorial: phpwcms + MooTools + jQuery

Post by jsw_nz » Fri 14. Aug 2009, 06:24

wow - very nice stuff!

now - the first question (forgive me in advance)
the link to your tutorial.... using

Code: Select all

<script type="text/javascript" src="template/js/jquery.cycle.js"></script>
<script type="text/javascript" src="template/js/slideshow.js"></script>
also the jwMedia Player list - very impressive
i never knew....

yousa good designa - :D

Post Reply