I have a site I am working on.
I am using a chunk to contain the entire head of my template. So far I am using several jQuery functions, all with their own CSS files. On one page I am using a jQuery slider and on another page I am using the Fancybox image viewer. None of the pages are using both. All my pages are using some jQuery code for my navigation but that is not a problem. The page with the slider script will not work with the Fancybox script in the head of the page. If I remove it the slider will work. The page with the Fancybox script does not mind the slider jQuery code in the header though. This is a puzzle?
Options:
1) Figure out that there is some jQuery specific issue here. Maybe the sequence of the script order? (I have tried mixing up the order.)
2) Create entirely different templates that contain the head code for each jQuery function I need (this keeps them separate.)
3) Use some kind of TV that allows me to pick which head code (with different jQuery functions) I want used on different pages.
4) Some other clever way?
Thanks,
Max
Actually I think I solved this.
I tried dropping the script call/reference from the main jQuery library in the last function (the Fancybox plugin) and this seems to take care of things. This puzzles me as I need the script call for the navbar jQuery code I am using higher up in the head?
But it does seem that these scripts do need to be in the correct order and have a proper order with the CSS references as well...
Max
An update to this post...
I have added a new gallery page using MaxiGallery that deploys another Fancybox jQuery event sequence. I added this to the {{head}} chunk that my page template uses. The problem is that the various jQuery events seem to need different versions of the jQuery library. Adding a particular version of the JQuery library will mess up the working of another jQuery event that uses a different version of jQuery.
I went round and round with this seemingly catch-22 situation. In the end I gave up and created a new full page template that focuses on the particular jQuery event and library that the page needs. This works.
But there must be a more efficient way. Would a better way be to place a TV in main template that allows me to pick different {{head}} chunks that contain the appropriate jQuery events and libraries?
Thanks!
Max
