Hi,

I have been trying to implement galleryview on a custom page type of my SS 2.3.3 installation. It requires 4 javascript files & 1 css. The parameters are set in a small chunk of javascript in the header using the script tag. I have tried the following:

Page.php

class Page_Controller extends ContentController {	
	public function init() {
		parent::init();	
	 	Requirements::javascript('mysite/javascript/jquery_timers_2.js');
		Requirements::javascript('mysite/javascript/jquery_galleryview_2.js'); 
		Requirements::javascript('mysite/javascript/jquery_easing_1_3.js'); 	
		Requirements::javascript('mysite/javascript/jquery_1_32.js'); 
	}
}

------------------------------------

CustomPageType.php

class CustomPageType_Controller extends Page_Controller {
	public function init() 	{	
		parent::init();
		Requirements::css('themes/blackcandy/css/galleryview.css');
	}
}

and added the javascript block to the header of the custom page type .ss file:

CustomPageType.ss

<script>
	$(document).ready(function(){
		$('#gallery').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 50,
			frame_height: 50,

     		easing: 'easeInOutQuad',

		});
	});
</script>

---------------------------------

Here are the following errors that show up in IE

Webpage error details:

Message: Object expected
Message: 'jQuery' is undefined
Message: 'jQuery' is undefined
Message: 'jQuery' is undefined

From the above I assume the javascript files required by galleryview are not being included properly resulting in the unexpected object. I have been messing around with this long enough to know I need to pull over and ask for some direction =). Can someone please provide me with some insight, it is much appreciated!

-Matt

So are the files actually included (check source / Firebug)?

My guess is they probably are included correctly but jQuery is conflicting with Prototype (check if also included on those pages).
If they are not correctly included, check if you have the link to jQuery correct (jquery_1_32.js looks weird to me but of course could be how you named it).

Firefox with Firebug is your friend btw.. IE is useless in debugging javascript...

There might be a solution if all you files are actually included correctly and that is to put jQuery into NoConflict mode..

jQuery plug-ins may cause conflicts with prototype since the both use "$" as a short cut.

So you're inline script will cause two problems. First because its using the the "$" shortcut it will conflict so change it to:

<script> 
   jQuery(document).ready(function(){ 
      jQuery('#gallery').galleryView({ 
         panel_width: 800, 
         panel_height: 300, 
         frame_width: 50, 
         frame_height: 50,

      easing: 'easeInOutQuad',

      }); 
   }); 
</script>

The second issue is that the requirements calls will load AT THE BOTTOM of the head, unfortunately, below in-line script. So create another javascript file with all your jQuery calls and add that requirement to the end of the requirements list.

It wouldn't hurt to add jQuery.noConflict(); to the top of this file

Thank you very much! I now have a working implementation of this jquery plugin! I have been reading endlessly through different post but could not find a comprehensive explanation to my problem. Thanks to you, I have finally put it all together!

To others looking for more information on similar problems, please reference the following post:
http://www.silverstripe.org/customising-the-cms/show/252385#post252385

Cool. This helped me a lot. Thank you.

-

One thing which did confuse things here was the order of the js requirements.

I didn't even think to check that my javascript library loaded before the other jquery scripts.
Before I rearranged them, I was still getting the 'jQuery' is undefined, '$j' is undefined , '$' is undefined etc etc; so had presumed that the solution shown above wasn't working..