jQuery Orientation for phpWcms

jsw_nz · Post by **jsw_nz** » Thu 23. Aug 2007, 06:22

I have spent the last day troubleshooting a number of script conflicts between mootools, slimbox and my candidate interest in jQuery.

jQuery distinguishes itself as having a jQuery.noConflict(); method - so theoretically it should allow workarounds with mootools. However mootools gets loaded conditionally inside front.func.inc.php AFTER jquery inclusions in the html['customhead'] call and thus the overwrite of jQuery does not work as expected. Also, having said that I noticed some conflicts with slimbox.js (confilcts were intermittent with slimbox.js) - so no explanation here

Whenever I see intermittent errors - I stay away - just like Oliver did when he decided to stay away from swfObject (another subject for another day)

I realize that the mootools/slimbox concept represents a lot of invested time on the part of OliG, especially inside img.func.inc.php (complex code) - so any suggestion to go in an other direction represents a serious amount of time. Since I am primarily a designer - (with just in time code knowledge) my recommendation might not be correct - but nonetheless I am going to put it out there for consideration.

I really think jQuery and its plugins points to a more sustainable solution in that the same function that mootools/slimbox provides can be built on top of jQuery - with nearly identical results - the demo page of jquery-interface-imagebox is here:

http://interface.eyecon.ro/demos/imagebox.html

The jQuery - interface website is impressive as well:
http://interface.eyecon.ro/demos

Also the library of plugins for jQuery itself is impressive:
http://jquery.com/plugins/

As well as the ease of adopting the core library itself -
http://docs.jquery.com/How_jQuery_Works

The use of jQuery for custom javascript (frontend and backend) is very strong. (I have been able to replace the pagination navbar on-the-fly - in fact the entire DOM is rewritable using jQuery - impressive.

Apparently Drupal has adopted jQuery in its core, likely for good reason. For the time being - I have been able to slightly modify img.func.inc.php to get jQuery - Interface - Imagebox to work. My instinct here is to recommend this library, due to the enormous plug-ins and vital community. So in other words, without being to crass about it, i am recommending going with jQuery - Interface - Imagebox to replace the existing mootools/slimbox approach. I just needed to share my 2 cents on the topic.

All the best to the community and especially the master himself, OliG

-john-

jsw_nz · Post by **jsw_nz** » Fri 24. Aug 2007, 07:53

I just wanted to add what i have been able to uncover. In fact, much of the real work is already done by OliG - and moving the lightbox (slimbox-mootools) implementation to jQuery equivalent for 'lightbox' is really simple. At the end of the day the feature set of jQuery and its small file size is pretty attractive.

Implementation for Interface|Imagebox:
see http://interface.eyecon.ro/docs/imagebox
for full details of implementation
(css is mandatory)

jquery-1.1.4.pack.js 21KB
http://jquery.com/
interface_easing_imagebox.js 17KB SELECTIVE DOWNLOADS FOR INTERFACE FOUND AT:
http://interface.eyecon.ro/download
TOTAL: 38KB

VS
mootools.js 43KB
slimbox.js 8KB
TOTAL 52KB

STANDARD INCLUDES:
<script src="template/inc_js/jquery-1.1.4.pack.js"></script>
<script src="template/inc_js/interface_easing_imagebox.js"></script> // custom named file from http://interface.eyecon.ro/download
I checked easing and imagebox - dowloaded and renamed to interface_easing_imagebox.js
plenty of other combinations

SMALL CHANGES TO front.func.inc.php

Code: Select all

// uncomment function initializeLightbox() arguments
// jQuery initializes everything on document.ready (window.onLoad)

SMALL CHANGES TO img.func.inc.php

Code: Select all

line 150 (approx):
// $table .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="lightbox"'; FORMER CODE
$table .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="imagebox"'; // NEW CODE

Code: Select all

line 267 (approx):
// $image_block .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="lightbox"';  FORMER CODE
$image_block .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="imagebox"';  // NEW CODE

Code: Select all

line 460  (approx)
// $table .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="lightbox['.$lightbox.']"'; FORMER CODE
$table .= '<a href="'.PHPWCMS_IMAGES.$zoominfo[0].'" rel="imagebox-'.$lightbox.'"'; // NEW CODE

SMALL CHANGES TO content.article.inc.php

Code: Select all

line 219
// $thumb_href .= ' rel="lightbox" target="_blank">'; FORMER CODE
$thumb_href .= ' rel="imagebox" target="_blank">'; // NEW CODE

everything is working on my localhost - likely to put something online in the near future

OK, i guess I am a jQuery advocate....
all best
-john-

kubens · Post by **kubens** » Fri 24. Aug 2007, 09:05

Not just you, me too

In my pimped phpWCMS 1.3.3 I use jQuery in some of my own content parts. I invested much time to find the right js library and I switched two or three times the libraries durring the last year. But now I really satisfied, because jQuery meets all my requirements.

I use primarly the Ajax features they enables me to integrate more usability. I load content dynamically in parts of my formular, based on settings which were made by the user in the formular. This is faster as a roundtrip for loading the whole page again. To hide and show parts formular depending on different settings is very easy too:

Code: Select all

show = 'trId'+$('select#cnt9006_template option:selected').text(); 
$('tr').filter('[@id^=trId]').hide();
$('tr').filter('[@id='+show+']').show();

I suggest everybody to go in detail of the existing JS libraries they could make your daily life more comfortable. Last but not least, for those of us who are interested in a really cool library, take a minute and look here This little CRUD based application is using Symfony and Ext. I made this proof of concept in May and in the meantime the feature list of Ext grows immediatly and it is a very powerfull, clean and fast component library. Just a further hint, of course you can use jQuery and Ext both at the same time for your projects.

Br
Wolfgang

jsw_nz · Post by **jsw_nz** » Sat 25. Aug 2007, 17:12

Cheers Wolfgang

Impressive work of yours (proof of concept)
- and great links...
- jQuery just upgraded today to 1.1.4
- apparently much faster
- tons of possibilities
- I am sure OliG is aware of this...

kubens · Post by **kubens** » Sat 25. Aug 2007, 20:19

Hi John,

I assumed that you will find these links interesting too

I had a dream and I am absolutely sure that many people here had dreams too, but what a great dream will be come true if anytime a combination of all this different fancy projects will be used in one phpWCMS or at least in another cms which based on the same structure idea as phpWCMS

Br
Wolfgang